Question

我正在使用npm run dev将webpack设置为我的react项目，并且出现此错误：

./ MesWeb / frontend / src / index.js 8：2中的错误模块解析失败：意外的令牌（8：2）您可能需要适当的加载程序来处理此文件类型，当前没有配置任何加载程序来处理此文件。参见https://webpack.js.org/concepts#loaders

| const rootElement = document.getElementById("root");
| ReactDOM.render(
>   <BrowserRouter>
|     <Switch>
|       <App />

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = { 
    entry: ["./MesWeb/frontend/src/App.js","./MesWeb/frontend/src/index.js"],
    output: {
      path: path.resolve(__dirname, 'frontend'),
      filename: 'main.js'
    },
    module:{
        rules:[{
            test: /\.js$|jsx/,
            exclude : /node_modules/,
            loader:"babel-loader" 
        }]
    },
    module: {
      rules: [{
        test: /\.css$/,
        loaders: ['style', 'css']
      }]
    }
}

.babelrc

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

package.json

{
  "name": "WEB",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development ./MesWeb/frontend/src/index.js --output ./MesWeb/frontend/static/frontend/main.js",
    "build": "webpack --mode production ./MesWeb/frontend/src/index.js --output ./MesWeb/frontend/static/frontend/main.js"
  },
  "repository": {
    "type": "git",
    "url": "http://60.249.209.133:3000/MCS/WEB.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.10.1",
    "@babel/core": "^7.10.1",
    "@babel/preset-env": "^7.10.1",
    "@babel/preset-react": "^7.10.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.1.0",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^3.5.3",
    "prop-types": "^15.7.2",
    "react-dom": "^16.13.1",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@chakra-ui/core": "^0.8.0",
    "@emotion/core": "^10.0.28",
    "@emotion/styled": "^10.0.27",
    "babel-polyfill": "^6.26.0",
    "bootstrap-4": "^4.0.0",
    "emotion-theming": "^10.0.27",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.2.0",
    "react-script": "^2.0.5"
  }
}

Answer 1

这不是webpack的问题，而是ReactDOM.render的问题。您应该传递包含<BrowserRouter>及其子元素的变量，而不是传递JSX块。

例如

const element = (
  <BrowserRouter>
    <Switch>
    <App />
  .
  .
  .
);
ReactDOM.render(element, rootElement);

有关如何使用ReactDOM.render的参考： -https://reactjs.org/docs/react-dom.html#render -https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element

React build issus：您可能需要适当的加载程序来处理此文件类型，当前未配置任何加载程序来处理此文件

1 个答案: