Babel-loader: 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

[engr-zeeshan]

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:UsersujjwaDesktopappjavascriptsapp1.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

[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:UsersujjwaDesktop.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.

[mrchief]

This does not solve the error for me. Here's my config:

    rules: [
      {
        test: /\.jsx?$/,
        exclude: [/node_modules/, /\.test\.jsx?/],
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['react', ['es2015', {'modules': false}], 'stage-0'],
            plugins: [
              'syntax-dynamic-import',
              'lodash',
              'add-module-exports',
              'transform-decorators-legacy',
              ['transform-class-properties', { 'spec': true }]
            ]
          }
        }]
      }

I get a warning first and then the module parse error. Using react 15.4 and babel-loader v7

[DISKONEKTeD]

I believe you're not suppose to use "use" for babel-loader, see here:

https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules

you want something like this instead:

    module: {
        rules: [
            {
                test:/\.js$/,
                include: SRC_DIR,
                loader: "babel-loader",
                options: {
                    presets: ['react', 'es2015', 'stage-2']
                }
            }

        ]
    }

[mrchief]

@DISKONEKTeD that is most likely a documentation bug. Either way, I tried use and got the same results.

[ThinkCats]

I get same error, because my webpack's entry config is error.

...
 entry: path.resolve(__dirname, 'app/main.js'),
...

My entry file name is main.js , but my component name is xxx.jsx .

I changed my entry file name to main.jsx, then everything is ok.

...
 entry: path.resolve(__dirname, 'app/main.jsx'),
...

If someone get the same error, this maybe is helpful.

My webpack.config.js:

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

var config = {
    entry: path.resolve(__dirname, 'app/main.jsx'),
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        loaders: [{
            test: /\.jsx$/,
            exclude: /node_modules/,
            loaders: ['babel-loader?presets[]=react,presets[]=es2015'],
        }]
    }
};

module.exports = config;

And my package version :

  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router": "^4.1.1",
    "zent": "^3.4.2"
  },
  "entry": {},
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-check-es2015-constants": "^6.22.0",
    "babel-plugin-transform-es2015-block-scoping": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "path": "^0.12.7",
    "style-loader": "^0.18.2",
    "webpack": "^3.2.0",
    "webpack-dev-server": "^2.5.1"
  }

[aseem2625]

@ThinkCats
Good for you. But I think, you don't need to do that necessarily to make it work.
You tried using test: /\.js$/, instead of test: /\.jsx$/, ?

And it's always great to mention webpack version, you're using for someone to use your solution or for someone to point out anything.

[MrRahulR]

I'm working on a react code and it showing the similar error,

package.json

{
  "name": "myappv1",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "build": "node ./bin/webpack"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "body-parser": "~1.17.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.3",
    "express": "~4.15.2",
    "jade": "~1.11.0",
    "morgan": "~1.8.1",
    "mysql": "^2.13.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router": "^4.1.2",
    "serve-favicon": "~2.4.2",
    "webpack": "^3.3.0"
  }
}

webpack.config.js

var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'public');
var APP_DIR = path.resolve(__dirname, 'app');
var config = {
    entry: './index.jsx',
    output: {
        path: './',
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
        },
    module: {
        loaders: [
        {
                        test: /\.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
             query: {
                presets: ['es2015',  'react']
            }
                }
          ]
    }
}
module.exports = config;

It display error as below.

[aseem2625]

@MrRahulR even though you could be new to Git, you can check other people's formatting of code above and google it put code on git! Disappointed! Personally, I'm passing your query.

[MrRahulR]

@aseem2625 Everyone has dropped their code snippets above, I saw package.json and webpack.config.js
I did same!

[aseem2625]

@MrRahulR Downvoted for not acknowledging your improper editing, secretly editing your post and writing anti to it! Now, I'm totally ignoring your query.

[MrRahulR]

@aseem2625 Okay, I've expected some help here though thanks for your help! :1st_place_medal: :)

[danez]

Come on be friendly here. If you want to fight go somewhere else.

