React - Module parse failed: You may need an appropriate loader to handle this file type.

[westdavidr]

I've been banging my head against the wall all day trying to figure this one out.

ERROR in ./app/assets/frontend/main.jsx
Module parse failed: /Users/david/work/sd/sd-web/app/assets/frontend/main.jsx Line 4: Unexpected token <
You may need an appropriate loader to handle this file type.
|   render() {
|     return (
|       <h1>Hello, World</h1>
|     );
|   }

Here's my relevant package.json:

"devDependencies": {
  "babel-core": "^6.2.1",
  "babel-loader": "^6.2.0",
  "babel-preset-es2015": "^6.1.18",
  "babel-preset-react": "^6.1.18",
  "webpack": "^1.12.9"
}

and web pack.config.js:

module.exports = {
  entry: './app/assets/frontend/main.jsx',
  output: {
    path: __dirname + '/app/assets/javascripts',
    filename: 'bundle.js',
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          loader: 'babel',
          exclude: /node_modules/,
          query: {
            cacheDirectory: true,
            presets: ['react', 'es2015']
          }
        }
      ]
    }
  }
}

and then running webpack from the command line.

Am I missing something obvious here?

[westdavidr]

I should add that if I run:

babel app/assets/frontend/main.jsx --presets es2015,react

from the command line, it parses correctly, which led me to believe it was an issue with babel-loader and/or webpack.

[epicallan]

i am having a similar issue with web pack and babel

[stevenross]

@westdavidr Your resolve and module properties are incorrectly enclosed in the output property. Try this:

module.exports = {
  entry: './app/assets/frontend/main.jsx',
  output: {
    path: __dirname + '/app/assets/javascripts',
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          cacheDirectory: true,
          presets: ['react', 'es2015']
        }
      }
    ]
  }
}

[westdavidr]

@stevenross You are correct. I'm not sure if I should bang my head harder for such a simple mistake, or thank you for the answer. Haha.

Thanks!

[aseem2625]

This should help for those who're still looking for solution:

My webpack.config.js file with working hot reloading

require('webpack');

module.exports = {
    context: __dirname + '/src',
    entry: {
        javascript: "./app.js",
        html: "./index.html"
    },
    output: {
        filename: 'app.js',
        path: __dirname + '/dist'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['react-hot', 'babel-loader?presets[]=react,presets[]=es2015'],
                //loaders: ["react-hot", 'babel-loader'],
                //query: {
                //    presets : ['es2015', 'react']
                //}
            },
            {
                test: /\.html$/,
                loader: "file?name=[name].[ext]"
            }
        ]
    }
};

[varunkot]

Hi

I am start learning react and i am facing similar type of issue.

[varunkot]

web.config.js file

module.exports = {
entry: [
'./src/App.js'
],
output: {
path: __dirname,
filename: 'app-min.js'
},
resolve:{
extensions: ['','.js','.jsx']
},
module: {
loader: [
{
test: /.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['react','es2015']
}
}
]
}
}
App.js

import React from 'react';
class App extends React.Component {
render(){
return (

Contact list

)
}
}

error in console :
app-min.js:47 Uncaught Error: Cannot find module "./src/App.js"

[aseem2625]

Hey @varunkot
To indent/organize your comment well for code snippets try putting your code inside

[zeexan-dev]

I am also facing same issue today.

webpack.config.js

module.exports = {
  entry: "./public/main.js",
  output: {
    path: __dirname + "/public",
    filename: "/bundle.js"
  },
  module: {
    loader: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets : ['es2015', 'react']
        }
    }]
  },
  watch: true
}

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

App.js

import React from 'react';

class App extends React.Component {
  render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
    }
}

export default App;

index.ejs within views folder

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Express React Redux</title>
    <link rel="stylesheet" href="../css/mystyles.css">
  </head>
  <body>

    <h1>Index Page</h1>
    <div id="app">

    </div>
    <script type="text/javascript" src="../bundle.js">

  </body>
</html>

Error Window

package.json

{
  "name": "express_react_redux",
  "version": "1.0.0",
  "description": "simple react redux expressjs app",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.5.2",
    "babel-cli": "^6.22.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "ejs": "^2.5.5",
    "express": "^4.14.0",
    "pug": "^2.0.0-beta7",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.2",
    "redux": "^3.6.0",
    "webpack": "^1.14.0"
  }
}

[mpazitny]

In webpack.config.js, you miss s in module: { loaderS. At least this was my issue with Webpack 2.

[stalakokkula]

I have the same problem
My webpack.config.js looks like below

'use strict';
var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './main.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
};

here is my package.json file

{
  "name": "samplereact",
  "version": "1.0.0",
  "description": "test project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Sreedhar Talakokkula",
  "license": "ISC",
  "dependencies": {
    "babel-polyfill": "6.23.0",
    "babel-runtime": "6.23.0",
    "react": "0.14.7",
    "react-dom": "0.14.7"
  },
  "devDependencies": {
    "babel-core": "6.4.5",
    "babel-loader": "^6.3.2",
    "babel-plugin-transform-runtime": "6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "webpack": "1.12.12"
  }
}

My main.js file

import Hello from './Hello.JSX';
import World from './World.JSX';

i get the following error

