scss styles background image parse error #141
Comments
|
I confirm error after updating to 2.5.6 from 2.5.5. system:
next.config.js const withPlugins = require("next-compose-plugins");
const withSass = require("@zeit/next-sass");
const optimizedImages = require("next-optimized-images");
const nextConfig = {
// distDir: "build",
webpack: (config, options) => {
const { isServer } = options;
// Fixes npm packages that depend on `fs` module
if (!isServer) {
config.node = {
fs: "empty",
};
}
return config;
},
};
module.exports = withPlugins(
[
[
withSass,
{
cssLoaderOptions: {
localIdentName: "[local]___[hash:base64:5]",
},
},
],
[optimizedImages, { optimizeImages: false }],
],
nextConfig
);part of app.scss command rm .next/ -rf && next builderror Downgrade to 2.5.5 fixes problem |
|
I'm very sorry that this version broke your builds. I just published Also, if you are already on nextjs 9.3, you might want to consider switching to the builtin sass solution which got introduced in 9.3 so you wouldn't need the |
|
With 2.5.7 build went smoothly. Thank you |
|
But I'm not sure that your fix using |
|
I'm having the same issue after upgrading to 2.5.6. 2.5.7 is still broken for me. Getting a ton of errors like this: 2.5.5 is the last version that works for me. |
|
@EvHaus It would be nice if you could provide more details. What nextjs version do you use? With what packages? Any of '@zeit/next-sass' and '@zeit/next-css' ?. It would be even more useful if you could make a simple minimal repository with reproducible error. |
|
@zobzn See below:
My No custom webpack configuration. Using CSS module pattern via |
|
@EvHaus https://github.com/zobzn/next-with-images-test/ Maybe you haven't mention something else specific to your case? |
|
@zobzn Thanks for creating that repo to try and repro the problem. After some investigation I was able to narrow it down to this line in my code: const resizedImage = require(`../../images/${src}?resize&sizes[]=480&sizes[]=960&sizes[]=1920`);If I change that require statement to import a specific image (ie. I created a branch in your repo to reproduce this: https://github.com/zobzn/next-with-images-test/pull/1/files Once you make this change, This only happens in version 2.5.6 and higher. 2.5.5 works fine. |
|
Yes, an interesting situation. |
|
I found the same error ,I use styled-jsx with styled-jsx-plugin-sass. |
|
Thank you all for helping to find the cause, that means and helps a lot! I think that I was now able to overwrite the builtin image handling (only images, not the whole css/sass feature) introduced in nextjs 9.2 which should hopefully solve all those errors and the image optimization should be the same again as in 2.5.5, even when using the builtin css/sass feature. But to avoid accidentally breaking even more, I published a canary version first. Thanks again for your help 🙌 |
|
Nice @cyrilwanner. |
|
Hi. I know this issue is closed, but I'm experiencing the exact same thing the previous guys are mentioning. If I use a dynamic require statement, the loader attempts to apply sizes to all of the SVG's in my SCSS files. I get these errors in my console: I'm using version 2.6.0. |
|
Hi @xeniajensen When using a dynamic require, webpack applies the loaders on all files that could match this require. Because at build time, it does not know which images will be used later. So when you use I think there are two solutions:
You can read more about it here: https://webpack.js.org/guides/dependency-management/#require-with-expression |
|
Hi @cyrilwanner |
Hi, thanks for your work at first
Describe the bug
After upgrading to 2.5.6, next build errors with:
System information
Additional context
with next-optimized-images 2.5.5 everything ok, an error occurs in styles files with background images
The text was updated successfully, but these errors were encountered: