如何修复在反应中使用 JSON 文件时“模块构建失败:语法错误:意外令牌”错误

Question

我正在遵循Brian Holt的反应教程，我需要在我的反应组件中导入.json文件，如下所示：法典

当我尝试构建我的项目时，我得到了

ERROR in ./data.json
Module build failed: SyntaxError: Unexpected token, expected

喜欢这个：终端中的错误标题

起初我认为这是一个eslint问题，但似乎它发生在构建步骤中，我尝试向webpack添加一个json-loader，但没有任何成功。

网络包版本：2.6.1

巴别核心版：6.24.1

巴别塔加载器版本：7.0.0,这是我的 webpack 配置文件：

const path = require('path')
module.exports = {
   context: __dirname,
   entry: './js/clientApp',
   devtool: 'cheap-eval-source-map',
   output: {
      path: path.join(__dirname, 'public'),
      filename: 'bundle.js',
      publicPath: '/assets/'
   },
   resolve: {
      extensions: ['.js', '.jsx', ',json']
   },
   devServer: {
      publicPath: '/public/',
      port: 2110,
      open: true,
      historyApiFallback: true
   },
   stats: {
      colors: true,
      reasons: true,
      chunks: true
   },
   module: {
      rules: [
         {
            enforce: 'pre',
            test: /.jsx?/,
            loader: 'eslint-loader',
            exclude: /node_modules/
         },
         {
            test: /.jsx?/,
            loader: 'babel-loader'
         }
      ]
   }
}

这是我的 .babelrc 文件：

{
    "presets": [
        "react", ["env", {
            "targets": {
                "browsers": "last 2 versions"
            },
            "loose": true,
            "modules": false
        }]
    ]
}

请问有什么建议吗？

Answer 1

正则表达式

test 属性标识应转换的一个或多个文件。

问题在于规则上的正则表达式：

{ test: /.jsx?/ }

您告诉 webpack 将 babel-loader 与任何以 .js or .jsx 开头的文件扩展名一起使用

因此，如您所见.json与测试相匹配。

溶液

$ - 匹配字符串末尾之前的任何内容

要解决此问题，只需将?替换为 $ ，请参阅以下示例：

 module: {
      rules: [
         {
            test: /.jsx$/,
            loader: 'babel-loader'
         }
      ]
   }