webpack-dev-server --progress --colors
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from C:\Learning\Projects\React
loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Hash: 6d152ff83dc0a532b2cd
Version: webpack 2.2.1
Time: 15299ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.47 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 826 bytes [entry] [rendered]
    [0] ./Hello.JSX 273 bytes {0} [built] [failed] [1 error]
    [1] ./World.JSX 273 bytes {0} [built] [failed] [1 error]
    [2] ./main.js 280 bytes {0} [built]

ERROR in ./Hello.JSX
Module parse failed: C:\Learning\Projects\React\Hello.JSX Unexpected token (6:9)
You may need an appropriate loader to handle this file type.
| class Hello extends React.Component {
|       render(){
|               return <h1>Hello</h1>
|       }
| }
 @ ./main.js 3:13-35

ERROR in ./World.JSX
Module parse failed: C:\Learning\Projects\React\World.JSX Unexpected token (6:9)
You may need an appropriate loader to handle this file type.
| class World extends React.Component {
|       render(){
|               return <h1>World</h1>
|       }
| }

[loganfsmyth]

@stalakokkula Your test regex is for lower-case .jsx but your files are .JSX it looks like.

[pbarrientos]

Hi, @stalakokkula, I got the same error and still not sure about the reason. I'm on node v7.7.2

Version: webpack 2.2.1
Time: 64ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.27 kB       0  [emitted]  main
   [0] ../src/client/app/index.jsx 289 bytes {0} [built] [failed] [1 error]

ERROR in ../src/client/app/index.jsx
Module parse failed: /RU/src/client/app/index.jsx Unexpected token (6:15)
You may need an appropriate loader to handle this file type.
| class App extends React.Component {
|     render() {
|         return <p>Hello World</p>;
|     }
| }

My index.jsx

import React from 'react';
import { render } from 'react-dom';

class App extends React.Component {
    render() {
        return <p>Hello World</p>;
    }
}

render(<App/>, document.getElementById('app'));

My webpack-config.js

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, './../src/client/public');
var APP_DIR = path.resolve(__dirname, './../src/client/app');

var config = {
    entry: APP_DIR + '/index.jsx',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$ /,
                include: APP_DIR,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

module.exports = config;

[loganfsmyth]

Your test regex is broken: /\.jsx?$ / has an extra space at the end.

[pbarrientos]

Oh!
Thanks, @loganfsmyth!
I corrected the extra space and part of the error is gone :)

Version: webpack 2.2.1
Time: 409ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.86 kB       0  [emitted]  main
   [0] ../src/client/app/index.jsx 818 bytes {0} [built] [failed] [1 error]

ERROR in ../src/client/app/index.jsx
Module build failed: SyntaxError: Unexpected token (6:15)

  4 | class App extends React.Component {
  5 |     render() {
> 6 |         return <p>Hello World</p>;
    |                ^
  7 |     }
  8 | }
  9 |

[loganfsmyth]

If you post a repository that reproduces the issue we can take a look, but nothing jumps out at me that would be wrong.

[rubyonrails3]

I had same issue today while I was experimenting with Redux tutorial from its site. I was using my custom directory structure.

functional-programming/
functional-programming/src/
functional-programming/components/
functional-programming/containers/

my index file was in

functional-programming/src/index.js

and that file was referring components

so I got error message that I need appropriate loader

then I've moved my components and containers folders into /src folder and everything begin to work okay for me.

P.S: I was using create-react-app

[nidaibani21]

I am just starting out with react and have been facing similar issue

ERROR in ./dev/index.jsx
Module parse failed: /Users/imran/Desktop/MyTotallyAwesomeApp/dev/index.jsx Unexpected token (7:6)
You may need an appropriate loader to handle this file type.
| render: function() {
| return (
|

Hello, {this.props.greetTarget}!

| );
| }

package.json:

{
"name": "mytotallyawesomeapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"webpack": "^2.3.2"
},
"babel": {
"presets": [
"es2015",
"react"
]
}
}

web pack.config.js:

var webpack = require("webpack");
var path = require("path");

var DEV = path.resolve(__dirname, "dev");
var OUTPUT = path.resolve(__dirname, "output");

var config = {
entry: DEV + "/index.jsx",
output: {
path: OUTPUT,
filename: "myCode.js"
}
};
module: {
loaders: [{
include: DEV,
loader: "babel-loader",
}]
}

module.exports = config;

where is the issue here?

[pbarrientos]

Hi again!
@loganfsmyth Sorry for the delay, here is a repo with an example that reproduces the error.
https://github.com/pbarrientos/new-react

I'm using node v7.8.0 and npm 4.2.0
After installing the packages I run:
./node_modules/.bin/webpack -d

This is what I get (now on webpack 2.3.2 same error):
Module build failed: SyntaxError: Unexpected token (6:15)

Thanks in advance.

[Couto]

@pbarrientos I might be wrong, but I think the problem is not with webpack nor babel-loader, but with babel itself due to the way babel does lookup behaviour.

See this for more information https://babeljs.io/docs/usage/babelrc/#lookup-behavior

I could be wrong though.

[pbarrientos]

It seems you are right, @Couto
I changed the structure of the project and the error is gone.
I pushed these changes on the same repo if anyone wanna have a look, but I think the error was also reproducible when having the babel config in webpack.config.js instead of the previously "misplaced" .babelrc

Thank you all.

[ujjwalvaish]

