react + webpack在另一台机器上失败

Question

我已经克隆了一个git仓库，该仓库在另一台机器上运行良好。我无法通过以下错误消息运行sudo npm start

ERROR in ./src/routes/index.js 11:37
Module parse failed: Unexpected token (11:37)
You may need an appropriate loader to handle this file type.
| import * as roles from "../UserRoles"; // Dashboards
|
> const TeacherClassroom = async(() => import("../pages/teacher/classroom"));
| const StudentClassroom = async(() => import("../pages/student/classroom"));
| const StudentReportList = async(() => import("../pages/student/report/list"));
 @ ./src/routes/Routes.js 4:0-88 21:6-18 51:104-114 51:141-154 51:186-198
 @ ./src/App.js
 @ ./src/index.js
 @ multi @babel/polyfill react-hot-loader/patch ./src/index.js

我正在WSL ubuntu上运行代码。我尝试使用nvm在以下节点版本上运行它：-v12.14.1-v8.9.1-v8.9.4-v10.10.1我也尝试从已部署的应用程序下载代码，但仍然在代码的不同位置显示you may need an appropriate loader to handle this file type并发出相同的错误。

这是我的配置文件：

package.json的一部分：

  "dependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@fortawesome/fontawesome-svg-core": "1.2.19",
    "@fortawesome/free-brands-svg-icons": "5.8.2",
    "@fortawesome/free-regular-svg-icons": "5.9.0",
    "@fortawesome/free-solid-svg-icons": "5.9.0",
    "@fortawesome/react-fontawesome": "0.1.4",
    "@fullcalendar/core": "4.2.0",
    "@fullcalendar/daygrid": "4.2.0",
    "@fullcalendar/interaction": "4.2.0",
    "@fullcalendar/list": "4.2.0",
    "@fullcalendar/react": "4.2.0",
    "@fullcalendar/timegrid": "4.2.0",
    "apexcharts": "3.7.1",
    "availity-reactstrap-validation": "2.5.3",
    "axios": "0.19.0",
    "bootstrap": "4.3.1",
    "chart.js": "2.8.0",
    "classnames": "2.2.6",
    "core-js": "^2.6.11",
    "electron-log": "3.0.8",
    "electron-updater": "4.1.2",
    "fullcalendar": "3.10.0",
    "jquery": "3.4.1",
    "moment": "2.24.0",
    "moment-timezone": "0.5.26",
    "pdfjs": "2.3.0",
    "pdfjs-dist": "2.0.943",
    "prop-types": "15.7.2",
    "react": "16.8.6",
    "react-alert": "5.5.0",
    "react-apexcharts": "1.3.3",
    "react-bootstrap-table-next": "3.1.3",
    "react-bootstrap-table2-paginator": "2.0.6",
    "react-bootstrap-table2-toolkit": "2.0.0",
    "react-chartjs-2": "2.7.6",
    "react-datetime": "2.16.3",
    "react-dom": "16.8.6",
    "react-dragula": "1.1.17",
    "react-feather": "1.1.6",
    "react-input-mask": "2.0.4",
    "react-pdf": "4.1.0",
    "react-perfect-scrollbar": "1.5.3",
    "react-popper": "^1.3.3",
    "react-quill": "1.3.3",
    "react-redux": "7.0.3",
    "react-redux-toastr": "7.5.1",
    "react-router-dom": "5.0.0",
    "react-scripts": "^3.3.0",
    "react-select": "3.0.4",
    "react-transition-group": "4.1.0",
    "react-websocket": "2.0.1",
    "reactstrap": "8.0.0",
    "redux": "4.0.1",
    "redux-thunk": "2.3.0",
    "simple-peer": "9.3.0",
    "vkey": "1.0.1",
    "webrtc-adapter": "7.2.4"
  },

  "devDependencies": {
    "@babel/cli": "7.4.4",
    "@babel/core": "7.4.5",
    "@babel/plugin-proposal-class-properties": "7.4.4",
    "@babel/polyfill": "^7.6.0",
    "@babel/preset-env": "7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "8.0.5",
    "css-loader": "2.1.1",
    "electron": "6.1.3",
    "electron-builder": "21.2.0",
    "file-loader": "^4.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "3.2.0",
    "node-gyp": "5.0.1",
    "node-loader": "0.6.0",
    "react-hot-loader": "4.5.3",
    "redux-devtools-extension": "2.13.8",
    "style-loader": "0.23.1",
    "typescript": "3.5.2",
    "webpack": "4.33.0",
    "webpack-cli": "3.3.3",
    "webpack-dev-server": "3.7.0"
  },

  "main": "public/electron.js",
  "scripts": {
    "start": "webpack-dev-server --mode development"
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: [
        '@babel/polyfill',
        'react-hot-loader/patch',
        './src/index.js'
    ],
    output: {
        path: path.resolve(__dirname, 'dist/js'),
        filename: 'bundle.[hash].js',
        globalObject: 'this',
        publicPath: '/'
    },
    module: {
      rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ["@babel/preset-react"]
                },
            }
        },
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.node$/,
          use: 'node-loader'
        },
        {
          test: /\.(png|jpe?g|gif|svg|pdf)$/,
          use: [
            {
              loader: 'file-loader',
              options: {},
            },
          ],
        },
        {
          test: /\.(html)$/,
          use: {
            loader: 'html-loader',
            options: {
              attrs: [':data-src']
            }
          }
        }
      ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: 'public/index.html',
            favicon: 'public/tocol_logo.ico'
        })
    ],
    devServer: {
        host: 'localhost',
        port: '3000',
        historyApiFallback: true,
        hot: true
    }
};

。babelrc

{
    "presets": [
      ["@babel/preset-env",
      {
        "targets": { "browsers": ["last 2 chrome versions"] },
        "useBuiltIns": "entry"
      }],"@babel/preset-react" ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-syntax-dynamic-import"
    ]
}

Answer 1

尝试使用

{
          test: /\.(png|jpe?g|gif|svg|pdf)$/,
          use: [
            {
              loader: 'url-loader',
              options: {},
            },
          ],