Segmentation fault occurs when loading PNG, JPG images

[angusryer]

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

1. In the terminal, run create-next-app myApp && cd myApp
2. Add a png or jpeg image to your project's public folder
3. In index.js, add <Image src="/yourImage.png" layout="fill" />
4. In the terminal, run npm run dev and wait until everything has compiled completely
5. From your browser, access localhost:3000
6. The image may to show up on the first load, so refresh the page

[nico-bachner]

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.

[angusryer]

@nico-bachner Great, thanks for connecting the issues! I'll keep an eye on both now to see which one gets continued.

Did this problem only start happening for you after the most recent big sur update (Ap;ril 27th I believe)? It did for me.

[ghost]

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 v16 and PostCSS. 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.

[angusryer]

I just downgraded node to 15.12.0, followed the exact steps as written in this bug report, and I am no longer getting the Seg Fault error when using the <Image> tag. 😅

[george1410]

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.

[hiramhuang]

Same issue here. M1, node v16.1.0, next v10.2.0. Work just fine on node v15.14.0.

[anonrig]

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

[wmpay]

I am having the same issue as well.

[rajtslegr]

I can reproduce this with Node v16.2.0.

[csandman]

I can reproduce this with Node v16.2.0.

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

[DavidChouinard]

Related issue: vercel/vercel#6243

[timneutkens]

Duplicate of #24421

[ashish-web-developer]

I am also having the same issue.

[nfaltir]

I had the same error segmentation fault while building a Nextjs App with Contentful. It's an image load issue.

Solution
I updated my nodejs from v16.0.0 to v16.13.1 and it's working!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.