material-ui.dropzone: You may need an appropriate loader to handle this file type

Question

Integrating material-ui-dropzone in my React app, I got this error:

./~/material-ui-dropzone/src/index.jsx Module parse failed: ...\client\node_modules\material-ui-dropzone\src\index.jsx Unexpected token (123:26) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (123:26)

Here is my webpack configuration:

const Path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const Webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = (options) => {   const ExtractSASS = new ExtractTextPlugin(`/styles/${options.cssFileName}`);

  const webpackConfig = {
    devtool: options.devtool,
    entry: [
      `webpack-dev-server/client?http://localhost:${+ options.port}`,
      'webpack/hot/dev-server',
      Path.join(__dirname, '../src/app/index'),
    ],
    output: {
      path: Path.join(__dirname, '../dist'),
      filename: `/scripts/${options.jsFileName}`,
    },
    resolve: {
      extensions: ['', '.js', '.jsx'],
    },
    module: {
      loaders: [{
        test: /.jsx?$/,
        include: Path.join(__dirname, '../src/app'),
        loader: 'babel',
      }],
    },
    plugins: [
      new Webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(options.isProduction ? 'production' : 'development'),
        },
        "global.GENTLY": false
      }),
      new HtmlWebpackPlugin({
        template: Path.join(__dirname, '../src/index.html'),
      }),
    ],
    node: {
      __dirname: true,
    },

  };

  if (options.isProduction) {
    webpackConfig.entry = [Path.join(__dirname, '../src/app/index')];

    webpackConfig.plugins.push(
      new Webpack.optimize.OccurenceOrderPlugin(),
      new Webpack.optimize.UglifyJsPlugin({
        compressor: {
          warnings: false,
        },
      }),
      ExtractSASS
    );

    webpackConfig.module.loaders.push({
      test: /\.scss$/,
      loader: ExtractSASS.extract(['css', 'sass']),
    });   } else {
    webpackConfig.plugins.push(
      new Webpack.HotModuleReplacementPlugin()
    );

    webpackConfig.module.loaders.push({
      test: /\.scss$/,
      loaders: ['style', 'css', 'sass'],
    });

    webpackConfig.devServer = {
      contentBase: Path.join(__dirname, '../'),
      hot: true,
      port: options.port,
      inline: true,
      progress: true,
      historyApiFallback: true,
      stats: 'errors-only',
    };   }

  return webpackConfig; 

};

Babel config file is:

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

It is the only library I had problems with. Any idea where might be the problem?

Answer 1

if you are using webapck@3.x Try to modify your babel loader to

module: {
  rules: [
    {
      test: /\.jsx?$/,
      include: Path.join(__dirname, '../src/app'),
      use: {
        loader: 'babel-loader',
        options: {
          presets: ["react", "es2015", "stage-1"],
        }
      }
    }
  ]
}

You can reference here https://webpack.js.org/loaders/babel-loader/

Noted that in your loader config, write babel-loader instead of just babel. Also make sure if you have npm install the right babel npm packages to the devDependencies, which depends on your webpack version.

If it does not solve your problem, paste your package.json file so i can get to know your webpack version.

Cheers.