javascript - ./~/constants-browserify/constants.json 中的错误

Question

我在客户端和服务器端拆分了我的文件夹，但我没有从父文件夹工作，我表现得好像它们是 2 个不同的文件夹...现在我想部署到 Heroku 但我为此需要一个主文件夹，所以我想更改我的 webpack.config 以便我可以从我的新根文件夹运行脚本。我遇到了一个我无法解决的最后一个错误，尝试这些解决方案对我也没有帮助:First , Second

这是我遇到的错误:

ERROR in ./~/constants-browserify/constants.json
Module parse failed: /Users/Documents/Twitch/testbot/node_modules/constants-browserify/constants.json Unexpected token (2:12)
You may need an appropriate loader to handle this file type.
| {
|   "O_RDONLY": 0,
|   "O_WRONLY": 1,
|   "O_RDWR": 2,
 @ ./src/js/reducers/chat.js 1:0-50
 @ ./src/js/script.js
 @ multi main

这是我的 webpack.config.js:

// changed some loader syntax after reading
// https://webpack.js.org/how-to/upgrade-from-webpack-1/

const path = require(`path`);

const webpack = require(`webpack`);
const {UglifyJsPlugin} = webpack.optimize;

const CopyWebpackPlugin = require(`copy-webpack-plugin`);
const ExtractTextWebpackPlugin = require(`extract-text-webpack-plugin`);
const configHtmls = require(`webpack-config-htmls`)();

const extractCSS = new ExtractTextWebpackPlugin(`css/style.css`);

// change for production build on different server path
const publicPath = `/`;

// hard copy assets folder for:
// - srcset images (not loaded through html-loader )
// - json files (through fetch)
// - fonts via WebFontLoader

const copy = new CopyWebpackPlugin([{
  from: `./src/assets`,
  to: `assets`
}], {
  ignore: [ `.DS_Store` ]
});

const config = {

  entry: [
    `./src/css/style.css`,
    `./src/js/script.js`
  ],

  resolve: {
    // import files without extension import ... from './Test'
    extensions: [`.js`, `.jsx`, `.css`]
  },

  output: {
    path: path.join(__dirname, `server`, `public`),
    filename: `js/[name].[hash].js`,
    publicPath
  },

  devtool: `sourcemap`,

  module: {

    rules: [
      {
        test: /\.css$/,
        loader: extractCSS.extract([
          {
            loader: `css`,
            options: {
              importLoaders: 1
            }
          },
          {
            loader: `postcss`
          }
        ])
      },
      {
        test: /\.html$/,
        loader: `html`,
        options: {
          attrs: [
            `audio:src`,
            `img:src`,
            `video:src`,
            `source:srcset`
          ] // read src from video, img & audio tag
        }
      },
      {
        test: /\.(jsx?)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: `babel`
          },
          {
            loader: `eslint`,
            options: {
              fix: true
            }
          }
        ]
      },
      {
        test: /\.(svg|png|jpe?g|gif|webp)$/,
        loader: `url`,
        options: {
          limit: 1000, // inline if < 1 kb
          context: `./src`,
          name: `[path][name].[ext]`
        }
      },
      {
        test: /\.(mp3|mp4)$/,
        loader: `file`,
        options: {
          context: `./src`,
          name: `[path][name].[ext]`
        }
      }
    ]

  },

  plugins: [
    extractCSS,
    copy
  ]

};

if(process.env.NODE_ENV === `production`){

  //image optimizing
  config.module.rules.push({
    test: /\.(svg|png|jpe?g|gif)$/,
    loader: `image-webpack`,
    enforce: `pre`
  });

  config.plugins = [
    ...config.plugins,
    new UglifyJsPlugin({
      sourceMap: true, // false returns errors.. -p + plugin conflict
      comments: false
    })
  ];

}

config.plugins = [...config.plugins, ...configHtmls.plugins];

module.exports = config;

这是错误中提到的reducer

import {CHAT_MESSAGE_RECEIVED} from 'constants';

const chatReducer = (state = [], action) => {
  switch(action.type){
  case CHAT_MESSAGE_RECEIVED:
    console.log(state, action);
    return [...state, action.payload];

  default:
    return state;
  }
};

export default chatReducer;

知道我做错了什么来修复这个错误吗？

Answer 1

我导入了一个路径为“constants”的文件，该路径干扰了 node_modules 的 constants-browserify 文件夹。

通过更改常量的文件名和路径，我修复了错误。