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 opened this issue · 4 comments
First sorry if this was answered at #107 but I couldn't easily find a solution there: OP said things magically started working somehow #107 (comment) 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/************/************.github.io/tree/d6b853618786a80884f9eeb1014070d8b797ddee/web-cheat/webpack/sass
git clone https://github.com/************/************.github.io
cd ************.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/************/************.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/************.github.io/web-cheat/webpack/sass
And if I use it it fails with:
> webpack-cheat@1.0.0 build /home/ciro/bak/git/************.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/************.github.io/web-cheat/webpack/sass/main.scss:344:3
at encodeError (/home/ciro/bak/git/************.github.io/web-cheat/webpack/sass/node_modules/resolve-url-loader/index.js:287:12)
at onFailure (/home/ciro/bak/git/************.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/************.github.io/web-cheat/webpack/sass/node_modules/webpack/lib/NormalModule.js:676:19)
at /home/ciro/bak/git/************.github.io/web-cheat/webpack/sass/node_modules/webpack/lib/NormalModule.js:778:5
at /home/ciro/bak/git/************.github.io/web-cheat/webpack/sass/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /home/ciro/bak/git/************.github.io/web-cheat/webpack/sass/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/home/ciro/bak/git/************.github.io/web-cheat/webpack/sass/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at onFailure (/home/ciro/bak/git/************.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: KaTeX/KaTeX#3115 (reply in thread) but the Sass looks like the best solution for my use case at the moment if I can make it work.
@************ 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.
OMG, thanks so much for looking into this! Adding sourceMap: true solved it! Working updated code at: https://github.com/************/************.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.
❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️
But what if I do not need any css source-maps?
Trying to set sourceMap to false leads to this error
@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.