next-optimized-images: scss styles background image parse error

Hi, thanks for your work at first

Describe the bug

After upgrading to 2.5.6, next build errors with:

Failed to compile.

./app/components/FileLoader/styles.scss
ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)


> Build error occurred
Error: > Build failed because of webpack errors

System information

System macOS Catalina 10.15.3
node 12.8.0
npm 6.10.3
next 9.3.3
next-optimized-images 2.5.6

Additional context

with next-optimized-images 2.5.5 everything ok, an error occurs in styles files with background images

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 1
Comments: 16 (3 by maintainers)

Most upvoted comments

Hi @xeniajensen This is a slightly different issue and has to do with the dynamic require.

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 ../public/images/${imgName}, it applies the loaders to all images within that folder, regardless of their extension since webpack does not know which extensions the imgName variable can have.

I think there are two solutions:

If all the images in imgName have the same extension, you could move the extension out of the variable: require(`../public/images/${imgName}.jpg?...`)
You can create multiple directories and move the images into subdirectories. E.g. move all svg files into a icons directory, background images into backgrounds, thumbnails, etc… This also has the advantage, that your query will only get applied on the images you need it to be applied and not just on all you have (regardless if they are really used in this size or not).

You can read more about it here: https://webpack.js.org/guides/dependency-management/#require-with-expression

cyrilwanner on May 4, 2020

I’m very sorry that this version broke your builds. I just published v2.5.7 which should hopefully fix them again. Can you please verify that?

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 @zeit/next-sass plugin anymore.

cyrilwanner on Apr 2, 2020

Hi @cyrilwanner That makes a lot of sense! Thanks for taking the time to give a thorough explanation. I went with option number 1 and my console warnings are gone. Thanks - and apologies for re-opening the ticket when it wasn’t actually related after all 😃

xeniajensen on May 5, 2020

@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 on Apr 5, 2020