Webpack和babel配置問題：“您可能需要適當的加載程序來處理此文件類型。”

Question

我正在嘗試通過將其作為節點模塊導入，將另一個項目引入我們的新項目。 我收到以下錯誤消息：

   WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in ./src/index.js 8:16
Module parse failed: Unexpected token (8:16)
You may need an appropriate loader to handle this file type.
| import * as serviceWorker from './serviceWorker';
| 
> ReactDOM.render(<App />, document.getElementById('root'));
| 
| module.hot.accept();
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src main[2]
ℹ ｢wdm｣: Failed to compile.

據我所知，這與webpack.config.js ， .babelrc或package.json中的錯誤設置有關。 我看到更多的人遇到了這個問題，並且我嘗試遵循答案中看到的結構，但是沒有一個對我有用。 現在，我得到了仍然導致此錯誤的以下文件。 無論我做什么，該錯誤都不會消失：

的package.json：

{
  "name": "mysecondapp-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "myfirstapp-react": "^2.1.2",
    "jquery": "^3.3.1",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-router": "^4.4.0-beta.1"
  },
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --open --mode development",
    "build": "webpack --mode build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "react-hot-loader": "^4.6.3",
    "react-svg-loader": "^2.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

.babelrc：

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

webpack.config.js ：（由於我為了定位錯誤而進行了大量編輯，這看起來可能有點混亂）

const path = require("path");
const webpack = require('webpack');
module.exports = {
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: './dist',
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.js(x)$/,
        include: path.resolve(__dirname, 'src'),
        loader: 'babel-loader',
        query: {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      },
      {
        test: /\.(css|less)$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.svg$/,
        loaders: [
          'babel-loader',
          {
            loader: 'react-svg-loader',
            query: {
              jsx: true
            }
          },
        ]
      }
    ]
  },
};

Answer 1

我通過更改解決了該問題：

test: /\.js(x)$/

至

test: /\.jsx$/