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

Posted 2023-02-22

【中文标题】./~/constants-browserify/constants.json 中的错误

【英文标题】：ERROR in ./~/constants-browserify/constants.json

【发布时间】：2017-03-12 23:46:06

【问题描述】：

我已经在客户端和服务器端拆分了我的文件夹，但我没有从父文件夹工作，我表现得好像它们是 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;

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

【问题讨论】：

您应该将错误消息直接粘贴到问题中，以便其他人在搜索时可以更轻松地找到此问题（这也为人们回答问题节省了时间，因为无需等待要加载的图像）。

我以为我是通过在我的问题中输入错误的第一行来做到这一点的？您还会添加哪一部分？我马上修改

我的意思是您在终端中收到的整个错误消息（您目前将其作为图像）。将它包含在您的问题中被认为更好，因此它易于阅读，并且在删除图像时不会遭受链接腐烂。

哦，对不起，我误解了，我以为你的意思是在标题中说“问题”，是的，你是对的，我会这样做

除此之外，关于如何解决这个问题的任何线索：/？我想尽快在 Heroku 上启动并运行它（感谢您指出“text > img”）

【参考方案1】：

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

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

【讨论】：

你知道是否可以设置分辨率优先级，所以我的constants 文件将被包含而不是constants-browserify？

@LiubomyrMykhalchenko 我认为这只是要更改的 webpack 设置，不是吗？

是的，我想是的，但我想也许你知道应该改变什么。我玩了一下 webpack 配置，但最终将 constants.js 重命名为 const.js。

我做了类似的事情。我不得不删除一个导入：“import defaultCipherList from 'constants';”