이 파일 형식을 처리하려면 적절한 로더가 필요할 수 있습니다. 현재 이 파일을 처리하도록 구성된 로더는 없습니다."

이 파일 형식을 처리하려면 적절한 로더가 필요할 수 있습니다. 현재 이 파일을 처리하도록 구성된 로더는 없습니다."

실을 사용하여 리액트 프로젝트에 웹 팩을 설정하고 있는데 다음 오류가 나타납니다.

./src/app.js 67:6 모듈 해석에 실패했습니다.예기치 않은 토큰(67:6) 이 파일 형식을 처리하기 위해 적절한 로더가 필요할 수 있습니다. 현재 이 파일을 처리하도록 구성된 로더는 없습니다.https://webpack.js.org/concepts#loaders ℹ 「wdm」을 참조해 주세요.컴파일하지 못했습니다.

webpack.config.syslog

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

패키지.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"
  }
}

불필요한 이스케이프 문자를 사용하고 있습니다.이것은 필수가 아닙니다.

교체하다 test: '/\.(js|jsx)$/', 와 함께 test: /\.js$|jsx/,잘 될 거야

저는 당신의 문제를 제 기계에 복제했고, 위의 수정으로 해결된 동일한 문제를 발견했습니다.

이게 도움이 되길 바래, 해피 코딩!!!

선택한 답변에 일부 세부 정보가 누락되었습니다.

그럴 것 같네요. test: /\.js|\.jsx$/

\: is an escape character이 경우에는.

|: is an Alternation / OR operand

$: is end of line

이것이 당신에게 도움이 되길 바랍니다.

출처 : https://www.rexegg.com/regex-quickstart.html

이 오류는 단순히 파일이 프로젝트의 상위 폴더(프로젝트 폴더 외부)에 배치되었기 때문에 발생했습니다.

파일을 적절한 폴더로 이동하면 파일이 수정되었습니다.

제 경우는, 이것을 설정해 두면, 다음과 같이 동작합니다.

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

파일 작업 중에 이 오류가 발생할 경우 웹 팩 구성 수정에 대해 걱정하기 전에 파일의 확장자가 .js 또는 .jsx인지 확인하십시오.Javascript 파일 중 하나에 확장자를 추가하는 것을 잊었을 때 이 오류가 발생했습니다.즉, my-file.js 대신 my-file이 있습니다.

아래에 언급된 코드를 웹 팩 파일에 넣습니다.

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();

node_folder가 있는 폴더와 동일한 폴더에 .babelrc 파일을 추가합니다.다음 내용은 다음과 같습니다.

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

언급URL : https://stackoverflow.com/questions/57924348/you-may-need-an-appropriate-loader-to-handle-this-file-type-currently-no-loader