Webpack: Error: resolve-url-loader: error processing CSS

Question

Goal: To reduce the SSR compilation time, we have moved the import of node_modules style files from JS files to CSS files.

Example:

import 'react-multi-email/style.css'; => remove from .js file

@import '~react-multi-email/style.css'; => add to .css file

Since those modifications the application no longer launches and displays in the console:

ERROR in ./node_modules/font-awesome/css/font-awesome.min.css (./node_modules/css-loader??ref--5-oneOf-3-1!./node_modules/resolve-url-loader!./node_modules/font-awesome/css/font-awesome.min.css)
Module build failed (from ./node_modules/resolve-url-loader/index.js):
Error: resolve-url-loader: error processing CSS
  a valid source-map is not present (ensure preceding loaders output a source-map)
  at file:/myRootPath/node_modules/font-awesome/css/font-awesome.min.css:4:41
    at encodeError (myRootApp/node_modules/resolve-url-loader/index.js:287:12)
    at onFailure (myRootApp/node_modules/resolve-url-loader/index.js:228:14)
 @ ./src/styles/app.scss (./node_modules/css-loader??ref--5-oneOf-3-1!./node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-3-3!./node_modules/sass-resources-loader/lib/loader.js??ref--5-oneOf-3-4!./src/styles/app.scss) 5:10-164
 @ ./src/styles/app.scss
 @ ./src/App.tsx
 @ ./src/MainApp.tsx
 @ ./src/index.js
 @ multi ./config/polyfills.js ./node_modules/react-dev-utils/webpackHotDevClient.js ./src/index.js

our webpack dev configuration for style loaders:

oneOf: [
  {
    test: /\.css$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
          sourceMap: true,
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          sourceMap: true,
        },
      },
    ],
  },
  {
    test: /\.scss$/,
    use: [
      {
        loader: require.resolve('style-loader'),
        options: {
          sourceMap: true,
        },
      },
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
          sourceMap: true,
          debug: true,
        },
      },
      { loader: 'resolve-url-loader', options: { sourceMap: true, debug: true } },
      {
        loader: 'sass-loader',
        options: {
          sourceMap: true,
        },
      },
      {
        loader: 'sass-resources-loader',
        options: {
          resources: [`${myPath}/app/src/styles/shared/*.scss`],
          sourceMap: true,
        },
      },
    ],
  },
],

the versions of the packages concerned:

"sass": "^1.52.1",
"sass-loader": "^10.1.1",
"sass-resources-loader": "^2.0.1",
"css-loader": "^0.28.7",
"postcss-loader": "^2.0.8",
"postcss-loader": "^2.0.8",
"webpack": "^4.31.0",
"resolve-url-loader": "^4.0.0",
"style-loader": "^0.23.1",

Also:

• we work with Webpack v4 and cannot update all libs
• here, source maps are enabled