I am facing the same issue, here's my webpack.config.js

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, './app/javascripts');

var config = {
  entry: APP_DIR + '/app1.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  }
};

 module : {
    loaders: [
      { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  }

module.exports = config; 

Here's my babelrc:

{ "presets" : ["env", "react"] }

This is the error that I'm getting:

$

./node_modules/.bin/webpack -d
Hash: 32205b71bab9f390005b
Version: webpack 2.2.1
Time: 82ms
Asset Size Chunks Chunk Names
bundle.js 3.31 kB 0 [emitted] main
[0] ./app/javascripts/app1.jsx 313 bytes {0} [built] [failed] [1 error]

ERROR in ./app/javascripts/app1.jsx
Module parse failed: C:\Users\ujjwa\Desktop\app\javascripts\app1.jsx Unexpected token (5:11)
You may need an appropriate loader to handle this file type.
| class App extends React.Component {
...

[loganfsmyth]

The error is line 5 column 11, what is your code on that line?

[ujjwalvaish]

This is the line:

return <p..>Hello World</p..>; (I've put the .. to escape the formatting.)

[loganfsmyth]

And your .babelrc is in C:\Users\ujjwa\Desktop\app\.babelrc? You should check to make sure you don't have any other .babelrc files that might be confusing things.

[ujjwalvaish]

No .babelrc is on the Desktop i.e C:\Users\ujjwa\Desktop.babelrc (I'm using Desktop as an alias). And now I tried placing it in app folder, but that did not work as well.
Here's my folder structure-

[loganfsmyth]

@ujjwalvaish Alright, I'd recommend you join our support channel on https://slack.babeljs.io/ so we can chat. There's too much noise on this issue as it is.

[danielrob]

Although this issue is closed, it is easily found via google, so adding my solution in case it helps.

For me babel was configured in package.json and the env.production.only key was too restrictive after a refactor.

Updating to e.g.

  "babel": {
     "presets": [ ... ]
    "env": {
      "production": {
        "only": [
          "app1",
          "app2",
          "common"
        ],
...

Solved my problem. This may apply to you even if your babel options are configured elsewhere.

[MadRiver44]

I'm stuck on this same error and I need fresh eyes for help.... I'm confused on the "appropriate loader"
This is the error

ERROR in ./src/index.js
Module parse failed: Unexpected token (6:16)
You may need an appropriate loader to handle this file type.

import App from './Components/App'
ReactDOM.render(<App />, document.getElementById('root'))

@ multi (webpack)-dev-server/client?http://localhost:8080 ./src

This is my src/index.js

import React from 'react'
import ReactDOM from 'react-dom'

import App from './Components/App'
ReactDOM.render(<App />, document.getElementById('root'))

webpack.dev.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build'),
    publicPath: '/',
  },
  module: {
    rules: [
      { test: /\.(js)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        include: [path.resolve(__dirname, "src")]
      }
    ],
  },
  devServer: {
    historyApiFallback: true,
    inline: true,
    hot: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),new webpack.HotModuleReplacementPlugin()
    ],
}

.babelrc

{
  "presets": ["env", "react"],
  "env": {
    "development": {
      "plugins": [["react-transform",{
      "transforms": [{
        "transform": "react-transform-hmr",
        "imports": ["react"],
        "locals": ["module"]
      }]
    }]]
    }
  }
}

and my package.json

{
  "name": "webpack-starter-kit",
  "version": "1.0.0",
  "description": "starter files for basic development and production using React, Babel, Webpack",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --progress --mode=development",
    "build": "webpack --mode=production"
  },
  "author": "Kevin Turney",
  "license": "ISC",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.2.2"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.0.7",
    "postcss-loader": "^2.1.2",
    "react-transform-hmr": "^1.0.4",
    "style-loader": "^0.20.3",
    "uglifyjs-webpack-plugin": "^1.2.4",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.1"
  }
}

[MadRiver44]

[ciloi]

@MadRiver44 i met the same problem,have you solved it,please?

webpack.config

const path = require('path')
const webpack = require('webpack')

module.exports = {
  devtool: 'eval-source-map',
  entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:8080',
    path.resolve("src")
  ],
  mode: 'development',
  output: {
    path: path.join(__dirname, '../vendor'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: __dirname + '../src'
      },
      {
        test: /\.(scss|css)$/,
        loaders: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ],
        include: [path.resolve('src')]
      }
    ]
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    historyApiFallback: true,
    inline: true,
    compress: true,
    port: 8080,
    host: '127.0.0.1',
    progress: true
  }

}

.babelrc

{
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ],
  "plugins": [
    "transform-react-jsx"
  ]
}

packge.json