@MrRahulR As you are using webpack 3 your config is outdated. Read this migration guide which should cover all the cases you have. https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules & https://webpack.js.org/guides/migrating/#what-are-options-
Or have a look at our README in the usage section to see proper working configs: https://github.com/babel/babel-loader/#usage

[MrRahulR]

okay @danez, pushing few things in code from the urls worked for me. Thanks.

[fitzgeraldsophie2]

I am facing the same issue.

webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');
var autoprefixer = require('autoprefixer');
var ss = require('./src/ss_routes');

module.exports = {
  entry: './src/index',
  output: {
    path: 'build',
    filename: 'bundle.js',
    libraryTarget: 'umd'
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        include: __dirname + '/src',
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
            'style-loader', // backup loader when not building .css file
            'css-loader!sass-loader' // loaders to preprocess CSS
        )
      },
      {
        test: /\.css/,
        loader: ExtractTextPlugin.extract(
          'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss'
        ),
        include: __dirname + '/src'
      },
      {
        test: /\.(jpg|png)/,
        loader: 'file-loader?name=assets/img-[hash:6].[ext]',
        include: __dirname + '/src'
      },
      {
        test: /\.(ico|otf|pdf)/,
        loader: 'file-loader?name=[name].[ext]',
        include: __dirname + '/src/'
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        include: __dirname + '/src/',
        loaders: [
          'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
          'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      }
    ],
  },
  postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ],
  plugins: [
    new ExtractTextPlugin("styles.css"),
    new StaticSiteGeneratorPlugin('main', ss.routes, ss)
  ]
};

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import ReactDOMServer from 'react-dom/server'
import { Router, RouterContext, match, browserHistory, createMemoryHistory } from 'react-router'
import Template from './Template'
import Routes from './routes'

/* Client render (optional) */
if (typeof document !== 'undefined') {
  const outlet = document.getElementById('outlet')
  ReactDOM.render(<Router history={browserHistory} routes={Routes} />, outlet)
}

/* Exported static site renderer */
export default (locals, callback) => {
  const history = createMemoryHistory()
  const location = history.createLocation(locals.path)

  match({
    routes: Routes,
    location: location
  }, function(error, redirectLocation, renderProps) {
    var html = ReactDOMServer.renderToStaticMarkup(
      <Template>
        <RouterContext {...renderProps} />
      </Template>
    );
    callback(null, html)
  })
}

Error Window

package.json

{
  "name": "landing-page",
  "version": "1.0.0",
  "description": "An example static site using static-site-generator-webpack-plugin",
  "main": "src/index.js",
  "scripts": {
    "dev": "webpack-dev-server --hot --port 5000",
    "build": "webpack --config webpack.prod.config.js --progress -p"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/StevenIseki/static-site-generator-webpack-plugin-example"
  },
  "author": "SB",
  "license": "MIT",
  "dependencies": {
    "react": "^15.6.2",
    "react-dom": "^15.6.2",
    "react-router": "^2.8.1"
  },
  "devDependencies": {
    "amdefine": "^1.0.1",
    "async": "^2.5.0",
    "autoprefixer": "^6.7.7",
    "babel-core": "^6.26.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "image-webpack-loader": "^3.4.2",
    "jquery": "^1.9.1",
    "neal-react": "^0.2.3",
    "node-sass": "^4.5.3",
    "popper.js": "^1.12.3",
    "postcss-loader": "^1.3.3",
    "sass-loader": "^4.1.1",
    "static-site-generator-webpack-plugin": "^3.4.1",
    "style-loader": "^0.13.2",
    "webpack": "^1.15.0",
    "webpack-dev-server": "^1.16.5"
  }
}

[KostasTsiknas]

For me it was something very silly. In my webpack.config.js I had the following line:
exclude: /node_modules/
One of the parents of my working folder was node_modules e.g. C:Reactnode_modulesMyProject
As soon as I changed the folder structure removing node_modules from the parent folder, everything worked fine.

[shubhamk54]

I have the same error above.
Here is my wepack.config, I am still figuring out whats wrong in this.

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

