0

I'm setting up webpack to my react project using npm run dev and this error appears:

ERROR in ./MesWeb/frontend/src/index.js 8:2 Module parse failed: Unexpected token (8:2) 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 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"
  }
}
ChrisLi
  • 1
  • 1
  • 1

1 Answers1

0

This is not a problem with webpack, but with ReactDOM.render. You should pass a variable containing your <BrowserRouter> and it's children in, instead of passing that chunk of JSX in.

E.g.

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

Reference on how to use ReactDOM.render: - https://reactjs.org/docs/react-dom.html#render - https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element

Lim Jing Rong
  • 426
  • 2
  • 4
  • hi @LimJingRong First of all Thanks for your reply. why i using `create-react-app` to create project and using `npm run build` can success building. on top of project i went to used React match Django problem dicovered – ChrisLi May 29 '20 at 02:26