Airkro
commented
3 years ago import css file from scss block of vue sfc:
Error: resolve-url-loader: error processing CSS a valid source-map is not present (ensure preceding loaders output a source-map)
Closed bholloway closed 2 years ago
Airkro
commented
3 years ago import css file from scss block of vue sfc:
Error: resolve-url-loader: error processing CSS a valid source-map is not present (ensure preceding loaders output a source-map)
bholloway
commented
3 years ago @Airkro that sounds like a Wepback configuration problem. Please open a separate issue and we can discuss there.
That said, you can probably find the answer to your problem here.
Airkro
commented
3 years ago Same configuration with v3 is working, it will make a test repo soon
bholloway
commented
3 years ago V4 is now released 🎉
Any issues migrating can still be discussed here.
caugner
commented
3 years ago Dependabot opened a PR to bump resolve-url-loader from 3.1.3 to 4.0.0, but our vue-cli/laravel-mix app failed to build it:
The culprit seems to be laravel-mix v5: https://github.com/JeffreyWay/laravel-mix/blob/57ebc296373875ece1faed9d4583120322159fdc/src/components/Preprocessor.js#L79-L86
A solution is to upgrade to laravel-mix v6, because it has been fixed in https://github.com/JeffreyWay/laravel-mix/commit/6ccb6489aeeee46b9d1733276e59ccdb1f163edc#diff-55fcb57299acd620229c08529dd19481b4438d9073a8b2fbdbf65f24443caeeb.
bholloway
commented
3 years ago @caugner it you can upgrade laravel-mix then you will find the default postcss far more stable than the abandoned rework css parser.
If you want to stay with rework then add the peer dependencies per the changelog. However you will get a deprecation warning to remove the engine option. So long term upgrading laravel-mix is a must.
FateXRebirth
commented
3 years ago Our project uses rails/webpacker@5.3 as bundle tool, then dependabot opened a PR to bump resolve-url-loader, After upgrading 3.1.2 to 4.0.0, I found some issues about my manifest.json file generated by webpacker
| Before | After |
|---|---|
| "media/font/icookfont.eot" | "media/font/icookfont.eot?66407412" |
| "media/font/icookfont.svg" | "media/font/icookfont.svg?66407412" |
| "media/font/icookfont.ttf" | "media/font/icookfont.ttf?66407412" |
| "media/font/icookfont.woff2" | "media/font/icookfont.woff2?66407412" |
| "media/font/icookfont.woff" | "media/font/icookfont.woff?66407412" |
One of my font asset's key was appended a number in the end
Here is my config about resolve-url-loader, I don't have any options
environment.loaders.get('sass').use.splice(-1, 0, {
loader: 'resolve-url-loader'
});Any idea? Thanks
bholloway
commented
3 years ago @FateXRebirth I suspect that you have these queries in your upstream sources.
In earlier releases resolve-url-loader removed the hash/query on assets, which is not the correct behaviour. The query might be relevant for resolving resources when the css finally gets to css-loader. Really this was a bug that should have been fixed but at the time I added keepQuery option so there wasn't a breaking change.
Fast forward 6ish years and I'm taking a stronger position. Really the keepQuery behaviour should be default. Amending or removing the query is not the concern for this loader. So in In V4 the keepQuery option was made the default behaviour. Its mentioned in the changelog but I guess the implications of keepQuery option depend totally on your source files.
In your case I think you would want to first check you can find this query in the original source files. If so you can add an additional postcss step to remove the query. I tooka a cursory look at postcss-url plugin and it seems it could probably work for you. However I'm not sure if that is easy to add to rails/webpacker or not.
benmarch
commented
3 years ago After upgrading from 3.1.2 to 4.0.0 along with Webpack to 5.39.0 and Postcss to 8.3.4 (everything is at the latest version as of today) my build hangs in the compilation phase with no messaging at all. When I remove resolve-url-loader it works fine, and when I downgrade to 3.1.3 with all else the same it works fine (this is my current workaround). Here is a snippet of my config:
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: true,
modules: {
compileType: 'icss',
},
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: false,
plugins: ['postcss-preset-env'],
},
},
},
{
loader: 'resolve-url-loader',
options: {
sourceMap: true
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
},And the output just hangs randomly in the middle (progress anywhere between 10% and 50%):
...
[webpack.Progress] 9% setup compilation
[webpack.Progress] 10% building
[webpack.Progress] 10% building 0/1 entries 0/0 dependencies 0/0 modules
[webpack.Progress] 10% building import loader ../../node_modules/babel-loader/lib/index.js
[webpack.Progress] 10% building import loader ./config/package-check-loader.js
[webpack.Progress] 10% building 0/2 entries 2/2 dependencies 0/2 modules
[webpack.Progress] 10% building 0/2 entries 589/700 dependencies 0/218 modules
[webpack.Progress] 11% building 0/2 entries 1600/1640 dependencies 150/669 modules
[webpack.Progress] 12% building 0/2 entries 2194/2300 dependencies 271/866 modules
[webpack.Progress] 13% building 0/2 entries 2800/3186 dependencies 296/1030 modules
[webpack.Progress] 13% building import loader ../../node_modules/mini-css-extract-plugin/dist/loader.js
[webpack.Progress] 13% building import loader ../../node_modules/css-loader/dist/cjs.js
[webpack.Progress] 13% building import loader ../../node_modules/postcss-loader/dist/cjs.js
[webpack.Progress] 13% building 0/2 entries 3150/3186 dependencies 301/1091 modules
[webpack.Progress] 13% building 0/2 entries 3303/3400 dependencies 349/1128 modules
[webpack.Progress] 14% building import loader ../../node_modules/resolve-url-loader/index.js
[webpack.Progress] 14% building import loader ../../node_modules/sass-loader/dist/cjs.js
[webpack.Progress] 14% building 0/2 entries 3657/3736 dependencies 398/1192 modulesBecause I have a workaround, this isn't pressing for me, but I wanted to let you know in case others experience it as well. Thanks!
rob4226
commented
3 years ago import css file from scss block of vue sfc:
Error: resolve-url-loader: error processing CSS a valid source-map is not present (ensure preceding loaders output a source-map)
@Airkro Did you ever figure out how to fix that? Using resolve-url-loader@3.1.3 works fine but resolve-url-loader@4.0.0 and resolve-url-loader@5.0.0-beta.1 I get the above error. I am using webpack v5.39 on windows and resolve-url-loader is directly after css-loader.
Airkro
commented
2 years ago @Rob4226 Looks like "the time fix everything", I update everything to the latest version, then didn't get this error anymore. Even though I didn't know which part fixed it.
xyy94813
commented
2 years ago import css file from scss block of vue sfc:
Error: resolve-url-loader: error processing CSS a valid source-map is not present (ensure preceding loaders output a source-map)
Got same problem with resolve-url-loader@4.0.0 less-loader@10.2.0:
// work well
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: true,
root: paths.appSrc,
},
},
{
loader: require.resolve('less-loader'),
// not the same as react-scripts
options: {
sourceMap: true,
},
},// work fail
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: false,
root: paths.appSrc,
},
},
{
loader: require.resolve('less-loader'),
// not the same as react-scripts
options: {
sourceMap: false,
},
},// work well
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: false,
root: paths.appSrc,
},
},
{
loader: require.resolve('less-loader'),
// not the same as react-scripts
options: {
sourceMap: true,
},
},@xyy94813
You don't this loader when you not using sass, use rewriteUrls: 'local' instead
bholloway
commented
2 years ago Now that v5 is released v4 is in maintenance. So I am closing this issue.
Please 👍 if you have successfully migrated to the V4 ~beta~ release.
Alternatively. If you have experienced problems migrating please comment with a short description here and we will split off a separate issue as needed.
If you are newly using
resolve-url-loaderand have a problem please go directly to creating a separate issue. Adoption can be hard and any problems are unlikely to be due to V4 itself.