Importing from css results in module.exports = "/_next/static/images..."

[ElForastero]

Imports in CSS files produce broken images.
Not only SVG but at least JPEG too.

next.config.js

const withOptimizedImages = require('next-optimized-images');
require('dotenv').config();

module.exports = withOptimizedImages({
  // next-optimized-images
  handleImages: ['jpeg', 'png', 'webp', 'svg'],

  // next
  env: {
    SITE_URL: process.env.SITE_URL,
  },
  webpack: config => {
    config.resolve.modules.push(__dirname);

    return config;
  },
});

Dependencies

 "next": "9.3.1",
 "next-optimized-images": "^2.5.5",
 "webp-loader": "^0.6.0"
 "imagemin-optipng": "^7.1.0",
 "imagemin-svgo": "^7.1.0",

Probbaly related to vercel/next.js#11164

[ElForastero]

Looks like the issue is related to next.js itself. I have tried regular url-loader and result was the same.

[durchanek]

Looks like the new CSS support broke this for all similar plugins: vercel/next.js#11164 (comment)

tl;dr the new CSS support does not require next-images, so next-images needs to be sure to only apply to JS files. There could be an option to "force on" for CSS files for legacy use cases.

[cyrilwanner]

Yes the cause was the newly introduced CSS support in nextjs.

But I was now finally able to overwrite the nextjs builtin image handling (only images, not the whole css/sass feature), which should hopefully solve all those errors.
Is it possible to try the canary version 2.5.8-canary.1 and check if everything works again?

[ivan-kleshnin]

Next-Images does work with new CSS modules in NextJS 🤷

[cyrilwanner]

It has already been fixed within the currently published version on npm, so I'll close this issue.

Also, I'm currently working on the next major version which is a complete rewrite and should resolve all other open issues (+ providing many new features). If you are interested, you can check out the canary branch.

[chrisLoPresti]

getting this same exact issue still :/ even after implementing changes here

[iwfan]

Encountered the same problem in nextjs v11 and next-optimized-images v2.6.2

[keadex]

Same problem in Nextjs 12. I've tried also the canary release but the issue still occurs.

[keadex]

I've created a pull request to fix the compatibility with Next.js >= 11 since the rule conditions are changed with the new Next.js release.

[wodka]

@cyrilwanner would be great to check the PR for NextJS >= 11 support