209

I am trying to use Webpack with Babel to compile ES6 assets, but I am getting the following error message:

You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'

Here is what my Webpack config looks like:

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

module.exports = {
  entry: './index',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
}

Here is the middleware step that makes use of Webpack:

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var config = require('./webpack.config');

var express = require('express');
var app = express();
var port = 3000;

var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.listen(port, function(err) {
  console.log('Server started on http://localhost:%s', port);
});

All my index.js file is doing is importing react, but it seems like the 'babel-loader' is not working.

I am using 'babel-loader' 6.0.0.

4
  • 1
    I'm having the same problem. babel-preset-es2015 is installed and yet it still has issues with using JSX in a ReactDOM.render() call :s Commented Dec 13, 2015 at 17:02
  • What is the extensions of your file? Are they js files or jsx files? Your loader only considers files with jsx extensions, that could be the problem
    – cubbuk
    Commented Mar 18, 2016 at 13:03
  • At this link your problem will be 100% solved [stackoverflow.com/questions/50149729/… Commented Aug 18, 2019 at 9:43
  • At this link your problem will be 100% solved css import to next.js Commented Aug 18, 2019 at 9:45

14 Answers 14

111

NOTE: The following applies for Babel 6.x and Webpack 1.x. See the end for an update.

You need to install the es2015 preset:

npm install babel-preset-es2015

and then configure babel-loader:

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015']
    }
}

UPDATE: For those coming across this question with more recent versions of Babel or Webpack:

  • For Babel >= 7.x, you should be using @babel/preset-env
  • For Webpack >= 2.x, you should be using options instead of query
4
  • 69
    I have presets installed and babel-loader installed too. It is still giving the same error Commented Feb 24, 2016 at 10:34
  • @UG_ You'll have to ask a separate question. We'd need to see your whole config and the full error message. Commented Feb 25, 2016 at 1:24
  • 2
    Where is the file "babel-loader" file that we should configure?
    – nix86
    Commented May 12, 2021 at 11:37
  • @nix86 babel-loader is an npm module, not a file you edit. Commented May 12, 2021 at 15:59
43

Make sure you have the es2015 babel preset installed.

An example package.json devDependencies is:

"devDependencies": {
  "babel-core": "^6.0.20",
  "babel-loader": "^6.0.1",
  "babel-preset-es2015": "^6.0.15",
  "babel-preset-react": "^6.0.15",
  "babel-preset-stage-0": "^6.0.15",
  "webpack": "^1.9.6",
  "webpack-dev-middleware": "^1.2.0",
  "webpack-hot-middleware": "^2.0.0"
},

Now configure babel-loader in your webpack config:

{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }

add a .babelrc file to the root of your project where the node modules are:

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

More info:

2
  • 1
    . babelrc file is what I was missing, thanks! This is the complete tutorial, the accepted answer only gets you so far.
    – Mike
    Commented Apr 5, 2016 at 20:25
  • Side-info: Not so sure about "stage-0" in options (can also be configured in .babelrc): Some features may not make it in official ES-Standards, so I usually use the more safe "stage-3". Commented Feb 22, 2017 at 13:58
18

If you are using Webpack > 3 then you only need to install babel-preset-env, since this preset accounts for es2015, es2016 and es2017.

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

module.exports = {
    entry: {
        app: './app/App.js',
        vendor: ["react","react-dom"]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '../public')
    },
    module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader?cacheDirectory=true',
            }
        }]
    }
};

This picks up its configuration from my .babelrc file:

{
    "presets": [
        [
            "env",
            {
                "targets": {
                    "browsers":["last 2 versions"],
                    "node":"current"
                }
            }
        ],["react"]
    ]
}
15

BABEL TEAM UPDATE:

We're super 😸 excited that you're trying to use ES2015 syntax, but instead of continuing yearly presets, the team recommends using babel-preset-env. By default, it has the same behavior as previous presets to compile ES2015+ to ES5

If you are using Babel version 7 you will need to run npm install @babel/preset-env and have "presets": ["@babel/preset-env"] in your .babelrc configuration.

This will compile all latest features to es5 transpiled code:

Prerequisites:

  1. Webpack 4+
  2. Babel 7+

Step-1:: npm install --save-dev @babel/preset-env

Step-2: In order to compile JSX code to es5 babel provides @babel/preset-react package to convert reactjsx extension file to native browser understandable code.

