The easy way to handle error - you may need an appropriate loader to handle this file type.

Question

I am trying to write a javascript that returns the invalid answer. I don’t know where the incorrect command is in the “you may need an appropriate loader to handle this file type.”. My detail is:

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

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

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

And I end up with the warning message:

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

Pls, suggest the best answer to fix it.

lyytutoria · Accepted Answer

The cause: Because of new updates and changes overtime, your version compatibility started causing problems with configuration.

Solution: es2015 preset need to be installed in your configuration. You can set up it by doing this suggestion:

npm install babel-preset-es2015

After that is babel-loader configuration:

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

Alice Evrard · Answer

You must have the ES2015 babel preset.

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 babelloader within your webpack configuration:

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

Add a .babelrc to the root folder of your project, where the node module are:

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

Sign Up

Sign In

Forgot Password

ITtutoria Latest Questions

The easy way to handle error – you may need an appropriate loader to handle this file type.

How to fix error “you may need an appropriate loader to handle this file type” ?