css-loader 4 compatibility requires documentation

[davidhouweling]

I've attempted to upgrade to to css-loader 4 in our local project but ran into the following error

ModuleNotFoundError: Module not found: Error: Can't resolve '~' in 'C:\git\test-project\src\styles'
    at C:\git\test-project\node_modules\webpack\lib\Compilation.js:925:10
    at C:\git\test-project\node_modules\webpack\lib\NormalModuleFactory.js:401:22
    at C:\git\test-project\node_modules\webpack\lib\NormalModuleFactory.js:130:21
    at C:\git\test-project\node_modules\webpack\lib\NormalModuleFactory.js:224:22
    at C:\git\test-project\node_modules\neo-async\async.js:2830:7
    at C:\git\test-project\node_modules\neo-async\async.js:6877:13
    at C:\git\test-project\node_modules\neo-async\async.js:2830:7
    at done (C:\git\test-project\node_modules\neo-async\async.js:2925:13)
    at C:\git\test-project\node_modules\webpack\lib\NormalModuleFactory.js:445:10
    at C:\git\test-project\node_modules\webpack\node_modules\enhanced-resolve\lib\Resolver.js:213:14
    at C:\git\test-project\node_modules\webpack\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\git\test-project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at C:\git\test-project\node_modules\webpack\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:44:7
    at C:\git\test-project\node_modules\webpack\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\git\test-project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at C:\git\test-project\node_modules\webpack\node_modules\enhanced-resolve\lib\Resolver.js:285:5

I tracked it down to

iconfont-webpack-plugin/lib/postcss-plugin.js

Line 161 in 337f38c

const url = '~!!' + iconFontLoaderPath + '?' + JSON.stringify(options) + '!' + iconFontPlaceholderPath;

I thought the way to fix it is to tell css-loader@4 not to interpret ~!!:

          {
            loader: 'css-loader',
            options: {
              // number of loaders to process before css-loader (i.e. postcss, sass-loader)
              importLoaders: 2,
              url: (url) => {
                // iconfont-webpack-plugin requires css-loader to be filtered out
                return url.startsWith('~!!');
              },
            },
          },

However this makes the url not parse at all. Any idea how to solve this?

[davidhouweling]

OK I think I found it: https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md#-breaking-changes

inline syntax was changed, please write ~ before the file request, i.e. rewrite url(~!!loader!package/img.png) to url(!!loader!~package/img.png)

I changed the local package in my node_modules folder so that the mentioned line is written as

const url = '!!' + iconFontLoaderPath + '?' + JSON.stringify(options) + '!~' + iconFontPlaceholderPath;

And it worked successfully.

[jantimon]

Hey @davidhouweling

you are right

iconfont-webpack-plugin/lib/postcss-plugin.js

Line 161 in 337f38c

const url = '~!!' + iconFontLoaderPath + '?' + JSON.stringify(options) + '!' + iconFontPlaceholderPath;

is causing the issues.. I am happy that the css-loader is finally removing the modules option 👍