Search code examples
reactjswebpackgulpwebpack-dev-serverbabel-loader

webpack react error: You may need an appropriate loader to handle this file type


Webpack compiling errors for react files. The compiler seems to throw errors on every react file with the following:

ERROR in ./public/react-components/modules/user/profile/edit.js
Module parse failed: /Workspace/bungaloow/public/react-components/modules/user/profile/edit.js Unexpected token (5:26)
You may need an appropriate loader to handle this file type.  

Webpack configuration:

var glob = require('glob');

module.exports = {
    entry: glob.sync('./public/react-components/**/*.{js,json}'),
    output: {
        path: __dirname + '/public/compiled',
        filename: "react-components.js"
    },
    module: {
        loaders: [
            {test: /\.js$/, loader: 'babel-loader', query: {presets: ['es2015','react']}}
        ],
        rules: [
            {
                test: /\.json$/,
                use: 'json-loader'
            },
            {
                test: /\.js$/,
                use: 'babel-loader'
            }
        ]
    },
    watch: true
};

Solution

  • You're mixing Webpack 1 syntax (module.loaders) with Webpack 2 syntax (module.rules). My guess is that you're using Webpack 2 and it's only using module.rules, so your babel-loader isn't configured properly.

    I believe the correct Webpack 2 syntax would be this:

    module: {
      rules: [{
        test   : /\.json$/,
        loader : 'json-loader' // `use` is appropriate when you have to chain loaders,
                               // if there's only a single loader, use `loader`
      }, {
        test    : /\.js$/,
        loader  : 'babel-loader',
        options : { presets : ['es2015', 'react'] }
      }]
    }
    

    More info here.