Broken in NextJS 11.0 #73

tm1000 · 2021-06-15T19:01:16Z

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)

The text was updated successfully, but these errors were encountered:

tm1000 · 2021-06-15T19:46:45Z

@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 · 2021-06-15T22:08:44Z

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 · 2021-06-16T01:55:43Z

Same issue with me.

kringt06 · 2021-06-16T03:42:40Z

me too

cpv123 · 2021-06-16T03:57:36Z

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 · 2021-06-16T04:10:05Z

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

tm1000 · 2021-06-16T04:12:13Z

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

cpv123 · 2021-06-16T04:28:38Z

@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 · 2021-06-16T08:14:04Z

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 · 2021-06-16T08:36:38Z

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 · 2021-06-16T18:10:01Z

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 · 2021-06-18T12:15:36Z

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 · 2021-06-21T03:55:25Z

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

chris-erickson · 2021-06-23T21:48:02Z

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 · 2021-06-28T13:48:55Z

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 · 2021-06-30T13:35:28Z

you can set the next.config

images: {
            disableStaticImages: true,
        },

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

cslz4 · 2021-07-05T13:12:25Z

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 · 2021-08-15T03:33:07Z

you can set the next.config
images: {
            disableStaticImages: true,
        },
https://nextjs.org/docs/basic-features/image-optimization#disable-static-imports

not working

belgattitude · 2021-08-18T13:07:36Z

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 · 2021-08-18T14:52:25Z

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 · 2021-10-18T09:43:23Z

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 · 2021-10-25T18:45:46Z

The same issue for next@11.1.2

panghaoyuan · 2021-11-12T03:25:12Z

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 · 2022-03-24T17:53:45Z

Anyway, the issue continue in 2022, lol!

donalffons · 2022-04-15T17:48:11Z

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 · 2022-04-18T11:16:55Z

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

const withImages = require("next-images")

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

SparrowMike · 2023-08-11T06:32:37Z

Has anyone managed to find a workaround?

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

blackmad · 2023-11-02T22:32:13Z

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.

tm1000 mentioned this issue Jun 16, 2021

[Sentry/Next.js] Not working with Webpack 5 on Next.js 11 getsentry/sentry-javascript#3688

Closed

filipedeschamps mentioned this issue Jun 21, 2021

Estruturação layout construction-01 filipedeschamps/tabnews.com.br#37

Merged

Digital-Coder mentioned this issue Jun 23, 2021

next.js 11 webpack 5 eslint prettier dev-launchers/dev-launchers-platform#482

Merged

karlhorky mentioned this issue Oct 26, 2022

Support Next.js 13? #88

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Broken in NextJS 11.0 #73

Broken in NextJS 11.0 #73

tm1000 commented Jun 15, 2021 •

edited

Loading

tm1000 commented Jun 15, 2021

SrShark commented Jun 15, 2021

quypb commented Jun 16, 2021

kringt06 commented Jun 16, 2021

cpv123 commented Jun 16, 2021

thinceller commented Jun 16, 2021

tm1000 commented Jun 16, 2021

cpv123 commented Jun 16, 2021

arefaslani commented Jun 16, 2021

jnv commented Jun 16, 2021

tm1000 commented Jun 16, 2021 •

edited

Loading

funkeeflow commented Jun 18, 2021

exeptionerror commented Jun 21, 2021

chris-erickson commented Jun 23, 2021 •

edited

Loading

pkawula commented Jun 28, 2021

correttojs commented Jun 30, 2021

cslz4 commented Jul 5, 2021

bytedance-training commented Aug 15, 2021

belgattitude commented Aug 18, 2021 •

edited

Loading

jrmyio commented Aug 18, 2021

jorrit commented Oct 18, 2021

Webbrother commented Oct 25, 2021

panghaoyuan commented Nov 12, 2021

tykees commented Mar 24, 2022

donalffons commented Apr 15, 2022

mooijtech commented Apr 18, 2022

SparrowMike commented Aug 11, 2023 •

edited

Loading

blackmad commented Nov 2, 2023

Broken in NextJS 11.0 #73

Broken in NextJS 11.0 #73

Comments

tm1000 commented Jun 15, 2021 • edited Loading

tm1000 commented Jun 15, 2021

SrShark commented Jun 15, 2021

quypb commented Jun 16, 2021

kringt06 commented Jun 16, 2021

cpv123 commented Jun 16, 2021

thinceller commented Jun 16, 2021

tm1000 commented Jun 16, 2021

cpv123 commented Jun 16, 2021

arefaslani commented Jun 16, 2021

jnv commented Jun 16, 2021

tm1000 commented Jun 16, 2021 • edited Loading

funkeeflow commented Jun 18, 2021

exeptionerror commented Jun 21, 2021

chris-erickson commented Jun 23, 2021 • edited Loading

pkawula commented Jun 28, 2021

correttojs commented Jun 30, 2021

cslz4 commented Jul 5, 2021

bytedance-training commented Aug 15, 2021

belgattitude commented Aug 18, 2021 • edited Loading

jrmyio commented Aug 18, 2021

jorrit commented Oct 18, 2021

Webbrother commented Oct 25, 2021

panghaoyuan commented Nov 12, 2021

tykees commented Mar 24, 2022

donalffons commented Apr 15, 2022

mooijtech commented Apr 18, 2022

SparrowMike commented Aug 11, 2023 • edited Loading

blackmad commented Nov 2, 2023

tm1000 commented Jun 15, 2021 •

edited

Loading

tm1000 commented Jun 16, 2021 •

edited

Loading

chris-erickson commented Jun 23, 2021 •

edited

Loading

belgattitude commented Aug 18, 2021 •

edited

Loading

SparrowMike commented Aug 11, 2023 •

edited

Loading