{
  "name": "react-m-testself",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "react": "^16.3.2",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "html-loader": "^0.5.5",
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  },
  "scripts": {
    "dev": "npm run build && webpack-dev-server  --mode development --open ",
    "build": "webpack --config ./build/webpack.base.conf.js --mode=development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

index.js

import React from 'react';
import ReactDom from 'react-dom';
import Hello from './component';

ReactDom.render(<Hello />, document.getElementById('app'));

[MadRiver44]

@ciloi I temporarily solved this by rolling back to an earlier version of webpack dev server. I put my project down for a few days and I am now getting back to it. As of now I reworking my webpack, react setup to the latest version, webpack 4.8 and dev-server 3.11. The problem seems to be resolved but now I have a .scss loader issue. Look at my repo, webpack starter kit to compare.

[ciloi]

@ MadRiver44thanks anyway

[anasalpure]

webpack.config.js
presets: ["env", "react"] or presets: ["es2015", "react"]

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },



  module: {

    rules: [
      {
        test: /\.jsx?$/,
        loader:'babel-loader',
        exclude: /node_modules/,
        query: {
          cacheDirectory: true,
          presets: ["env", "react"]
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

[Sakkeer]

I have the following error. I am struggling to solve this for past two days. Can anyone solve my issue.

[Sababa123]

I am getting this error while configuring webpack in reactJS.

[Sababa123]

This is my webpack.config.js file

[alvinypyim]

Thanks to my mate @seanchambo 🙇 we finally fixed a similar issue that we were facing with the same error message.

It turns out that it is related to the project path.

The issue occurs when we put the project in a path like this:

/codebuild/output/src705850320/src/github.com/ailytic/awesome-app-config/src

And the issue disappears when the project path is a simpler one like this:

/host

[Eduardoveras]

For those that still have this issue and want a temporary workaround, remove css imports from from any js file and move it to a sass file

[softmarshmallow]

In my case, this happens when using Lerna & Yarn workspaces with multiple CRA Apps.

[vinayakshenoy91]

Firstly make sure it picks the right config file: "build": "./node_modules/.bin/webpack --mode production --config ./webpack/webpack.config.js".

Then make sure you use the right presets in .babelrc
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }

Then make sure you have the right loader:
{ test: /\.(js|jsx)?$/, exclude: /node_modules/, use: ["babel-loader"], }

This is for webpack version:

"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"

[RossHathaway]

I got this error when I listed my presets in the babelrc file and the webpack config. Once I commented them out of the webpack config, the error was gone.

[OFFLlNE]

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './docs',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.(le|c)ss$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.(woff|woff2|eot|ttf|png|jpg|gif|svg|mp4)/,
        loader: 'file-loader',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './docs/index.html',
    }),
  ],
  devServer: { historyApiFallback: true },
};

Can somebody spot anything I am doing wrong here 🙈
I have tried changing loader to loaders but still the same error

[kilgarenone]

My mistake was I didn't add the babel plugin that transforms jsx.

So for React, you would install the @babel/preset-react, then in your .babelrc:

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

For Preact, install @babel/plugin-transform-react-jsx, then in your .babelrc:

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "h"
      }
    ]
  ]
}

Hope that helps someone!

[Neeraj-swarnkar]

I am also facing the same problem, But I am not getting solution for this.I guess here I have seen people helping and guiding. Please help.

