Webpack 2 "url.js is not a loader (must have normal or pitch function)"

[mrbinky3000]

When using with Webpack 2, I get the following error. I've isolated this to the resolve-url-loader. If I include it, I get this error.

/MyProject/node_modules/loader-runner/lib/loadLoader.js:35
    throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");

Error: Module '/MyProject/node_modules/url/url.js' is not a loader (must have normal or pitch function)
    at loadLoader (/MyProject/node_modules/loader-runner/lib/loadLoader.js:35:10)
    at iteratePitchingLoaders (/MyProject/node_modules/loader-runner/lib/LoaderRunner.js:164:2)
    at runLoaders (/MyProject/node_modules/loader-runner/lib/LoaderRunner.js:357:2)
    at NormalModule.doBuild (/MyProject/node_modules/webpack/lib/NormalModule.js:129:2)
    at NormalModule.build (/MyProject/node_modules/webpack/lib/NormalModule.js:180:15)
    at Compilation.buildModule (/MyProject/node_modules/webpack/lib/Compilation.js:127:10)
    at factoryCallback (/MyProject/node_modules/webpack/lib/Compilation.js:304:11)
    at /MyProject/node_modules/webpack/lib/NormalModuleFactory.js:242:4
    at /MyProject/node_modules/webpack/lib/NormalModuleFactory.js:93:13
    at /MyProject/node_modules/tapable/lib/Tapable.js:204:11
    at NormalModuleFactory.<anonymous> (/MyProject/node_modules/webpack/lib/CompatibilityPlugin.js:51:4)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/MyProject/node_modules/tapable/lib/Tapable.js:208:13)

    at onDoneResolving (/MyProject/node_modules/webpack/lib/NormalModuleFactory.js:68:11)
    at onDoneResolving (/MyProject/node_modules/webpack/lib/NormalModuleFactory.js:189:6)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Here is the section of my webpack 2 config that concerns loading styles.

"use strict";
const getCssIdentName = require('../lib/cssIdentName.js');

module.exports = function scssLoader(includePaths) {
  return ({
    resolve: {
      extensions: ['.css', '.scss'],
    },
    module: {
      rules: [
        {
          test: /\.(css|scss)$/,
          include: includePaths,
          use: [
            {
              loader: 'css-loader',
              options: {
                modules: 1,
                importLoaders: 3,
                localIdentName: getCssIdentName(),
                sourceMap: true,
              }
            },
            {
              loader: 'postcss-loader',
            },
            {
              loader: 'resolve-url-loader'
            },
            {
              loader: 'sass-loader',
              options: {
                includePaths: includePaths,
                sourceMap: true,
              },
            }
          ],
        },
      ],
    },
  });
};

When resolve-url-loader has no need to resolve anything, it works without error. However, if I ask it to parse the following scss, it gives that error.

