next-images: Broken in NextJS 11.0

Webpack 5 imples that CJS imports (require('...path/to/image.png')) no longer work.

Digging through the PR mentioned by @thinceller it looks like that static images import in Next.js is supported only for next/image component, since the built-in image loader returns an object instead of string: https://github.com/vercel/next.js/pull/24993/files#r641938269 – so if you want to load images for other uses (e.g. CSS-in-JS, link to og:url etc.) you will need to pull the src from the import, like this:

import testJPG from '../public/test.jpg'

console.log(testJPG.src)

By the way, any recommendations for automatic migraton CJS require to ES import syntax? I have found just this: https://github.com/agirton/webpack-babel-codemod

you can set the next.config

images: {
            disableStaticImages: true,
        },

https://nextjs.org/docs/basic-features/image-optimization#disable-static-imports

Next.js 11 supports static image imports. https://github.com/vercel/next.js/pull/24993

Same for me, but I’ve managed to get things working by not using this next-images plugin anymore. NextJS v11 seems to be handling things on its own now?

I’m importing a local PNG file and passing it as src to a NextJS Image component, and it’s working fine.

@Digital-Coder nice! what I find strange is that in NextJS 10 if you enable future webpack5 it works! So something between NextJS 10 and 11 with regards to webpack 5 is broken.

All Possible working solution added [Solved] Nextjs: TypeError: unsupported file type: undefined after update to v.11

it looks like that static images import in Next.js is supported only for next/image component

This doesnt seem to be the case. In my project I removed next-image from next.config.js and then installed nextjs 11 and it worked without changing to the Image component (im just using <image src= not <Image src (component))

I’m sure for your other cases its true though

@jnv is right. If you don’t append .src to tags then it will show up as [Object%20Object]

It works if you edit your next.config.js to:

const withImages = require("next-images")

module.exports = withImages({
    images: {
        disableStaticImages: true
    }
})

@tm1000 I’ve just tried with an SVG and it also works fine.

There is a small limitation for SVG, but I think it’s a limitation from NextJS in general. With the PNG images, I rendered a NextJS Image component and used the new placeholder="blur" prop. With the SVG I cannot use this prop (because it only supports jpeg,png,webp) and so with an SVG I would have to provide my own ‘blurred image’ using the blurDataURL prop.

For me the problem was that I was using git LFS for my images. The Vercel Github integration seemingly doesn’t support that. Rolling my own CI/CD using a Github action (which is configured to pull LFS) solves this for me.

This turned out to be my issue - turns out that vercel does support LFS in 2023, but you need to manually turn it on in the settings of your project.

For me the problem was that I was using git LFS for my images. The Vercel Github integration seemingly doesn’t support that. Rolling my own CI/CD using a Github action (which is configured to pull LFS) solves this for me.

disableStaticImages: true seems to work for me on nextjs 11.1.0… I had to clean the previous build first.

I don’t use next/image, so I can’t say if there’s side-effects

seems like if you have a Next Image component with “placeholder=blur” set and with a import static file as source, it makes component broken with “Error: Image with src “data:image/png;b…” has “placeholder=‘blur’” property but is missing the “blurDataURL” property.”

Same issue.

I have recently installed next@11.0.0 running on node.js v14.17.1

error - ./public/assets/images/logo.svg

TypeError: unsupported file type: undefined (file: undefined)

Error: Cannot find module 'C:\Users\Guido\Documents\GitHub\Guido\Redditum-Front\build\server\pages-manifest.json'

Require stack:
- C:\Users\Guido\Documents\GitHub\Guido\Redditum-Front\node_modules\next\dist\next-server\server\require.js
- C:\Users\Guido\Documents\GitHub\Guido\Redditum-Front\node_modules\next\dist\next-server\server\load-components.js
- C:\Users\Guido\Documents\GitHub\Guido\Redditum-Front\node_modules\next\dist\next-server\server\api-utils.js
- C:\Users\Guido\Documents\GitHub\Guido\Redditum-Front\node_modules\next\dist\next-server\server\next-server.js
- C:\Users\Guido\Documents\GitHub\Guido\Redditum-Front\node_modules\next\dist\server\next.js
- C:\Users\Guido\Documents\GitHub\Guido\Redditum-Front\node_modules\next\dist\server\lib\start-server.js
- C:\Users\Guido\Documents\GitHub\Guido\Redditum-Front\node_modules\next\dist\cli\next-dev.js
- C:\Users\Guido\Documents\GitHub\Guido\Redditum-Front\node_modules\next\dist\bin\next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.mod._resolveFilename (C:\Users\Guido\Documents\GitHub\Guido\Redditum-Front\node_modules\next\dist\build\webpack\require-hook.js:4:1855)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at getPagePath (C:\Users\Guido\Documents\GitHub\Guido\Redditum-Front\node_modules\next\dist\next-server\server\require.js:1:735)
    at requirePage (C:\Users\Guido\Documents\GitHub\Guido\Redditum-Front\node_modules\next\dist\next-server\server\require.js:1:1397)
    at loadComponents (C:\Users\Guido\Documents\GitHub\Guido\Redditum-Front\node_modules\next\dist\next-server\server\load-components.js:1:1289)
    at DevServer.findPageComponents (C:\Users\Guido\Documents\GitHub\Guido\Redditum-Front\node_modules\next\dist\next-server\server\next-server.js:77:296)
    at DevServer.renderErrorToHTML (C:\Users\Guido\Documents\GitHub\Guido\Redditum-Front\node_modules\next\dist\next-server\server\next-server.js:139:209) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\Guido\\Documents\\GitHub\\Guido\\Redditum-Front\\node_modules\\next\\dist\\next-server\\server\\require.js',
    'C:\\Users\\Guido\\Documents\\GitHub\\Guido\\Redditum-Front\\node_modules\\next\\dist\\next-server\\server\\load-components.js',
    'C:\\Users\\Guido\\Documents\\GitHub\\Guido\\Redditum-Front\\node_modules\\next\\dist\\next-server\\server\\api-utils.js',
    'C:\\Users\\Guido\\Documents\\GitHub\\Guido\\Redditum-Front\\node_modules\\next\\dist\\next-server\\server\\next-server.js',
    'C:\\Users\\Guido\\Documents\\GitHub\\Guido\\Redditum-Front\\node_modules\\next\\dist\\server\\next.js',
    'C:\\Users\\Guido\\Documents\\GitHub\\Guido\\Redditum-Front\\node_modules\\next\\dist\\server\\lib\\start-server.js',
    'C:\\Users\\Guido\\Documents\\GitHub\\Guido\\Redditum-Front\\node_modules\\next\\dist\\cli\\next-dev.js',
    'C:\\Users\\Guido\\Documents\\GitHub\\Guido\\Redditum-Front\\node_modules\\next\\dist\\bin\\next'
  ]
}