Step-3: npm install --save-dev @babel/preset-react

Step-4: create .babelrc file inside root path path of your project where webpack.config.js exists.

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

Step-5: webpack.config.js

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

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        path: path.resolve(__dirname, 'output'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "./index.html"
         })
    ]
}

1
  • 68
    I'm also super excited that you give devs more headaches with all your changes.
    – AlexioVay
    Commented Jan 31, 2021 at 15:44
11

In my case, I had such error since import path was wrong:

Wrong: import Select from "react-select/src/Select"; // it was auto-generated by IDE ;)

Correct: import Select from "react-select";

0
6

This makes me feel stupid, but I want to share for anyone that got frustrated like me: I used webpack.dev.js but didn't specify that as the config file! When running Webpack run with:

webpack --config webpack.dev.js

And it suddenly worked ;)

1
  • 1
    Surprise 😲, its fixed the issue for me also . "build": "webpack --config webpack.dev.js" , Thank you Commented May 26, 2023 at 11:38
3

Due to updates and changes overtime, version compatibility start causing issues with configuration.

Your webpack.config.js should be like this you can also configure how ever you dim fit.

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

module.exports = {
  entry: './src/js/app.js',
  devtool: 'source-map',
    mode: 'development',
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: ["babel-loader"]
    },{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }]
  },
  output: {
    path: path.resolve(__dirname, './src/vendor'),
    filename: 'bundle.min.js'
  }
};

Another Thing to notice it's the change of args, you should read babel documentation https://babeljs.io/docs/en/presets

.babelrc

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

NB: you have to make sure you have the above @babel/preset-env & @babel/preset-react installed in your package.json dependencies

1
  • 1
    Adding @babel/preset-react fixed it for me.
    – kyw
    Commented May 19, 2019 at 10:17
3

You probably forgot to add .js extension to your file.

Component -> Component.js

1
  • 1
    I can't believe this was my issue, I didn't see it after creating the document. Commented Jan 12, 2022 at 14:47
2

Outdated babel packages on Jan 3, 2023

Please install these list of packages for configuration with babel.

$ npm add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

and add below code .babelrc file

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

I used @khizer webpack configuration in my application

Credit goes to This answer. As I have have been gone through the many answer of this solution and it tooks my 2-3 hours. I hope others don't waste the same amount of time.

1

Just adding on another reason such error showed up in Angular.. was because I checked for html file in list of styles:

@Component({
selector: ...,
templateUrls: 'xyz.html',
stylesUrls: ['xyz.html']                  // problem 
})

Addressing wrong file type raises this error

1

As question doesn't specify if it was for angular, react, or react-native. I am posting this for react-native and it may be implied on others too. The reason was that it wasn't able to understand the syntax specified by loader. e.g. tsx, jsx. One solution I found in this article after lots of exploration. When we use external library that was using jsx and you configured your project with tsx, it won't understand jsx and will give you to add appropriate loader. So, you can fix that by following code in your app.json file.

"web": {
  "build": {
    "babel": {
      "include": [
        "name-of-my-shared-package-here"
      ]
    }
  }
}

By replacing name-of-my-shared-package-here with your package name that is causing the issue will solve this issue. You can check the package name in error that is causing this issue.

0

When using Typescript:

In my case I used the newer syntax of webpack v3.11 from their documentation page I just copied the css and style loaders configuration form their website. The commented out code (newer API) causes this error, see below.

  module: {
        loaders: [{
                test: /\.ts$/,
                loaders: ['ts-loader']
            },
            {
                test: /\.css$/,
                loaders: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
        // ,
        // rules: [{
        //     test: /\.css$/,
        //     use: [
        //         'style-loader',
        //         'css-loader'
        //     ]
        // }]
    }

The right way is to put this:

    {
        test: /\.css$/,
        loaders: [
            'style-loader',
            'css-loader'
        ]
    }

in the array of the loaders property.

0

This one throw me for a spin. Angular 7, Webpack I found this article so I want to give credit to the Article https://www.edc4it.com/blog/web/helloworld-angular2.html

What the solution is: //on your component file. use template as webpack will treat it as text template: require('./process.component.html')

for karma to interpret it npm install add html-loader --save-dev { test: /.html$/, use: "html-loader" },

Hope this helps somebody

0

Just add this code webpackmix.js

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css',  [
        require('tailwindcss'),
    ]).vue();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.