您可能需要一个适当的加载器来处理此文件类型，目前没有配置任何加载器来处理此文件。

Question

我正在使用yarn为我的React项目设置webpack，但出现了以下错误：

ERROR in ./src/app.js 67:6 模块解析失败：意外的令牌 (67:6) 您可能需要适当的加载器来处理此文件类型， 目前没有配置任何加载器来处理此文件。请参阅 https://webpack.js.org/concepts#loaders ℹ ｢wdm｣：编译失败。

webpack.config.js

const path = require("path");

module.exports = {
    entry: "./src/app.js",
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module:{
        rules:[{
            loader: 'babel-loader',
            test: '/\.(js|jsx)$/',
            exclude: /node_modules/
        }]
    },
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public')
    }
}

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

package.json

{
  "name": "react",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "serve": "live-server public/",
    "build": "webpack",
    "dev-server": "webpack-dev-server"
  },
  "dependencies": {
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1",
    "live-server": "^1.2.1",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "webpack": "^4.39.3",
    "webpack-dev-server": "^3.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.6.0",
    "babel-loader": "^8.0.6",
    "webpack-cli": "^3.3.8"
  }
}

- Abdalrahman

---

你能把 app.js 的源代码包含进来吗？ - skovy

Answer 1

您使用了不必要的转义字符“\”，这是不必要的。

请将 test: '/\.(js|jsx)$/', 替换为 test: /\.js$|jsx/,，它应该可以正常工作。

我在我的机器上复制了您的问题，并发现了相同的问题，以上修复方法已经解决了它。

希望这可以帮助到您，愉快编码！

- Darpan Rangari

---

除文件扩展名外，它将与包含字符串“jsx”的所有内容匹配。除了额外的单引号外，OP的代码很好。 - Matti Virkkunen

Answer 2

选中的答案缺少一些细节:

应该是 test: /\.js|\.jsx$/

\ 是一个转义字符 在这种情况下用于转义 .

| 是替换 / OR 操作符

$ 表示行尾

希望这对你有用。

来源: https://www.rexegg.com/regex-quickstart.html

- fadly kayo

---

在 jsx 中添加后，出现了错误..您可能需要一个额外的加载器来处理这些加载器的结果。 - skate_23

Answer 3

这个错误是因为文件放在项目的上级文件夹里（即项目文件夹外面）导致的。

将文件移动到正确的文件夹就可以解决这个问题。

- CPHPython

Answer 4

在我的情况下，我进行了配置并且它可以正常工作：

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

- Ramiro Godoy

Answer 5

如果您在处理文件时遇到此错误，请在担心修改webpack配置之前，请检查导致错误的文件是否具有扩展名，即.js或.jsx。当我忘记在我的一个Javascript文件上添加扩展名时，我遇到了这个错误。例如，我使用my-file而不是my-file.js。

- James Serengia

Answer 6

我知道这不是对原始问题的直接回答，但当人们在处理加载器问题时，这是他们最有可能到达的地方之一。

在我的情况下，它抱怨的文件在node_modules文件夹内。我正在直接使用一个typescript文件。

{
    test: /\.m?ts$|\.tsx?$/,
    // exclude: /node_modules/,
    use: {
        loader: "ts-loader",
        options: {
            onlyCompileBundledFiles: true,
        }
    },
},

我所做的更改是删除了排除部分，并在ts-loader中添加了onlyCompileBundledFiles。其他加载器可能有类似的功能。但基本上它只会处理包含在捆绑包中的项目，无论它们是否在node_modules文件夹内或外。

- Keith Banner

Answer 7

将下面提到的代码放入webpack文件中。

mix.extend(
    "graphql",
    new (class {
        dependencies() {
            return ["graphql", "graphql-tag"];
        }

        webpackRules() {
            return {
                test: /\.(graphql|gql)$/,
                exclude: /node_modules/,
                loader: "graphql-tag/loader"
            };
        }
    })()
);


mix.js("resources/js/app.js", "public/js").vue();

mix.graphql();

- shaher11

---

什么是mix？能否请您解释一下？ - Muhammad Iqbal

我想知道我们是否尝试在这里添加GraphQL加载器。 - Greko2015 GuFn

它适用于 Laravel 和 Vue 项目。 - Eahiya

Answer 8

在与 node_modules 文件夹相同的文件夹中添加一个 .babelrc 文件，并将以下内容复制到其中。

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

- Bhargav Choudhury

---

我已经有这个文件了，但我仍然收到上述错误。 - skate_23

这并未解决问题。 - Jason Rice