Home/ Questions/The easy way to handle error - you may need an appropriate loader to handle this file type.
Next
Answered
Emma Blanchard
  • 22
Asked: 2022-05-12T10:27:48+00:00 In:

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

  • 22

. Advertisement .

..3..

. Advertisement .

..4..

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.

webpack
Share

2 Answers

  1. Best Answer
    Expert

    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'] 
    } 
}
    • 21

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

     

    • 24

Leave an answer

You must login to add an answer.

Need An Account,