next.js: Segmentation fault occurs when loading PNG, JPG images
What version of Next.js are you using?
10.1.4-canary.17
What version of Node.js are you using?
16.0.0
What browser are you using?
Chrome 90.0.4430.85
What operating system are you using?
macOS (Apple M1 w/ Big Sur 11.3)
How are you deploying your application?
Local only
Describe the Bug
Starting from a fresh create-next-app, I place a PNG or JPG image into the public folder, then add a <Image src="/myPngImage.png" layout="fill" /> to my index.js.
After the hot-reload completes, the dev server quits and gives me this error:
zsh: segmentation fault npm run dev
Expected Behavior
Image should appear and dev server should continue to run.
To Reproduce
- In the terminal, run
create-next-app myApp&& cd myApp - Add a
pngorjpegimage to your project’s public folder - In
index.js, add<Image src="/yourImage.png" layout="fill" /> - In the terminal, run
npm run devand wait until everything has compiled completely - From your browser, access
localhost:3000 - The image may to show up on the first load, so refresh the page
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 13
- Comments: 15 (4 by maintainers)
I’m having the same issue. I’m using Node 16, with the latest next.js and on the M1 MacBook pro. Just wanted to comment to attract more attention to this issue, since I don’t want to downgrade my Node to 16 (I’m depending on 16).
Same issue here. M1, node v16.1.0, next v10.2.0. Work just fine on node v15.14.0.
FWIW I’m seeing the same issue on an M1 Mac when using the
<Image>tag on Node 16 (Next.js 10.2.0). Downgrading Node to 15.14.0 fixes the issue.The issue was already reported before at #24421 and it was closed with #24546 but the bug is still there, at least for me. The problem is related with
next/image,Apple M1,Node v16andPostCSS. I don’t think this is related with the macOS Big Sur update because that bug was reported a couple of days before the release.Duplicate of #24421
Same here, also happening on Node v16.2.0
EDIT: I was also able to work around this by downgrading to node v15.14.0
I can reproduce this with Node v16.2.0.
I am having the same issue as well.
I think we might be experiencing the same issue. It seems we filed our bug reports simultaneously 😅.
For maintainers reading this: issue #24565 and this issue might concern the same bug and should probably be viewed together.