var BUILD_DIR = path.resolve(__dirname, 'C:\Users\DELL\Sample\src\client\public');
var APP_DIR = path.resolve(__dirname, 'C:\Users\DELL\Sample\src\client\app');

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

module.exports = config;
`

[sinneren]

@shubhamk54 use not query, use options. my working:

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

[mrchief]

This error can happen for any of the 100s of loaders failing. Do remember that this a closed issue. You'll have a better chance at getting your query resolved by posting to stackoverflow.com or opening a new issue with specifics.

[serjo96]

Have same problem

i use regelar expression in component react

console.log( '_asdasdas/'.match(/(?<=\_)(.*?)(?=\/)/g))

but compiler show me this erorr

ERROR in ./src/components/MediaList/GenresList.jsx
Module parse failed: D:\work\move-search\node_modules\babel-loader\lib\index.js!D:\work\move-search\src\components\MediaList\GenresList.jsx Error parsing regular expression: Invalid regular expression: /(?<=\_)(.*?)(?=\/)/: Invalid group (150:35)
You may need an appropriate loader to handle this file type.
|               idRequest = this.props.match.params.id.split('-').pop(),
|               typeRequest = 'movie';
|           console.log('_asdasdas/'.match(/(?<=\_)(.*?)(?=\/)/g));
|           if (this.props.location.search) {
|               if (pageNubmer <= 2) {
 @ ./src/Routes/Routes.jsx 85:18-63
 @ ./src/App.jsx
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

webpack config

"use strict";
var webpack = require('webpack');
var path = require('path');
var loaders = require('./webpack.loaders');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

const HOST = process.env.HOST || "127.0.0.1";
const PORT = process.env.PORT || "8888";

loaders.push({
  test: /\.sass$/,
  loaders: ['style-loader', 'css-loader?importLoaders=1', 'resolve-url-loader', 'sass-loader?sourceMap'],
  exclude: ['node_modules']
});

module.exports = {
  entry: [
    'react-hot-loader/patch',
    './src/index.jsx', // your app's entry point
  ],
  devtool: process.env.WEBPACK_DEVTOOL || 'eval-source-map',
  output: {
    publicPath: '/',
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    loaders
  },
  devServer: {
    contentBase: "./public",
    // do not print bundle build stats
    noInfo: true,
    // enable HMR
    hot: true,
    // embed the webpack-dev-server runtime into the bundle
    inline: true,
    // serve index.html in place of 404 responses to allow HTML5 history
    historyApiFallback: true,
    port: PORT,
    host: HOST
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new ExtractTextPlugin({
      filename: 'style.css',
      allChunks: true
    }),
    new DashboardPlugin(),
    new HtmlWebpackPlugin({
      template: './src/template.html',
      files: {
        css: ['style.css'],
        js: [ "bundle.js"],
      }
    }),
  ]
};

jsx loader

{ test: /\.jsx?$/, exclude: /(node_modules|bower_components|public\/)/, loader: "babel-loader" }

.babelrc

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["transform-runtime", "transform-decorators-legacy", "transform-class-properties", "react-hot-loader/babel", "transform-es2015-unicode-regex"]
}

[amorenew]

I have same issue details on StackOverflow
https://stackoverflow.com/questions/48034538/how-to-solve-this-error-you-may-need-an-appropriate-loader-to-handle-this-file-t

[shashankKeshava]

I'm facing a similar error. Still not able to fix it

Error:

ERROR in ./src/index.js
Module parse failed: Unexpected token (6:12)
You may need an appropriate loader to handle this file type.
|     render() {
|         return (
|             <div>
|                 <h1>Welcome to React Boilerplate</h1>
|             </div>

Webpack Config:

'use strict';

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

const commonPaths = require('./common-paths');
console.log(commonPaths.srcPath);
module.exports = {
    // Entry: First file webpack starts(your dependency graph)
    entry: {
        app: commonPaths.inputPath,
    },
    // Output: How and where to put bundles and format them
    output: {
        filename: 'bundle.js',
        path: commonPaths.outputPath,
    },
    // Loaders:  How to treat files before adding to dependency graphs
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                include: [commonPaths.inputPath],
                loader: ['babel-loader'],
                query: {
                    presets: ['es2015', 'react'],
                    plugins: ['transform-runtime'],
                },
                options: {
                    cacheDirectory: true,
                },
            },
        ],
        rules: [
            {
                test: /\.png$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1000,
                        },
                    },
                ],
            },
        ],
    },
    // Plugins: Extremely Customisable
    plugins: [new webpack.ProgressPlugin(), new htmlWebpack()],
};

The entire project is available at React-Redux-BoilerPlate

[lalitmee]

I am getting the same error and now I am getting frustrated. I searched a lot to remove this error but no luck. Please help me.

• webpack.config.js

/* eslint strict: 0 */
("use strict");

const path = require("path");
const webpack = require("webpack");
const webpackTargetElectronRenderer = require("webpack-target-electron-renderer");

let options = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loaders: ["babel-loader"],
        exclude: /node_modules/,
        query: {
          presets: ["es2015", "react", "stage-0"]
        }
      },
      {
        test: /\.jsx?$/,
        loaders: ["babel-loader"],
        query: {
          presets: ["es2015", "react"]
        },
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          }
        ],
        include: /node_modules/
      }
    ]
  },
  output: {
    path: path.join(__dirname, "public", "js"),
    filename: "bundle.js"
  },
  resolve: {
    extensions: ["", ".js", ".jsx"],
    packageMains: [
      "webpack",
      "browser",
      "web",
      "browserify",
      ["jam", "main"],
      "main"
    ]
  },
  entry: ["./app/app.js"],
  debug: true
};

options.target = webpackTargetElectronRenderer(options);

module.exports = options;

• package.json

{
    "name": "scotch-player",
    "productName": "Scotch Player",
    "version": "1.0.0",
    "description": "Scotch Demo Player",
    "main": "main.js",
    "scripts": {
        "test": "npm test",
        "start": "electron main.js",
        "electron": "webpack && electron .",
        "web": "webpack -—target web && webpack-dev-server --target web"
    },
    "dependencies": {
        "babel-preset-es2015": "^6.6.0",
        "babel-preset-es2017": "^6.24.1",
        "babel-preset-react": "^6.5.0",
        "babel-preset-stage-0": "^6.24.1",
        "babelify": "^7.3.0",
        "css-loader": "^0.28.9",
        "electron-prebuilt": "^0.36.0",
        "electron-reload": "^0.2.0",
        "jquery": "^2.2.3",
        "react": "^0.14.8",
        "react-dom": "^0.14.7",
        "semantic-ui-css": "^2.2.14",
        "semantic-ui-react": "^0.78.2",
        "style-loader": "^0.20.1",
        "webpack-dev-server": "^2.11.1"
    },
    "devDependencies": {
        "babel-core": "^6.4.5",
        "babel-loader": "^6.2.1",
        "minimist": "^1.2.0",
        "webpack": "^1.12.12",
        "webpack-target-electron-renderer": "^0.4.0"
    }
}

• .bablerc

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

• error message when I am running npm run electron

Hash: a15466a376457c6f3383
Version: webpack 1.12.12
Time: 145ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.51 kB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built] [1 error]
   [1] ./app/app.js 0 bytes [built] [failed]

ERROR in ./app/app.js
Module parse failed: /home/lalit/Desktop/Github/Electron/simple-electron/scotch-player/app/app.js Line 3: Unexpected token
You may need an appropriate loader to handle this file type.
| // ES6 Component
| 
| import React from "react";
| import ReactDOM from "react-dom";
| import { Header, Button, Container } from "semantic-ui-react";
 @ multi main

I have tried a lot. Please help me. Thank you.

[MarkOGDev]

Try removing the line exclude: /node_modules/ in your loaders.
That worked for my similar Module parse failed: issue.

[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:
```ERROR in ../node_modules/rxjs/add/operator/catch.js
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**:
```/* eslint-env node */
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