Why can't Webpack resolve ‘babel-loader’?

Question

When I configure Webpack for this code base, Webpack complains that it Can't resolve 'babel-loader' . What exactly is failing, and how can I ask Webpack what its complaint is?

The Webpack configuration:

// webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './source/main.jsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js',
    },
    resolve: {
        modules: [
            path.resolve(__dirname, 'source'),
            '/usr/share/javascript',
            '/usr/lib/nodejs',
        ],
    },
    module: {
        loaders: [
            // Transform JSX with React.
            {
                test: /\.jsx$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react'],
                },
            },
        ],
    },
};

The entry module:

// source/main.jsx

"use strict";

import Application from './components/Application';

const applicationElement = <Application />;
ReactDOM.render(
    applicationElement,
    document.getElementById('application'),
);

Is the problem something like a search path, and if so why can't the error tell me what setting I need to correct?

The babel-loader module is definitely installed. (I therefore don't want to install it again – so npm install won't help – I am trying to tell Webpack to use it from the already-installed location.) Its package definition is at /usr/lib/nodejs/babel-loader/package.json .

I've pointed Webpack's resolver there – instead of its default resolver behaviour – using the resolve.modules list of search paths. Correct?

So the resolver should be able to find it there by the specified search path /usr/lib/nodejs and the name babel-loader , no?

(This raises a separate question, about how to convince Webpack to just tell me what it's looking for so it can be diagnosed more easily.)

How can I tell Webpack the specific location it should use to resolve that babel-loader name ?

Answer 1

I think that the webpack.config you're looking for is the following:

module: {
  loaders: [
    {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
  ]
}

Hope helps :)

Answer 2

The Webpack configuration setting resolve is for modules that are imported. The loaders are resolved differently; the resolveLoader setting configures how to resolve the loaders specifically.

So, adding resolveLoader to the Webpack configuration works:

// webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './source/main.jsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js',
    },
    resolve: {
        // Configure how Webpack finds modules imported with `import`.
        modules: [
            path.resolve(__dirname, 'source'),
            '/usr/share/javascript',
            '/usr/lib/nodejs',
        ],
    },
    resolveLoader: {
        // Configure how Webpack finds `loader` modules.
        modules: [
            '/usr/lib/nodejs',
        ],
    },
    module: {
        loaders: [
            // Transform JSX with React.
            {
                test: /\.jsx$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react'],
                },
            },
        ],
    },
};