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

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

[danielberndt]

It’s an issue in the underlying repo. A PR is already prepared: https://github.com/JetBrains/svg-sprite-loader/pull/452.

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

[andresgutgon]

Let me check and I’ll close it : )