Broken in NextJS 11.0

[tm1000]

After upgrading to NextJS 11 the following errors are printed and the site never loads.

3|server  | error - ./src/server/components/Footer/facebook.svg
3|server  | TypeError: unsupported file type: undefined (file: undefined)

[tm1000]

@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.

[SrShark]

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'
  ]
}

[quypb]

Same issue with me.

[364734461]

me too

[cpv123]

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.

[thinceller]

Next.js 11 supports static image imports.
vercel/next.js#24993

[tm1000]

I haven't been able to test yet but does that work with gif and svg?

[cpv123]

@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.

[arefaslani]

Yesterday I played a little bit with assets module, but I had problems both with inline and resource types. It would be nice if we can pair to release next major version 🙂

[jnv]

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

[tm1000]

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]

[funkeeflow]

Same issue for me. I have problems importing svgs as markup not image with @svgr.
It worked with NextJs 10x but upgrading to NextJs 11 gives me the above error message using webpack 5.
error - ./src/assets/svg/logo.svg
TypeError: unsupported file type: undefined (file: undefined)

Already tried this hint here gregberge/svgr#551 (comment)
but with no luck so far.

[exeptionerror]

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

[chris-erickson]

I think this is related, but for me all my images were inlining base64 on Next.js 11.0.1. I set this option and I'm back to where I started.

{ 
  esModule: true, 
+  inlineImageLimit: false
}

EDIT: Well it "works" but when deployed the images are extremely small white squares... 🤔

[pkawula]

I have similiar issue when changed from next 10.2.0 to next 11.0.1
Importing images as import MyImage from "../public/images/image.png" and then using it in <img src={MyImage} /> is not showing image but if you look into the source after next compiles the base64 path opened in new tab shows only small white square

[correttojs]

you can set the next.config

images: {
            disableStaticImages: true,
        },

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

[cslz4]

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."

[bytedance-training]

you can set the next.config

images: {
            disableStaticImages: true,
        },

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

not working

[belgattitude]

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

[jrmyio]

you can set the next.config

images: {
            disableStaticImages: true,
        },

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

Isn't this an all or nothing type of solution?

[jorrit]

Am I right that it is possible to replace next-images with next v11's static images when you replace:

import img from './img.png';

<img src={img} />

with

import img from './img.png';

<img src={img.src} />

Seems to work for me.

[Webbrother]

The same issue for next@11.1.2

[panghaoyuan]

The same issue for next@11.1.2

<img
  src={require("@img/activityModal/assessment.png")
/>

and

// next.config.js
images: {
    disableStaticImages: true,
},

not working

[tykees]

Anyway, the issue continue in 2022, lol!

[donalffons]

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.

[mooijtech]

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

const withImages = require("next-images")

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

[SparrowMike]

Has anyone managed to find a workaround?

Setting disableStaticImages: true in my config broke my background-image imports within less

[blackmad]

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.