在反应中使用 JSON 文件时如何解决“模块构建失败：SyntaxError: Unexpected token”错误？

Posted 2023-02-22

【中文标题】在反应中使用 JSON 文件时如何解决“模块构建失败：SyntaxError: Unexpected token”错误？

【英文标题】：How to fix “Module build failed: SyntaxError: Unexpected token” error when using JSON file in react?

【发布时间】：2018-08-27 09:25:39

【问题描述】：

我正在关注 Brian holt 的 react 教程，我需要在我的 react 组件中导入 .json 文件，如下所示： code

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

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

像这样： Error caption in terminal

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

Webpack 版本： 2.6.1

Babel 核心版本： 6.24.1

Babel 加载器版本： 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
        ]
    ]

有什么建议吗？

【问题讨论】：

你能分享你的data.json吗

es6 modules implementation, how to load a json file的可能重复

你需要使用json-loader，查看这个答案：***.com/a/33650470/6836839

@btzr 我尝试安装 json-loader 并且错误仍然存​​在！

我已经发布了错误的说明，这就是ERROR in ./data.json Module build failed: SyntaxError: Unexpected token, expected ; (2:11) 1 | > 2 | "shows": [ | ^ 3 | 4 | 5 | "title": "Atlanta",

【参考方案1】：

正则表达式

测试属性标识应该转换哪个或哪些文件。

问题是你的规则中的正则表达式：

 test: /\.jsx?/ 

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

所以你可以看到.json 匹配测试。

解决方案

$ - 匹配直到字符串结尾的任何内容

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

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

【讨论】：

非常感谢@btzr 的帮助，这对我来说真是一场噩梦xdxd。