Open tm1000 opened 3 years ago
@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.
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'
]
}
Same issue with me.
me too
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.
Next.js 11 supports static image imports. https://github.com/vercel/next.js/pull/24993
I haven't been able to test yet but does that work with gif and svg?
@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.
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 🙂
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
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]
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 https://github.com/gregberge/svgr/issues/551#issuecomment-839772396 but with no luck so far.
All Possible working solution added [Solved] Nextjs: TypeError: unsupported file type: undefined after update to v.11
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... 🤔
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
you can set the next.config
images: {
disableStaticImages: true,
},
https://nextjs.org/docs/basic-features/image-optimization#disable-static-imports
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."
you can set the next.config
images: { disableStaticImages: true, },
https://nextjs.org/docs/basic-features/image-optimization#disable-static-imports
not working
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
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?
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.
The same issue for next@11.1.2
The same issue for next@11.1.2
<img
src={require("@img/activityModal/assessment.png")
/>
and
// next.config.js
images: {
disableStaticImages: true,
},
not working
Anyway, the issue continue in 2022, lol!
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.
It works if you edit your next.config.js
to:
const withImages = require("next-images")
module.exports = withImages({
images: {
disableStaticImages: true
}
})
Has anyone managed to find a workaround?
Setting disableStaticImages: true
in my config broke my background-image imports within less
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.
After upgrading to NextJS 11 the following errors are printed and the site never loads.