Javascript 尝试构建JSX时,Webpack抛出错误

Javascript 尝试构建JSX时,Webpack抛出错误,javascript,reactjs,webpack,babeljs,babel-loader,Javascript,Reactjs,Webpack,Babeljs,Babel Loader,这个问题有很多答案,所以我发誓我都试过了。我不确定配置设置有什么问题 在终端中运行webpack时出现的错误: ERROR in ./src/index.js 13:8 Module parse failed: Unexpected token (13:8) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S

这个问题有很多答案,所以我发誓我都试过了。我不确定配置设置有什么问题

在终端中运行webpack时出现的错误:

ERROR in ./src/index.js 13:8
Module parse failed: Unexpected token (13:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     // const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
|     return (
>         <HomeShell/>
|     );
| };
我的宝贝

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
mypackage.json

{
  "name": "site name here",
  "version": "1.0.0",
  "description": "site desc",
  "main": "index.js",
  "type": "module",
  "repository": {
    "type": "git",
    "url": "git url"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "issues url"
  },
  "homepage": "readme url",
  "dependencies": {
    "@babel/polyfill": "^7.10.1",
    "@types/express": "^4.17.6",
    "axios": "^0.19.2",
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "nodemailer": "^6.4.5",
    "path": "^0.12.7",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-redux": "^7.2.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.5"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.5.3",
    "file-loader": "^5.1.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "image-webpack-loader": "^3.6.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rm -rf dist && mkdir dist && webpack && babel server -s -d dist",
    "clean": "rm -rf dist",
    "production": "npm run build && node bin/production",
    "start": "npm run production"
  }
}
我远不是react/webpack/babel方面的专家,但在我运行的另一个基本应用程序上,这个精确的设置似乎很好。不确定这两个应用程序之间有什么不同。

我明白了

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

在.babelrc文件和加载程序选项中。可能存在冲突。

您提到您正在使用webpack.config.cjs文件,但目前webpack默认不支持该文件:


您需要显式传递-config webpack.config.cjs选项才能加载此文件。

刚刚删除了我的webpack.config.cjs的加载程序选项中的预设选项,但仍然出现相同的错误。与我拥有的其他配置相比,我看到唯一有帮助的是在.babelrc文件中使用此选项{presets:[@babel/env,@babel/react]}而不是{presets:[@babel/preset env,@babel/preset react]}你确定你的webpack.config.cjs正在加载吗?如果你在其中放了一个console.log,它会打印出来吗?@loganfsmyth你是对的。它没有加载。我没有意识到新的.cjs结尾需要在终端/构建脚本中的-config选项中传递它。一切都很好。如果你作为答案发布,我会接受它
{
  "name": "site name here",
  "version": "1.0.0",
  "description": "site desc",
  "main": "index.js",
  "type": "module",
  "repository": {
    "type": "git",
    "url": "git url"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "issues url"
  },
  "homepage": "readme url",
  "dependencies": {
    "@babel/polyfill": "^7.10.1",
    "@types/express": "^4.17.6",
    "axios": "^0.19.2",
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "nodemailer": "^6.4.5",
    "path": "^0.12.7",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-redux": "^7.2.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.5"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.5.3",
    "file-loader": "^5.1.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "image-webpack-loader": "^3.6.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rm -rf dist && mkdir dist && webpack && babel server -s -d dist",
    "clean": "rm -rf dist",
    "production": "npm run build && node bin/production",
    "start": "npm run production"
  }
}
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}