I am trying to use this react diff library (https://github.com/praneshr/react-diff-viewer) in my react project -.
npm i react-diff-viewer

Got added,

while building and using I am getting this error-

ERROR in ./compliance/app/compliance/~/react-diff-viewer/lib/styles.js
Module parse failed: /Users/nswarnka/Documents/Neeraj/Projects/mashup-project/mashup/ui-plugins/compliance/app/compliance/node_modules/react-diff-viewer/lib/styles.js Unexpected token (5:42)
You may need an appropriate loader to handle this file type.
| const emotion_1 = require("emotion");
| exports.default = (styleOverride) => {
| const { variables: overrideVariables, ...styles } = styleOverride;
| const variables = {
| ...{

.babelrc file -> In my babel i have "babel-preset-react", "babel-preset-stage-0" and "es2015" please check.

{
  "presets": [
    "babel-preset-react",
    ["es2015", { "modules": false }],
    "babel-preset-stage-0"
  ],
  "env": {
    "test": {
      "plugins": [
        "transform-es2015-modules-commonjs",
        "transform-decorators-legacy",
        "babel-plugin-react-html-attrs",
        "babel-plugin-transform-decorators-legacy",
        "babel-plugin-transform-class-properties",
        "@babel/plugin-transform-spread",
        "@babel/plugin-proposal-class-properties",
        "@babel/preset-env",
        "@babel/preset-react"
      ]
    }
  }
}

package.json file ->

{
  "name": "compliance-ui-plugin",
  "version": "1.0.0",
  "scripts": {
    "build": "dpm build"
  },
  "author": "nsw",
  "license": "ISC",
  "devDependencies": {},
  "description": "Compliance UI Plugin",
  "dependencies": {
    "emotion": "^10.0.14",
    "react-diff-viewer": "^2.0.1"
  }
}

I got to know that I have to use Webpack loader to make it work. Could you please help me with this ? Thanks.

Asked the query in stack overflow as well ->
https://stackoverflow.com/questions/57653076/you-may-need-an-appropriate-loader-to-handle-this-file-type-while-using-external

[programthis]

Hi there,

I'm also facing similar problems to OP but the solutions listed here didn't help me either.

The errors look like the below:

Module not found: Error: Can't resolve 'rxjs-compat/add/operator/catch' in '/Users/kylebachan/Documents/Account/node_modules/rxjs/add/operator'
 @ ../node_modules/rxjs/add/operator/catch.js 3:0-41
 @ ./redux/epics/index.js
 @ ./redux/store.js
 @ ./main-embeddable.js

webpack.config.js:

const webpack = require('webpack');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const fromWebpackModule = (moduleName, filename, outputFilename = filename) => { return { from: path.join(__dirname, 'node_modules', moduleName, filename),
    to: path.join(__dirname, 'public/accountassets/js', outputFilename) } }
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ClosureCompilerPlugin = require('webpack-closure-compiler');
const CompressionPlugin = require('compression-webpack-plugin');
const packageJson = require('./package.json');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');

module.exports = {
    context: path.join(__dirname, 'js'),
    entry: {
        account: path.join(__dirname, './js/main.js'),
        'account.light': path.join(__dirname, './js/main-embeddable.js'),
        styles: path.join(__dirname, './js/styles/application.scss'),
        'bookmark.styles': path.join(__dirname, './js/styles/bookmark.scss'),
        bookmark: path.join(__dirname, './js/bookmark.js')
    },
    output: {
        path: path.join(__dirname, 'public', 'accountassets', 'js'),
        filename: '[name].js'
    },
    resolve: {
        modules: [path.resolve(__dirname, 'js'), 'node_modules', 'bower_components'],
        descriptionFiles: ['package.json', 'bower.json'],
        extensions: ['.js', '.jsx', '.json', '.scss'],
    },
    module: {
        rules: [
            {
                resource: {
                    test: /\.jsx?$/,
                    exclude: /node_modules/,
                    include: [
                        path.resolve(__dirname, 'js')
                    ]
                },
                use: [{
                    loader: 'babel-loader',
                    options: packageJson.babel
                }]
            },
            {
                test: /\.css$/,
                oneOf: [
                    {
                        exclude: /node_modules\/react-dates/,
                        use: [{
                            loader: 'style-loader',
                            options: {
                                sourceMap: true,
                            }
                        }, {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true,
                                modules: true,
                                importLoaders: 1,
                                modules: {
                                    localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
                                }
                            }
                        }]
                    },
                    {
                        use: [{
                            loader: 'style-loader',
                            options: {
                                sourceMap: true,
                            }
                        }, {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true,
                            }
                        }]
                    }
                ]
            },
            {
                test: /\.scss$/,
                oneOf: [
                    {
                        exclude: [/node_modules/, /js\/styles/, /bookmark\.scss/],
                        use: ExtractTextPlugin.extract({
                            fallback: 'style-loader',
                            use: [{
                                loader: 'css-loader',
                                options: {
                                    sourceMap: true,
                                    modules: true,
                                    importLoaders: 1,
                                    modules: {
                                        localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
                                    }
                                }
                            }, {
                                loader: 'sass-loader',
                                options: {
                                    outputStyle: 'compressed',
                                    sourceMap: true,
                                }
                            }]
                        })
                    }, {
                        exclude: [/node_modules\/react-dates/, /bookmark\.scss/],
                        use: ExtractTextPlugin.extract({
                            fallback: 'style-loader',
                            use: [{
                                loader: 'css-loader',
                                options: {
                                    sourceMap: true,
                                    modules: true,
                                    importLoaders: 1,
                                    modules: {
                                        localIdentName: '[local]'
                                    }
                                }
                            }, {
                                loader: 'namespace-css-module-loader',
                                query: {
                                    id: 'ac',
                                }
                            }, {
                                loader: 'sass-loader',
                                options: {
                                    outputStyle: 'compressed',
                                    sourceMap: true,
                                    includePaths: [path.resolve(__dirname, './node_modules/compass-mixins/lib')],
                                }
                            }]
                        })
                    }, {
                        exclude: [/node_modules\/react-dates/],
                        use: ExtractTextPlugin.extract({
                            fallback: 'style-loader',
                            use: [{
                                loader: 'css-loader',
                                options: {
                                    sourceMap: true,
                                    modules: true,
                                    importLoaders: 1,
                                    modules: {
                                        localIdentName: '[local]'
                                    }
                                }
                            }, {
                                loader: 'sass-loader',
                                options: {
                                    outputStyle: 'compressed',
                                    sourceMap: true,
                                    includePaths: [path.resolve(__dirname, './node_modules/compass-mixins/lib')],
                                }
                            }]
                        })
                    }
                ],
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'file',
                    options: {
                        name: '[hash].[ext]'
                    }
                }]
            },
            {
                test: /\.(woff|woff2)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: '[hash].[ext]',
                        prefix: 'font/',
                        limit: 5000
                    }
                }]
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: '[hash].[ext]',
                        prefix: 'font/',
                        mimetype: 'application/octet-stream',
                        limit: 10000
                    }
                }]
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: '[hash].[ext]',
                        prefix: 'images/',
                        mimetype: 'image/svg+xml',
                        limit: 10000
                    }
                }]
            },
            {
                test: /\.gif/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: '[hash].[ext]',
                        prefix: 'images/',
                        mimetype: 'image/gif',
                        limit: 10000
                    }
                }]
            },
            {
                test: /\.jpg/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: '[hash].[ext]',
                        prefix: 'images/',
                        mimetype: 'image/jpg',
                        limit: 10000
                    }
                }]
            },
            {
                test: /\.png/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: '[hash].[ext]',
                        prefix: 'images/',
                        mimetype: 'image/png',
                        limit: 10000
                    }
                }]
            }
        ]
    },
    devServer: {
        contentBase: './public/accountassets/js',
        noInfo: true, //  --no-info option
        hot: true,
        inline: true
    },
    devtool: 'source-map',
    plugins: [
        // Hack: https://github.com/webpack/webpack/issues/87 and https://github.com/moment/moment/issues/2517
        new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            }
        }),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new ExtractTextPlugin({
            filename: '[name].css',
            allChunks: true,
        }),
        new CopyWebpackPlugin([
            fromWebpackModule('es5-shim', 'es5-shim.min.js'),
            fromWebpackModule('es5-shim', 'es5-shim.map'),
            fromWebpackModule('es5-shim', 'es5-sham.min.js'),
            fromWebpackModule('es5-shim', 'es5-sham.map'),
        ]),
        new ClosureCompilerPlugin({
            compiler: {
                language_in: 'ECMASCRIPT6',
                language_out: 'ECMASCRIPT3',
                compilation_level: 'SIMPLE',
                rewrite_polyfills: false,
                create_source_map: true
            },
            concurrency: 3,
        }),
        new CompressionPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.(js|html)$/,
            threshold: 10240,
            minRatio: 0.8
        }),
    ],
};

