Latest NextJS (10.1.4-canary.6) with Webpack 5 enabled fails: error - ./some-icon.svg?sprite TypeError: Cannot read property 'version' of undefined

[Andrés]

What?

Hi, I'm trying to update my NextJS project from 10.0.5-canary.3 to 10.1.4-canary.6. And I'm enabling Webpack 5.

The feature that I'm using from next-optimized-images is the SVG sprite generation.

After remove node_modules and start Next project again in dev mode I see this error on the console:

error - ./components/Footer/logo-footer.svg?sprite
TypeError: Cannot read property 'version' of undefined
event - build page: /next/dist/pages/_error

Did anyone found this problem?

This is my next.cofig.js

const withPlugins = require('next-compose-plugins')
const optimizedImages = require('next-optimized-images')
const nextConfig = {
  distDir: 'next-server',
  future: { webpack5: true },
}

module.exports = withPlugins(
  [
    [
      optimizedImages,
      {
        imagesFolder: 'images',
        imagesName: '[name]-[hash].[ext]',
        handleImages: ['svg', 'png'],
        svgo: {}
      }
    ]
  ],
  nextConfig
)

Thanks

[Andrés]

This plugin is changing webpack configuration right?
Could be that the way this plugin is changing webpack config is not compatible with webpack 5 vercel/next.js#23143 ?

I tried v3 of this plugin but I can't use because sprite feature is not ready there

[Andrés]

Meanwhile my solution is to include webpack 4 in my package.json dependencies and set future: { webpack5: false }, in my next.config.js

[Daniel]

It's an issue in the underlying repo. A PR is already prepared: JetBrains/svg-sprite-loader#452.

You can use patch-package to apply this fix locally in case the PR isn't merged yet.

[Daniel]

svg-sprite-loader 6.0.6 has been released with a fix for the error, so I believe should mean that this issue can be closed, right?

[Andrés]

Let me check and I'll close it : )