resolve-url-loader: error processing CSS: a valid source-map is not present on resolve-url-loader 4.0.0 and Linux when trying to use KaTeX fonts from Sass/scss

[cirosantilli]

First sorry if this was answered at https://github.com/bholloway/resolve-url-loader/issues/107 but I couldn't easily find a solution there: OP said things magically started working somehow https://github.com/bholloway/resolve-url-loader/issues/107#issuecomment-431340329 and then the discussion seems to have morphed into a Windows CR/LF problem with the same error message, so hopefully a new issue is warranted.

Here is the exact reproducer: https://github.com/cirosantilli/cirosantilli.github.io/tree/d6b853618786a80884f9eeb1014070d8b797ddee/web-cheat/webpack/sass

git clone https://github.com/cirosantilli/cirosantilli.github.io
cd cirosantilli.github.io
git checkout d6b853618786a80884f9eeb1014070d8b797ddee
cd web-cheat/webpack/sass
npm install
npm run build

I'm trying to use katex.min.css from https://github.com/cirosantilli/cirosantilli.github.io/blob/d6b853618786a80884f9eeb1014070d8b797ddee/web-cheat/webpack/sass/main.scss#L5 to produce a output .css file.

Katex is a package with fonts included from the CSS: node_modules/katex/dist/katex.min.css starts with:

@font-face{font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(fonts/KaTeX_AMS-Regular.woff2) format("woff2")

and the font is located at:

node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff2

If I don't use resolve-url-loader it fails to load with:

Error: Can't resolve 'fonts/KaTeX_AMS-Regular.woff2' in '/home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass

And if I use it it fails with:

> webpack-cheat@1.0.0 build /home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass
> webpack

asset index.js 598 KiB [compared for emit] (name: index)
asset main.js 2.28 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 595 KiB
  ./index.js 126 bytes [built] [code generated]
  ./main.scss 39 bytes [built] [code generated] [1 error]
  ./node_modules/katex/dist/katex.js 595 KiB [built] [code generated]
1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)

ERROR in ./main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: 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:///home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass/main.scss:344:3
    at encodeError (/home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass/node_modules/resolve-url-loader/index.js:287:12)
    at onFailure (/home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass/node_modules/resolve-url-loader/index.js:228:14)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at runNextTicks (internal/process/task_queues.js:64:3)
    at processImmediate (internal/timers.js:435:9)
    at processResult (/home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass/node_modules/webpack/lib/NormalModule.js:676:19)
    at /home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass/node_modules/webpack/lib/NormalModule.js:778:5
    at /home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at onFailure (/home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass/node_modules/resolve-url-loader/index.js:228:5)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at runNextTicks (internal/process/task_queues.js:64:3)
    at processImmediate (internal/timers.js:435:9)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.36.1 compiled with 2 errors and 1 warning in 762 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack-cheat@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-cheat@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ciro/.npm/_logs/2021-07-19T10_51_33_923Z-debug.log

Interestingly, I did get things to work with both Less and a Js import: https://github.com/KaTeX/KaTeX/discussions/3115#discussioncomment-1021002 but the Sass looks like the best solution for my use case at the moment if I can make it work.

[bholloway]

@cirosantilli sorry for the delay.

I have looked at your webpack.config.js. You need to enable {sourceMap: true} in sass-loader as shown here.

I'm going to optimistically close this because this is very likely the problem. However please feel free to comment further and I will re-open as necessary.

[cirosantilli]

OMG, thanks so much for looking into this! Adding sourceMap: true solved it! Working updated code at: https://github.com/cirosantilli/cirosantilli.github.io/tree/c4a93c23e9e009a0a36e76673d167c6149295dec/web-cheat/webpack/sass

BTW, I the docs also mention adding: sourceMapContents: false, but sass-loader 11.0.1 complained:

options has an unknown property 'sourceMapContents'

so I just removed it, and things worked. Must just be my sass-loader version.

:heart: :heart: :heart: :heart: :heart: :heart: :heart: :heart: :heart: :heart: :heart: :heart: :heart: :heart: :heart: :heart: :heart: :heart: :heart: :heart:

[mihanizm56]

But what if I do not need any css source-maps?

Trying to set sourceMap to false leads to this error

[ChinmayPalaye]

@mihanizm56 resolve-url-loader needs sourcemaps to function. You can choose to omit source maps from resolve-url-loader output, but whichever loader is chained before resolve-url-loader needs to output sourcemaps.