Node.js Webpack/babel意外标记，应为“预期”&引用；

我试图导入一个JSON文件，但当我试图加载我的JSON文件时，webpack给了我一个错误

./src/testData.json中出错 模块构建失败（来自./node_modules/babel loader/lib/index.js）： 语法错误：C:\Users\Alex\Documents\Work\test app\learn fullstack javascript\src\testData.json：意外标记，预期“；”（3:12）

我已经尝试更改我的babel和webpack配置文件，但无法修复该问题

以下是我的配置文件： webpack.config.js

module.exports = {
    entry: './src/index.js',
    output: {
      path: __dirname + '/public',
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx|json)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets:['@babel/preset-env']
            }
          }
        }
      ]
    }
  };

module.exports = {
    presets: ['@babel/preset-env', '@babel/react'],
};

babel.config.js

module.exports = {
    entry: './src/index.js',
    output: {
      path: __dirname + '/public',
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx|json)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets:['@babel/preset-env']
            }
          }
        }
      ]
    }
  };

module.exports = {
    presets: ['@babel/preset-env', '@babel/react'],
};

B.法律改革委员会

{
  "presets": [
      "@babel/preset-env",
      "@babel/react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

最后是mypackage.json

{
  "name": "learjs",
  "version": "1.0.0",
  "description": "For an up-to-date configuration guide: [jscomplete.com/reactful](https://jscomplete.com/reactful)",
  "main": "index.js",
  "scripts": {
    "start": "nodemon --exec babel-node server.js --ignore public/",
    "dev": "webpack-dev-server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jscomplete/learn-fullstack-javascript.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/jscomplete/learn-fullstack-javascript/issues"
  },
  "homepage": "https://github.com/jscomplete/learn-fullstack-javascript#readme",
  "dependencies": {
    "@babel-preset-node7": "^1.5.0",
    "@babel/register": "^7.4.0",
    "braces": "^2.3.2",
    "ejs": "^2.6.1",
    "express": "^4.16.4",
    "mongodb": "^3.2.3",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "webpack-dev-server": "^3.3.1"
  },
  "devDependencies": {
    "@babel-core": "^7.0.0-bridge.0",
    "@babel-eslint": "^10.0.1",
    "@babel-jest": "^24.7.1",
    "@babel-loader": "^8.0.0-beta.6",
    "@babel/cli": "^7.4.3",
    "@babel/core": "^7.4.3",
    "@babel/node": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-loader": "^8.0.5",
    "eslint": "^5.16.0",
    "eslint-plugin-react": "^7.12.4",
    "html-webpack-plugin": "^3.2.0",
    "json-loader": "^0.5.7",
    "nodemon": "^1.18.11",
    "regenerator-runtime": "^0.13.2",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  },
  "resolutions": {
    "babel-core": "7.0.0-bridge.0"
  }
}

我希望在chrome开发工具中得到类似的东西

Object i
  contents: Array[4]
  > 0: Object
  > .......

---

尝试从您的网页配置中取出

json

。您不需要babel loader来处理json，您可以使用json loader来处理json

module.exports = {
    entry: './src/index.js',
    output: {
      path: __dirname + '/public',
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets:['@babel/preset-env']
            }
          }
        },
        {
          test:  /\.json$/,
          exclude: /node_modules/,
          use: {
            // included by default (https://webpack.js.org/loaders/json-loader/)
            loader: 'json-loader' 
          }
        }
      ]
    }
  };

---

可能您只需要从webpack.config.json文件中的

test://\（js | jsx | json）$/

中删除jsx和json

 rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets:['@babel/preset-env']
        }
      }
    }
  ]    

---

您遗漏了我们最需要查看的文件：

testData.json

，错误消息特别指向的文件。：-）显然它有一个

在其中。它不应该（在字符串之外），JSON不使用
什么都可以。哦，老兄，我忽略了这一点；/，刚刚在帖子中添加了json文件。你真是个漂亮的人！这很有效！非常感谢你的帮助！很高兴它成功了！如果你愿意，你可以选择这个作为你的答案，我会得到分数。对我来说，从网页配置中取出
json
就足够了。我不必使用
json加载程序
。据我所知，Webpack现在是开箱即用的。请尝试解释你的答案，以便其他人可以从中学习。实际上我不知道为什么会发生这种情况。我遇到了完全相同的问题，而且我还没有反应过来。我猜jsx和json之间存在冲突，json文件不应该用babel loader处理。