reactjs 您可能需要适当的加载程序来处理此文件类型,当前没有配置加载程序来处理此文件,”

vwoqyblh  于 2022-12-22  发布在  React
关注(0)|答案(6)|浏览(150)

我正在使用yarn设置react项目的webpack,出现以下错误:
./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"
  }
}
sqyvllje

sqyvllje1#

您使用了不必要的转义符:这不是必需的。

test: '/\.(js|jsx)$/',替换为test: /\.js$|jsx/,,应能正常工作。

我在我的机器中复制了您的问题,并发现了相同的问题,这是由上述修复程序解决的。
希望这能有所帮助,快乐编码!!!

oxiaedzo

oxiaedzo2#

所选答案缺少一些详细信息:

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

\: is an escape character在本例中为.
|: is an Alternation / OR operand
$: is end of line
希望这对你有用。
来源:https://www.rexegg.com/regex-quickstart.html

xzlaal3s

xzlaal3s3#

这个错误发生在我身上,只是因为文件被放置在项目的父文件夹中(即项目文件夹之外)。
将文件移动到适当的文件夹中可修复此问题。

ztmd8pv5

ztmd8pv54#

在我的例子中,我配置了这个,它工作了:

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

wtzytmuj5#

将下面提到的代码放入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();
wydwbb8l

wydwbb8l6#

添加一个.babelrc文件到node_modules文件夹所在的同一文件夹,包含以下内容

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

相关问题