package.json

  "private": true,
  "name": "TPL-Account",
  "version": "0.0.1",
  "description": "",
  "main": "js/script.js",
  "dependencies": {
    "big.js": "5.2.2",
    "clipboard": "^2.0.4",
    "compass-mixins": "^0.12.10",
    "cookies-js": "1.2.3",
    "cuid": "2.1.6",
    "fast-memoize": "2.5.1",
    "focus-trap-react": "^6.0.0",
    "friendly-url": "^1.0.3",
    "history": "4.9.0",
    "immutable": "^4.0.0-rc.2",
    "lodash": "^4.17.15",
    "moment": "2.24.0",
    "moment-timezone": "0.5.26",
    "namespace-css-module-loader": "^0.5.0",
    "normalizr": "3.4.1",
    "prop-types": "^15.7.2",
    "react": "16.9.0",
    "react-addons-pure-render-mixin": "15.6.2",
    "react-addons-shallow-compare": "15.6.2",
    "react-barcode": "^1.3.4",
    "react-bootstrap": "^0.32.4",
    "react-dates": "^20.2.5",
    "react-dom": "16.9.0",
    "react-ga": "2.6.0",
    "react-markdown": "^4.1.0",
    "react-redux": "7.1.0",
    "react-rte": "0.16.1",
    "react-sortable-hoc": "^1.9.1",
    "react-sticky": "6.0.3",
    "react-transition-group": "4.x",
    "react-visibility-sensor": "5.1.1",
    "redux": "4.0.4",
    "redux-immutablejs": "0.0.8",
    "redux-observable": "1.1.0",
    "reselect": "4.0.0",
    "rollbar": "^2.11.0",
    "rxjs": "6.5.2",
    "transition-to-from-auto": "^0.5.2",
    "wicg-focus-ring": "^3.0.2",
    "wicg-inert": "github:LouisStAmour/inert#2c22c3db1223f92ded6c19a513eaee7c9d08e9db"
  },
  "resolution": {
    "react": "16.9.0",
    "react-dom": "16.9.0",
    "create-react-class": "15.6.1"
  },
  "scripts": {
    "test": "NODE_ENV=test jest || true",
    "testc": "NODE_ENV=test jest --coverage || true",
    "testa": "node js/__ava__/run-me.js || true",
    "testr": "node_modules/.bin/ava js/__ava__/tests/redux/ -v || true",
    "testrc": "node_modules/.bin/nyc node_modules/.bin/ava js/__ava__/tests/redux/ -v || true",
    "build": "NODE_ENV=production node_modules/.bin/webpack -p --config webpack.config.js --profile",
    "watch": "NODE_ENV=production node_modules/.bin/webpack -p --config webpack.config.js --progress --profile --color --watch",
    "dev-build": "node_modules/.bin/webpack --config webpack.config.js --progress --profile --color",
    "dev": "node_modules/.bin/webpack-dev-server --progress --profile --color --hot",
    "lint": "NODE_ENV=development node_modules/.bin/eslint js --ext 'js,jsx' --ignore-pattern '*.min.js' || true",
    "csslint": "node_modules/.bin/stylelint 'public/accountassets/stylesheets/sass/**/*.scss' 'public/accountassets/stylesheets/sass/*.scss' 'js/**/*.scss' 'js/*.scss' || true",
    "report": "node_modules/.bin/nyc report --reporter=html"
  },
  "license": "Copyright",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "acorn": "7.0.0",
    "ava": "github:avajs/ava",
    "babel-eslint": "10.0.2",
    "babel-loader": "8.0.6",
    "babel-plugin-add-module-exports": "^1.0.2",
    "babel-polyfill": "6.26.0",
    "babel-register": "6.26.0",
    "bootstrap-datepicker": "1.9.0",
    "classnames": "2.2.6",
    "compression-webpack-plugin": "3.0.0",
    "copy-webpack-plugin": "5.0.4",
    "css-loader": "3.2.0",
    "deep-equal": "1.0.1",
    "deep-freeze-node": "1.1.3",
    "director": "1.2.8",
    "enzyme": "3.10.0",
    "es5-shim": "4.5.13",
    "eslint": "6.1.0",
    "eslint-plugin-babel": "5.3.0",
    "eslint-plugin-react": "7.14.3",
    "eventie": "1.0.6",
    "expose-loader": "0.7.5",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^4.2.0",
    "flux-standard-action": "2.1.1",
    "get-port": "5.0.0",
    "glob": "7.1.4",
    "imagesloaded": "tpl-eservices/imagesloaded",
    "jasmine-enzyme": "7.1.0",
    "jest-cli": "24.8.0",
    "js-yaml": "^3.13.1",
    "jscpd": "2.0.15",
    "json-loader": "0.5.7",
    "jsx-ast-utils": "2.2.1",
    "keymirror": "0.1.1",
    "node-sass": "^4.12.0",
    "nyc": "14.1.1",
    "promise": "8.0.3",
    "redux-mock-store": "1.5.3",
    "sass-loader": "^7.2.0",
    "selenium-webdriver": "3.6.0",
    "style-loader": "1.0.0",
    "stylelint": "^10.1.0",
    "stylelint-config-sass-guidelines": "^6.0.0",
    "stylelint-config-standard": "18.3.0",
    "stylelint-scss": "3.9.3",
    "testdouble": "3.12.3",
    "union": "0.5.0",
    "url-loader": "^2.1.0",
    "webpack": "4.39.2",
    "webpack-cli": "^3.3.6",
    "webpack-closure-compiler": "2.1.6",
    "wolfy87-eventemitter": "5.2.6"
  },
  "babel": {
    "plugins": [
      "@babel/transform-runtime",
      "@babel/plugin-proposal-class-properties",
      "add-module-exports",
      "@babel/plugin-proposal-object-rest-spread",
      "@babel/plugin-syntax-jsx",
      "@babel/plugin-transform-react-jsx"
    ],
    "presets": [
      "@babel/preset-env",
      "@babel/react",
      "@babel/preset-flow"
    ]
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "node"
    ],
    "coveragePathIgnorePatterns": [
      "/vendor/",
      "/node_modules/"
    ],
    "automock": false,
    "mocksPattern": "(?:[\\/]js[\\/]|^)__mocks__[\\/]",
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/core-js/",
      "<rootDir>/node_modules/react/",
      "<rootDir>/node_modules/react-dom/",
      "<rootDir>/node_modules/react-test-renderer/",
      "<rootDir>/node_modules/react-addons-test-utils/",
      "<rootDir>/node_modules/react-bootstrap/",
      "<rootDir>/node_modules/backbone/",
      "<rootDir>/node_modules/bootstrap-datepicker/",
      "<rootDir>/node_modules/enzyme/",
      "<rootDir>/node_modules/jasmine-enzyme/"
    ]
  },
  "ava": {
    "files": [
      "test.js"
    ],
    "source": [
      "js/**/*.{js,jsx}"
    ],
    "require": [
      "babel-register"
    ],
    "babel": "inherit",
    "concurrency": 3,
    "failFast": true,
    "tap": false
  },
  "nyc": {
    "extension": [
      ".jsx"
    ],
    "exclude": [
      "js/__ava__/**",
      "js/__data__/**",
      "js/__mocks__/**",
      "**/node_modules/**"
    ]
  }
}

