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

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?

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Reactions: 177
  • Comments: 71 (8 by maintainers)

Most upvoted comments

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 ( <div>

Contact list

</div> ) } }

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

+238
varunkot on Sep 4, 2016

Hey @varunkot To indent/organize your comment well for code snippets try putting your code inside
+145
aseem2625 on Sep 5, 2016

@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']
        }
      }
    ]
  }
}
+115
stevenross on Dec 8, 2015

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?

+39
nidaibani21 on Apr 1, 2017

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

+32
aseem2625 on Jul 28, 2017

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]"
            }
        ]
    }
};
+31
aseem2625 on Mar 6, 2016

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

+29
westdavidr on Dec 8, 2015

Hi

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

+25
varunkot on Sep 4, 2016

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

error_screen

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"
  }
}
+14
zeexan-dev on Jan 24, 2017

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:\React\node_modules\MyProject
As soon as I changed the folder structure removing node_modules from the parent folder, everything worked fine.

+9
KostasTsiknas on Nov 10, 2017

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

+8
danez on Jul 28, 2017

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!

+6
kilgarenone on May 19, 2019

@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.

+6
aseem2625 on Jul 27, 2017

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

+6
rubyonrails3 on Mar 28, 2017

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.

is1

+5
MrRahulR on Jul 27, 2017

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

+4
MarkOGDev on Mar 21, 2018

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.

+3
danielrob on Apr 9, 2018

@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']
                    }
                }]
            }
        ]
    }
+3
sinneren on Nov 13, 2017

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.

+3
loganfsmyth on Apr 11, 2017

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": "alparslanyigitcan@gmail.com"
	},
	"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

> react-made-by@0.2.0 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 <my app>’ on my package. Hope this helps.

+2
ya332 on Jan 5, 2020

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

+2
softmarshmallow on Jan 2, 2019

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

+2
shashankKeshava on Feb 1, 2018

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

+2
mpazitny on Feb 15, 2017

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.

+2
westdavidr on Dec 3, 2015

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/**"
    ]
  }
}
+1
programthis on Sep 18, 2019

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”

+1
vinayakshenoy91 on Apr 8, 2019

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; `

+1
shubhamk54 on Nov 11, 2017

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

+1
MrRahulR on Jul 28, 2017
Read more comments on GitHub
← babel-loader: Plugin transform-runtime with webpack doesn't work properly
babel-loader: `resolveLoader.root` not being taken into account? →