CODEWITHSUNDEEP
cssreactjs
Abdalrahman
Abdalrahman

Reputation: 940

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

Upvotes: 83

Views: 469545

Answers (9)

Surabhi Pal
Surabhi Pal

Reputation: 1

just remove the single qoutes from test property.

test: /\.(js|jsx)$/

Upvotes: -1

Keith Banner
Keith Banner

Reputation: 836

I know this is not a direct answer to the original question, but this is one of the most likely places people will end up when they are having trouble with a loader.

In my case the file that it was complaining about was inside of the node_modules folder. I was consuming a typescript file directly.

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

The change I made was removing the exclude portion and adding onlyCompileBundledFiles to ts-loader. Other loaders may have something similar. But basically it will only process items included in the bundle regardless of if they are inside or outside of the node_modules folder.

Upvotes: 3

James Serengia
James Serengia

Reputation: 159

If you get this error while working on a file, before worrying about modifying webpack config, please check if the file leading to the error has an extension i.e .js or .jsx. I encountered this error when I forgot to add an extension on one of my Javascript files. i.e. instead of my-file.js, I had my-file

Upvotes: 3

Ramiro Godoy
Ramiro Godoy

Reputation: 77

In my case, I configure this and it works:

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

Upvotes: 3

fadly kayo
fadly kayo

Reputation: 680

The selected answer missing some details:

It should be 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

Upvotes: 21

shaher11
shaher11

Reputation: 140

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

Upvotes: 0

CPHPython
CPHPython

Reputation: 13709

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.

Upvotes: 2

Bhargav Choudhury
Bhargav Choudhury

Reputation: 1

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

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

Upvotes: -6

Darpan Rangari
Darpan Rangari

Reputation: 1570

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

Upvotes: 60

Related Questions