“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's what my Webpack configuration 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 Webpack uses:

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

My entire index.js file does the import, reacting, but it looks like the "babel-loader" is not working.

I am using "babel-loader" 6.0.0.

Answer 1

You need to install es2015 preset:

 npm install babel-preset-es2015 

and then configure babel-loader :

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

Answer 2

Make sure es2015 babel preset is installed.

Example package.json devDependencies:

 "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 web package configuration:

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

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

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

Additional Information:

• babeljs.io - using babel with a web package

• babeljs.io - docs on .babelrc

• reaction-webpack-cookbook - configure the response to the webpack

• repository-response-webpack

Answer 3

If you use Webpack> 3, you only need to install babel-preset-env , since this preset is responsible 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 displays its configuration from my .babelrc file:

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

Answer 4

When using TypScript:

In my case, I used the new webpack v3.11 syntax from my documentation page. I just copied the css loader configuration and style on my website. Commented out code (new 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 correct way is:

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

in the array of loaders properties.

Answer 5

It throws me behind my back. Angular 7, Webpack I found this article, so I want to pay tribute to the article https://www.edc4it.com/blog/web/helloworld-angular2.html

What is the solution: // in your component file. use a template as webpack will treat it as a 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 someone