Error resolve url loader css error

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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 #212

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 #212

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.

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 

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

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: 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.

The text was updated successfully, but these errors were encountered:

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Module build failed: Error: resolve-url-loader: CSS error #107

Module build failed: Error: resolve-url-loader: CSS error #107

Comments

I have a strange malfunction with resolve-url-loader. I have this webpack.config.js:

const ExtractTextPlugin = require('extract-text-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); const path = require('path'); module.exports = < entry: ['./src/main.js', './src/main.scss'], output: < path: path.resolve(__dirname, './dist'), filename: 'index.js' >, devtool: "source-map", module: < rules: [ < test: /\.scss$/, use: ExtractTextPlugin.extract(< use: [ < loader: 'css-loader', options: < minimize: true, sourceMap: true >>, < loader: 'resolve-url-loader', options: < sourceMap: true >>, < loader: 'sass-loader', options: < sourceMap: true >>, ] >) >, < test: /\.(jpg|png|gif|ico|svg)$/, use: [< loader: 'file-loader', options: >] >, < test: /\.html$/, use: [ < loader: 'html-loader', options: < interpolate: true >> ] > ] >, plugins: [ new ExtractTextPlugin(< // define where to save the file filename: 'style.css', allChunks: true, >), new HtmlWebpackPlugin(< template: './src/main.html', filename: 'index.html' >), new webpack.ProvidePlugin(< $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" >) ], >; 

this is the package.json file:

< "name": "my-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": < "test": "echo \"Error: no test specified\" && exit 1", "build:watch": "webpack --watch" >, "author": "", "license": "ISC", "devDependencies": < "css-loader": "^1.0.0", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^2.0.0", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.2.0", "node-sass": "^4.9.3", "resolve-url-loader": "^3.0.0", "sass-loader": "^7.1.0", "webpack": "^3.9.1" >, "dependencies": < "bootstrap": "^4.1.3", "jquery": "^3.3.1", "owl.carousel": "^2.3.4", "popper.js": "^1.14.4" >> 

In the SCSS file I have this line what is the reason of the problem:

I tried to change this line to this one:

And in both case I got this error message:

ERROR in ./node_modules/css-loader??ref--0-1!./node_modules/resolve-url-loader??ref--0-2!./node_modules/sass-loader/lib/loader.js??ref--0-3!./src/main.scss Module build failed: Error: resolve-url-loader: CSS error source-map information is not available at url() declaration at file://d:\LARAVEL\Code\my-project\src\main.scss:7252:5 at encodeError (d:\LARAVEL\Code\my-project\node_modules\resolve-url-loader\index.js:218:12) at onFailure (d:\LARAVEL\Code\my-project\node_modules\resolve-url-loader\index.js:175:14) at process._tickCallback (internal/process/next_tick.js:68:7) 

Doublechecked the image file is on that path what is given. But if I use data:image/png solution. same error message. I don’t understand what is the problem.

The other images working fine with similar url(‘img/filename.png’) format.

The text was updated successfully, but these errors were encountered:

Thanks, I did these things, and nothing userful in debug mode.

I tried to turn off the sourceMap too, it isn’t help.

And one more thing: I use several background-images in several other files in this project, and those works fine. Those files hasn’t any difference (except the file names of course).

I suspect a bug in resolve-url-loader, because this malfunction came out earlier but it was gone. I belived my colleges solved the problem, but now I asked them, and nobody solved it. Simply just gone. Strange.

I’m getting the same error after upgrading, but only on windows. on MacOS it builds just fine.

In my project i use import-glob . When I use a url() in the main SCSS entry point, this error doesn’t occur when building on windows. It only happens when using url() in one of the files imported through import-glob . Don’t know if that helps

Using resolve-url-loader@3.0.0 , webpack@4.22.0 and sass-loader@7.1.0

(Also, downgrading to 2.3.1 solves the issue)

@netdjw I interpreted this as the problem went away. Is this still a problem with you? Is this a problem with your colleagues?

Just reacquainting myself with the code. It looks like any url() will require the source-map to be valid at that location. See this code here.

This happens before we look further at the url() to see if we want to process it. So that would explain why @netdjw still gets the error with a data URI.

@asbjornh @netdjw I need some more data. Some ideas.

• I’m presuming you’re working on closed source. Is there any chance you can construct a minimum failing example, open source?
• Can you try adjust-sourcemap-loader with debug mode in between sass-loader and resolve-url-loader . It will display the incoming source-map sources.

My current theory is that there is some upstream problem with the source-map sources. You should look to see it includes all the files you are compiling.

Yeah, I’ll see if I get the time to create a minimum example during this week 🙂

Still working on narrowing this down, but it’s starting to look like an upstream error that’s not properly handled like you suggested. Right now I have a huge mixin (without any url calls), and when I remove it, the build runs fine. When it’s included, the build crashes with an error message from resolve-url-loader.

Ok this is quite weird. I’ve narrowed it down as far as I can I think. This setup fails with the above mentioned error on Windows 10, Node 8.11.4 . The exact same setup builds fine on MacOS.

As you can see in style.scss below, there is a calc with a line break and extra parentheses inside of it. Remove the line breaks or the parentheses and the build succeeds. This is, of course, a really contrived example, but that calc originally contained some really verbose math. I use VS Code with autoFormat enabled, so a line break was inserted automatically.

I also tried downgrading to resolve-url-loader@2.3.1 . The build succeeded (on Windows). The generated css file is at the very bottom of this post. Also, removing resolve-url-loader altogether makes the build succeed. When building without resolve-url-loader , the resulting css file is identical to the one with resolve-url-loader@2.3.1 in the build pipeline.

/* eslint-env node */ /* eslint-disable no-console */ const path = require("path"); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = () => < return < devtool: "source-map", entry: < style: "./style.scss" >, output: < path: path.resolve(__dirname, "dist") >, module: < rules: [ < test: /\.scss$/, exclude: /node_modules/, use: ExtractTextPlugin.extract([ < loader: "css-loader", options: < importLoaders: 1, sourceMap: true >>, < loader: "resolve-url-loader", options: < sourceMap: true >>, < loader: "adjust-sourcemap-loader", options: < debug: true >>, < loader: "sass-loader", options: < sourceMap: true >> ]) >, < test: /\.svg$/, use: < loader: "file-loader" >> ] >, plugins: [new ExtractTextPlugin("[name].[chunkhash].css")] >; >; 

adjust-sourcemap-loader: ##path##\style.scss @ ##path##\node_modules\sass-loader\lib\loader.js??ref--4-4 INPUT style.scss ABSOLUTE ##path##\style.scss adjust-sourcemap-loader: ##path##\style.scss @ ##path##\node_modules\sass-loader\lib\loader.js? INPUT style.scss ABSOLUTE ##path##\style.scss Hash: c18a8a717939eec50edc Version: webpack 4.22.0 Time: 616ms Built at: 2018-10-24 20:15:21 2 assets Entrypoint style = style.js style.js.map [0] ./style.scss 1.69 KiB [built] [failed] [1 error] ERROR in ./style.scss Module build failed (from ./node_modules/extract-text-webpack-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/resolve-url-loader/index.js): Error: resolve-url-loader: CSS error source-map information is not available at url() declaration at file://##path##\style.scss:4:3 at encodeError (##path##\node_modules\resolve-url-loader\index.js:218:12) at onFailure (##path##\node_modules\resolve-url-loader\index.js:175:14) at at runMicrotasksCallback (internal/process/next_tick.js:121:5) at _combinedTickCallback (internal/process/next_tick.js:131:7) at process._tickCallback (internal/process/next_tick.js:180:9) at runLoaders (##path##\node_modules\webpack\lib\NormalModule.js:286:20) at ##path##\node_modules\loader-runner\lib\LoaderRunner.js:364:11 at ##path##\node_modules\loader-runner\lib\LoaderRunner.js:230:18 at context.callback (##path##\node_modules\loader-runner\lib\LoaderRunner.js:111:13) at onFailure (##path##\node_modules\resolve-url-loader\index.js:175:5) at at runMicrotasksCallback (internal/process/next_tick.js:121:5) at _combinedTickCallback (internal/process/next_tick.js:131:7) at process._tickCallback (internal/process/next_tick.js:180:9) @ ./style.scss 

Generated css file with resolve-url-loader@2.3.1 . The url points to the correct svg file in the build folder.

body < font-size: calc( (1px)); background-image: url(7b56e1eab00ec8000da9331a4888cb35.svg); >/*# sourceMappingURL=style.9e5ee3d7a184f4b00938.css.map*/ 

Источник