React build issus: вам может потребоваться соответствующий загрузчик для обработки этого типа файла, в настоящее время загрузчики не настроены для обработки этого файла - PullRequest
Новая
       6

React build issus: вам может потребоваться соответствующий загрузчик для обработки этого типа файла, в настоящее время загрузчики не настроены для обработки этого файла

0 голосов
/ 28 мая 2020
• 1000 Неожиданный токен (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']
      }]
    }
}

.babelr c

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

пакет . 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"
  }
}

1 Ответ

0 голосов
/ 28 мая 2020

Это проблема не с 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 -элемент-рендеринг

...