next-images support for Next12.x

[varadan13]

Can someone help me understand if next-images is supported in Next12?

[arefaslani]

I have not tried it with Next12 unfortunately. Could you please try it and in case it doesn't, we can think of a fix.

[ESCxjl]

I have not tried it with Next12 unfortunately. Could you please try it and in case it doesn't, we can think of a fix.

have the same question, When loading the svg image in my project it gives the following error:

even if I add @svgr/webpack，it does`t work too. Can you help me?

"next": "12.3.1",
"next-images": "^1.8.4",

[alidcast]

here's part of my config that works @ESCxjl

const withSvg = config => {
  return {
    ...config, 
    webpack(config) {
      config.module.rules.push({
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ['@svgr/webpack'],
      })
      return config
    }
  }
}

const withImage = config => {
  return withImages({
    ...config, 
    fileExtensions: ["jpg", "jpeg", "png"]
  })
}

I do see warning about using invalid config property since this plugin requires it top-level

he root value has an unexpected property, fileExtensions, which is not in the list of allowed properties

[zargold]

The problem seems to be with this line of code:

if (isServer) {
  return `(require("next/config").default().serverRuntimeConfig.nextImagesAssetPrefix || '') + ${p}`;
}

next/config.default() is deemed undefined and you cannot get .serverRuntimeConfig of undefined.

I think that a workaround/temporary solution would be to pass the nextImagesAssetPrefix directly to the library (rather than try to access it off the serverRuntimeConfig it could be passed as an option/param to the "withImages" function.