"You may need an appropriate loader to handle this file type" with Webpack and Babel

Question

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.

Discriminator

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 – Bashee

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 – Sporadic

At this link your problem will be 100% solved [#50150229 – Haemostasis

At this link your problem will be 100% solved css import to next.js – Haemostasis

Answer 1

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

Parietal

I have presets installed and babel-loader installed too. It is still giving the same error – Micronutrient

@UG_ You'll have to ask a separate question. We'd need to see your whole config and the full error message. – Parietal

@UG_ did you find the solution? – Tiddlywinks

Where is the file "babel-loader" file that we should configure? – Deadpan

@Deadpan babel-loader is an npm module, not a file you edit. – Parietal

What's query? unknown property 'query' – Pocky

Answer 2

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:

• babeljs.io - using babel with webpack

• babeljs.io - docs on .babelrc

• react-webpack-cookbook - configure react with webpack

• a react-webpack-example repo

Calabar

. babelrc file is what I was missing, thanks! This is the complete tutorial, the accepted answer only gets you so far. – Unearned

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". – Ploss

Answer 3

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

Modality

Answer 4

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

Korney

I'm also super excited that you give devs more headaches with all your changes. – Calisa

Answer 5

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

Festoonery

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

Setscrew

Surprise 😲, its fixed the issue for me also . "build": "webpack --config webpack.dev.js" , Thank you – Mashie

Answer 7

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

Bromism

Adding @babel/preset-react fixed it for me. – Carnay

Answer 8

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

Component -> Component.js

Tribade

I can't believe this was my issue, I didn't see it after creating the document. – Cephalothorax

Answer 9

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.

Deposit

Answer 10

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

Anaxagoras

Answer 11

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.

Myopic

Answer 12

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.

Woke

Answer 13

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

Martell

Answer 14

Just add this code webpackmix.js

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

Superfluous