./src/index.js 中的错误 14:4 模块解析失败：意外标记 (14:4) 您可能需要适当的加载程序来处理此文件类型

Question

我正在尝试运行与 webpack 做出反应。我收到以下错误：

./src/index.js 中的错误 14:4 模块解析失败：意外标记 (14:4) 您可能需要一个合适的加载器来处理这种文件类型，目前没有配置加载器来处理这种文件。

| ReactDOM.render(
>     <HashRouter>
|         <App />
|     </HashRouter>,

webpack.config.js

module.exports = {
    entry: path.resolve(__dirname, 'src/App.js'),
    watch: true,
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
            }
        }]
    }, 
}

package.json

{
  "name": "app-weather",
  "version": "0.1.0",
  "private": true,
  "main": "index.js",
  "dependencies": {
    "bulma": "^0.7.5",
    "dotenv": "^8.0.0",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  }
}

Answer 1

您需要为 react 添加预设以通过 babel 加载，并添加对 JSX 文件的支持

module.exports = {
    entry: path.resolve(__dirname, 'src/App.js'),
    watch: true,
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [{
            test: /\.jsx?$/, // change here
            exclude: /(node_modules|bower_components)/,
            options: { // added this
                presets: ['react'],
            },
            use: {
                loader: 'babel-loader',
            }
        ]
    }, 
}

Answer 2

修改您的 babel-loader 配置：

将您的 test 条件更改为 /\.jsx?$/，因此 .jsx 也将被转译。
将 options 添加到 react 预设下 (!) use （不是作为兄弟姐妹到use)
如果你想使用 Babel 6，那么你需要安装用于 Babel 7 的 babel-loader v7 (npm i -D babel-loader@7) instead of v8。

那你应该没问题。以下是对我有用的 Babel 6（以及 7，如果你想更改）配置的相关部分：

通天塔 6

网络包：

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["react"]
          },
        }
      }
    ]
  }
};

package.json:

{
  ...
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1"
  },
}

通天塔 7

网络包：

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.jsx?$/, 
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react"]
          }
        }
      }
    ]
  }
};

package.json:

{
  ...
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6"
  }
}

希望对您有帮助。

Answer 3

这意味着您的浏览器正在提供未转译或未转换的代码。

当这些文件以某种方式被遗漏用于转译时会出现此问题，请确保这些文件夹包含在有效加载器下的 webpack 模块部分中，例如 - 对于 typescript - ts-loader 等。花了很多小时并得到修复。

您可以使用其他编译器，例如 babel。适合自己的就看自己了

 module: {
       rules: [
                    {
                        test: /\.ts|\.tsx?$/, loader: 'ts-loader', 
                        options: { onlyCompileBundledFiles: true, configFile: "testing.tsconfig.json", compilerOptions: {
                            noEmit: false, allowTsInNodeModules: false
                          }}, 
                        include: [
                            path.resolve(__dirname, "./src"),
                            path.resolve(__dirname, "./tests")
                          ],
                        exclude: [ 
                            path.resolve(__dirname, './automation/'),
                            path.resolve(__dirname, './src/types/testutils/'),
                            path.resolve(__dirname, './node_modules/')
                      ]
                    }
            ]
   }

看看这个包含部分：

 include: [
         path.resolve(__dirname, "./src"),
         path.resolve(__dirname, "./tests")
 ],

./src/index.js 中的错误 14:4 模块解析失败：意外标记 (14:4) 您可能需要适当的加载程序来处理此文件类型

ERROR in ./src/index.js 14:4 Module parse failed: Unexpected token (14:4) You may need an appropriate loader to handle this file type

reactjs

webpack

babeljs

babel-loader

通天塔 6

通天塔 7