Question

[Solved] You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.”

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

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

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

Solution #1:

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

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!!!

Respondent: Darpan Rangari

Solution #2:

The selected answer missing some details:

It should be test: '/.(js|jsx)$/', replaced with test: /.js|.jsx$/

: is an escape character in this case for .

|: is an Alternation / OR operand

$: is end of line

Hopefully this is useful for you.

Source:
https://www.rexegg.com/regex-quickstart.html

Respondent: fadly kayo

Solution #3:

This error happened to me simply because the file was placed in the parent folder of the project (i.e. outside the project’s folder).

Moving the file to the appropriate folder fixed it.

Respondent: CPHPython

Solution #4:

Put the code mentioned below in webpack 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();
Respondent: shaher11

Solution #5:

add a .babelrc file to the same folder where your node_modules folder is, with the below content

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

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy