How to solve webpack2 error: You may need an appropriate loader to handle this file type?

Question

I am trying to convert my reactjs/webpack/gulp app to webpack2. I am using the webpackconfig+.babelrc file and package.json from this project as a starting point:

https://github.com/ModusCreateOrg/budgeting-sample-app-webpack2

This is the gulpcode:

var gulp = require('gulp');
var webpackStream = require('webpack-stream');
var webpack2 = require('webpack');

gulp.task('default', function() {
  return gulp.src('app/app.js')
    .pipe(webpackStream({/* options */}, webpack2))
    .pipe(gulp.dest('dist/'));
});

When I run 'gulp' I get this error:

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
 Error: ./app/app.js
Module parse failed: C:\myapp\app\app.js Unexpected token (11:4)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
|     <Provider>
|         <App />
|     </Provider>,

Which loader do I need and where do I configure this?

Answer 1

You're not actually using webpack.config.js so presumably you're configuring the options in the Gulpfile. But you commented the options as /* options */ which is the important bit, where you actually configure webpack.

You configure the loaders in these options under module.rules (see also Concepts - Loaders ). In your case you need the babel-loader with babel-preset-react to be able to transpile JSX syntax, the preset should already be in the .babelrc config you're using. You just need to add the loader to your options in the Gulpfile so that your .js and .jsx files are passed through that loader (using the same rule as in the project you linked):

module: {
   rules: [
     {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          'babel-loader'
        ],
     }
   ]
 }

Instead of defining the options in your Gulpfile you can define a webpack.config.js and then just require it and pass it to webpackStream . This file is automatically used when you use webpack directly (without Gulp), so it's very convenient to have that config if you ever want to run it outside of Gulp. It's good idea to get familiar with webpack. A good starting point is the Core Concepts of the official docs.

Usually an object is exported, which you can use directly in webpackStream , but in the project you linked, it exports a function which returns the configuration object based on the environment used. To use it directly in your Gulpfile you would do the following:

var gulp = require('gulp');
var webpackStream = require('webpack-stream');
var config = require('./webpack.config');

gulp.task('default', function() {
  return gulp.src('app/app.js')
   .pipe(webpackStream(config()))
   .pipe(gulp.dest('dist/'));
});

config() returns the development options and to get the production config you'd need to call config({ prod: true }) . You probably don't want to use exactly that config but use your own which you can just export as a plain object, so you don't need to call a function.