[ya332]

Solutions listed here didn't help. I did the following and it worked.
.babelrc -->
{ "presets": [ "react", "env", "stage-0" ] }
package.json -->

{
	"name": "react-made-by",
	"version": "0.2.0",
	"description": "React component to create a 'made by <name>' tag",
	"author": {
		"name": "Yigit Alparslan",
		"email": "[email protected]"
	},
	"license": "MIT",
	"engineStrict": true,
	"engines": {
		"node": ">=12.9.1"
	},
	"repository": {
		"type": "git",
		"url": "https://github.com/ya332/react-made-by.git"
	},
	"bugs": {
		"url": "https://github.com/ya332/react-made-by/issues"
	},
	"keywords": [
		"React",
		"Developer",
		"Author",
		"Tag",
		"Created",
		"By",
		"Made"
	],
	"homepage": "https://github.com/ya332/react-made-by#readme",
	"main": "build/index.js",
	"unpkg": "build/index.js",
	"publishConfig": {
		"access": "public"
	},
	"peerDependencies": {
		"react": "^16.8.0",
		"react-dom": "^16.8.0",
		"webpack": "^2.6.1"
	},
	"devDependencies": {
		"babel-cli": "^6.24.1",
		"babel-core": "^6.24.1",
		"babel-loader": "^7.0.0",
		"babel-plugin-transform-object-rest-spread": "^6.23.0",
		"babel-plugin-transform-react-jsx": "^6.24.1",
		"babel-preset-env": "^1.6.1",
		"babel-preset-react": "^6.16.0",
		"babel-preset-stage-0": "^6.24.1",
		"css-loader": "^3.4.1",
		"extract-text-webpack-plugin": "^3.0.2",
		"file-loader": "^5.0.2",
		"node-sass": "^4.13.0",
		"path": "^0.12.7",
		"prop-types": "^15.6.0",
		"react": "^16.8.0",
		"react-dom": "^16.8.0",
		"webpack": "^4.5.0",
		"webpack-cli": "^3.3.10"
	},
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"start": "webpack --watch",
		"build": "webpack --config webpack.config.js --mode production"
	},
	"eslintConfig": {
		"extends": "react-app"
	},
	"browserslist": {
		"production": [
			">0.2%",
			"not dead",
			"not op_mini all"
		],
		"development": [
			"last 1 chrome version",
			"last 1 firefox version",
			"last 1 safari version"
		]
	}
}

