search

twopluszero / next-images

Import images in Next.js (supports jpg, jpeg, svg, png and gif images)
MIT License
948 stars 67 forks source link

1.4.0 broken when used with custom CSS webpack config (e.g. next-css plugin) #34

Closed gavinsharp closed 4 years ago

gavinsharp commented 4 years ago

Our Next app still uses next-css (despite built-in CSS support as of 9.2) because of some legacy requirements and subtle differences in how the two behave (next-css allows imports of CSS outside of _app.js).

Upgrading to 1.4.0 of next-images broke our app:

$ next build && next export

Failed to compile.

./node_modules/slick-carousel/slick/slick-theme.css
ModuleParseError: Module parse failed: Unexpected character '' (1:7)
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
    at build (*/node_modules/next/dist/build/index.js:12:900)

slick-theme.css has image imports.

This change https://github.com/twopluszero/next-images/commit/211f6649d3af3257a83c5d16ccf4b46e096ae87c#diff-168726dbe96b3ce427e7fedce31bb0bc appears to assume Next's built-in CSS support is always present, but that isn't necessarily the case (depending on Next config). Backwards compatibility with custom configs is explicitly mentioned in the 9.2 post:

This new feature is fully backwards compatible. If you are using @zeit/next-css or other CSS related plugins the feature is disabled to avoid conflicts.

gavinsharp commented 4 years ago

It is obviously annoying to try to chase compatibility with custom configs, so I feel like the only option for this is WONTFIX (which I would be fine with, we plan to stop using next-css as soon as we can), or reverting that change in 1.4.0 (not sure if it is just an optimization or if it was fixing a bug).

sks-2410 commented 4 years ago

@gavinsharp Feel you, bro. I wasted my whole day because of this.

msheakoski commented 4 years ago

For me, this error also occurs when using Next.js's built-in CSS support (no next-css package is installed). I am doing a simple <img src={require("path/to/image.png")}/> in a component. The errors do not happen on the previous version, 1.3.1.

Swapping out next-images for next-optimized-images (tested with 2.6.0) fixed the issue. It seems to do everything that next-images does, in addition to reducing image size.

arefaslani commented 4 years ago

@gavinsharp I'm super sorry for the late response. Thanks for reporting and helping to fix it. WIill check it right now.

edoantonioco commented 4 years ago

Version 1.3.1 works fine, 1 4.1 does not