@font-face {
    font-family: 'Roboto';
    src: url('./common_assets/fonts/Roboto-Regular.eot');
    src: local('☺'),
        url('./common_assets/fonts/Roboto-Regular.woff') format('woff'),
        url('./common_assets/fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

There are loaders for eot, woff, and ttf in my webpacks2 config.

Am I just missing a new config option? If this isn't enough information I can make a branch my project's repo and send you the link. Thanks in advance for looking into this.

[bholloway]

@mrbinky3000 This loader does not explicitly support for Webpack 2 yet.

Can you pls refer to issue #36 and let me know if this is a distinctly different issue. You will find mention of a workaround that might help.

Either way please let me know.

[mrbinky3000]

Thanks for the response. I'm not entirely sure how to apply the webpack.loaderOptionsPlugin() fix described in #36 to a series of chained loaders in an array. Also, in my above example, resolve-url-loader has no options. It's using the resolve-url-loader defaults or whatever is passed to it by sass-loader.

[bholloway]

@mrbinky3000 could you please let me know if #45 will fix your issue.

Use npm i resolve-url-loader@bholloway/resolve-url-loader#feature/support-sass-loader-6

[josepot]

@bholloway I don't know his, but it did solve mine! 😅 I was about to open a different issue and I first tried if #45 fixes my issue and it does. Please merge it and publish the npm package ASAP. Thanks a lot!

[bholloway]

Thanks @jesepot.

There is an upstream node-sass issue I am working through with the sass-loader ppl. Time-zones being what they are I will allow another 24 hours and then merge it.

[mrbinky3000]

@bholloway thank you for looking into this, but that fix still didn't work for me. When there's no URL's to resolve, it works. But when I try to include my font url's as stated in my example above, the following error occurs:

/MyProject/node_modules/loader-runner/lib/loadLoader.js:35
                        throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");
                        ^

Error: Module '/MyProject/node_modules/url/url.js' is not a loader (must have normal or pitch function)
    at loadLoader (/MyProject/node_modules/loader-runner/lib/loadLoader.js:35:10)
    at iteratePitchingLoaders (/MyProject/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at runLoaders (/MyProject/node_modules/loader-runner/lib/LoaderRunner.js:362:2)
    at NormalModule.doBuild (/MyProject/node_modules/webpack/lib/NormalModule.js:129:2)
    at NormalModule.build (/MyProject/node_modules/webpack/lib/NormalModule.js:180:15)
    at Compilation.buildModule (/MyProject/node_modules/webpack/lib/Compilation.js:142:10)
    at factoryCallback (/MyProject/node_modules/webpack/lib/Compilation.js:324:11)
    at /MyProject/node_modules/webpack/lib/NormalModuleFactory.js:242:4
    at /MyProject/node_modules/webpack/lib/NormalModuleFactory.js:93:13
    at /MyProject/node_modules/tapable/lib/Tapable.js:204:11
    at NormalModuleFactory.params.normalModuleFactory.plugin (/MyProject/node_modules/webpack/lib/CompatibilityPlugin.js:52:5)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/MyProject/node_modules/tapable/lib/Tapable.js:208:13)
    at onDoneResolving (/MyProject/node_modules/webpack/lib/NormalModuleFactory.js:68:11)
    at onDoneResolving (/MyProject/node_modules/webpack/lib/NormalModuleFactory.js:189:6)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

I can push my project up to a repo if you think it would help you? Thanks for all your efforts!

[bholloway]

@mrbinky3000 Please do that so that I can reproduce. I am currently not dog-fooding with Webpack 2 so I rely on your example.

[bholloway]

@josepot Just released 2.0.0, thanks for your help. @mrbinky3000 This issue is still open for you.

[bholloway]

@mrbinky3000 (Assuming I have not seen your entire webpack config) Please make sure all of your loaders are specified with the -loader suffix. I have recently added this guidance to the readme.md so you may have missed it.

This error is consistent with (somewhere) using loader: 'url' thinking it will resolve to url-loader. However you also have a package url which takes precedence.

Given the behaviour (differs with/without url() statements) this is less likely to be the cause. However we should definitely eliminate it first.

[mrbinky3000]

@bholloway I was aware that you now need to add -loader to all loaders in the webpack config, but you're right, I missed one in my loader for woff files, hence the reason why resolve-url-loader was choking on the font URL. The url package was taking precedence, as you stated.

Version 2.0.0 WORKS!

Thank you very much for all your hard work!

Here is the whole webpack config if you still need it for experimenting. https://github.com/mrbinky3000/mrb3k-react-webpack-boilerplate/tree/feature/resolve-url-loader-experiments

[bholloway]

Congratulations. Having encountered that problem you have reached webpack next level!

Seriously though we have all been there.

I'm glad you solved your problem. Let me know if I can close.

[andrewbrntt]

Adding -loader to my loader paths in my webpack.config fixed it for me thanks!

[bholloway]

That's good news @andrewbrntt I will close this issue. Best of luck to everyone.

[raquibmca]

I have facing same issue with react-hot-loader@3.1.3 and solved the issue by adding webpack with loader.

loaders: [ { test: /.tsx?$/, use:["react-hot-loader/webpack", "awesome-typescript-loader"] } ]

[Salstar24]

Thank you @raquibmca - react-hot-loader was my problem and you fixed it! Much, much appreciation! :)