Doing npm run build produces the following: -->

$ npm run build

> [email protected] build C:\Users\I508553\Desktop\Misc\Dev\react-made-by
> webpack --config webpack.config.js --mode production

Hash: bbb4ec8ddc3f354618ed
Version: webpack 4.41.5
Time: 1402ms
Built at: 01/04/2020 10:08:50 PM
   Asset      Size  Chunks             Chunk Names
index.js  2.77 KiB       0  [emitted]  main
Entrypoint main = index.js
[0] ./src/index.js 3.49 KiB {0} [built]
[1] external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react","umd":"react"} 42 bytes {0} [built]

The files are here.
P.S: I am excluding the react and react-dom from my bundle because I don't want to create version inconsistency when users do 'npm install --save ' on my package. Hope this helps.

[ZooDoo4U]

In case this might help, i'll admit him a noob just getting into React. Anyway, checked and rechecked everything, couldn't find one problem, the only strange thing i did was change my to , mainly as i'm working through each rev of the code the instructor wipes, wanted what i worked on for reference later. Was working fine for the last few hours then bingo "Loader to handle not found..." For me the fix was easy, i closed everything and simply did:

npm run build

So question what if you only do "npm start", had tried that a number of time then thought lets build it... No more errors :)

That was all that was needed and got me past the "No appropriate loader"...

Just in case my versions:
npm --version
6.14.4
node --version
v12.16.3
create-react-app --version
3.4.1

[ALIRAZA705]

I am trying to add datepicker in my project but i am geeting this error "You may need an appropriate loader to handle this file type," and i already added loader in my webpack.config.client.prod file ... here is my code of this webpack.config.client.prod file
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractCssChunks = require("extract-css-chunks-webpack-plugin");
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
var TerserPlugin = require('terser-webpack-plugin');
var CircularDependencyPlugin = require('circular-dependency-plugin');

var config = require('./../config');

var BASE_PATH = process.env.BASE_PATH || '/';

module.exports = {
devtool: 'inline-source-map',
mode: 'production',
node: { fs: 'empty' },
externals: [
{ './cptable': 'var cptable' },
{ './jszip': 'jszip' }
],
entry: {
app: ['react-hot-loader/patch', path.join(config.srcDir, 'index.js')]
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].chunk.js',
path: config.distDir,
publicPath: BASE_PATH
},
resolve: {
modules: [
'node_modules',
config.srcDir
]
},
plugins: [
new CircularDependencyPlugin({
exclude: /a.js|node_modules/,
failOnError: true,
allowAsyncCycles: false,
cwd: process.cwd(),
}),
new HtmlWebpackPlugin({
template: config.srcHtmlLayout,
inject: false
}),
new webpack.HashedModuleIdsPlugin(),
new ExtractCssChunks(),
new OptimizeCssAssetsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
'process.env.BASE_PATH': JSON.stringify(BASE_PATH),
})
],
optimization: {
minimizer: [new TerserPlugin()]
},
module: {
rules: [
{
test: /.js$/,
include: config.srcDir,
exclude: /node_modules/,
use: 'babel-loader',

        },
        // Modular Styles
        {
            test: /\.css$/,
            use: [
                ExtractCssChunks.loader,
                { 
                    loader: 'css-loader',
                    options: {
                        modules: true,
                        importLoaders: 1,
                    }
                },
                { loader: 'postcss-loader' }
            ],
            exclude: [path.resolve(config.srcDir, 'styles')],
            include: [config.srcDir]
        },
        {
            test: /\.scss$/,
            use: [
                ExtractCssChunks.loader,
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                        importLoaders: 1,
                    }
                },
                { loader: 'postcss-loader' },
                {
                    loader: 'sass-loader',
                    options: {
                        includePaths: config.scssIncludes
                    }
                }
            ],
            exclude: [path.resolve(config.srcDir, 'styles')],
            include: [config.srcDir]
        },
        // Global Styles
        {
            test: /\.css$/,
            use: [
                ExtractCssChunks.loader,
                { loader: 'css-loader' },
                { loader: 'postcss-loader' }
            ],
            include: [path.resolve(config.srcDir, 'styles')]
        },
        {
            test: /\.scss$/,
            use: [
                ExtractCssChunks.loader,
                { loader: 'css-loader' }, 
                { loader: 'postcss-loader' }, 
                {
                    loader: 'sass-loader',
                    options: {
                        includePaths: config.scssIncludes
                    }
                }
            ],
            include: [path.resolve(config.srcDir, 'styles')]
        },
        // Fonts
        {
            test: /\.(ttf|eot|woff|woff2)$/,
            loader: "file-loader",
            options: {
                name: "fonts/[name].[ext]",
            }
        },
        // Files
        {
            test: /\.(jpg|jpeg|png|gif|svg|ico)$/,
            loader: "file-loader",
            options: {
                name: "static/[name].[ext]",
            }
        }
    ]
},
devServer: {
    hot: false,
    contentBase: config.distDir,
    compress: true,
    historyApiFallback: {
        index: '/'
    },
    host: '0.0.0.0',
    port: 4100
}

}
can anyone help me how to fix tthis problem ?
i am getting this error