您可能需要适当的加载程序来处理此文件类型，当前没有配置任何加载程序来处理此文件。 [英] You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."

问题描述

我正在使用yarn设置webpack到我的react项目，并且出现此错误：

I'm setting up webpack to my react project using yarn and this error appears:

./ src / app中的错误。 js 67：6模块解析失败：意外的令牌
（67：6）您可能需要适当的加载程序来处理此文件类型，
当前未配置任何加载程序来处理此文件。请参阅
https://webpack.js.org/concepts#loaders
｢wdm｣：编译失败。

ERROR in ./src/app.js 67:6 Module parse failed: Unexpected token (67:6) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders ℹ ｢wdm｣: Failed to compile.

webpack.config.js

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

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"
  }
}

推荐答案

您正在使用不必要的转义符：这不是必需的。

You are using unnecessary escape character: which is not required.

替换 test：'/\.(js|jsx）$ /'， with test：/\.js$|jsx /，应该可以正常工作。

Replace test: '/\.(js|jsx)$/', with test: /\.js$|jsx/, it should work fine.

我在您的计算机中复制了您的问题，发现可以通过上述修复程序解决。

I replicated your issue in my machine and found the same which is resolved by the above fix.

希望这会有所帮助，编码愉快！！！

hope this helps, happy coding!!!

这篇关于您可能需要适当的加载程序来处理此文件类型，当前没有配置任何加载程序来处理此文件。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！