My next/image just flat out refuses to display

[samuelhulla]

Run next info (available from version 12.0.8 and up)

    ~/Coding/portfolio    feat/parallax !4 ?1  yarn next info                                                  ✔  17.4.0   13:04:36  
yarn run v1.22.17
warning ../package.json: No license field
$ /Users/samuel/Coding/portfolio/node_modules/.bin/next info
/bin/sh: pnpm: command not found

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:29:10 PST 2021; root:xnu-8019.61.5~1/RELEASE_ARM64_T8101
    Binaries:
      Node: 17.4.0
      npm: 8.3.1
      Yarn: 1.22.17
      pnpm: N/A
    Relevant packages:
      next: 12.0.8
      react: N/A
      react-dom: 18.0.0-rc.0
✨  Done in 0.85s.

# note not sure why it says react: N/A but that's just prob cause I used yarn instead of installing pnpm.
# The react version in package.json is same as the `react-dom` version, ergo 18.0.0-rc.0

What version of Next.js are you using?

12.0.8

What version of Node.js are you using?

17.4.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

Hey, I'm using the upcoming Next.js 12 in combination with the release candidate for React 18.

There is however a weird issue, where my images just flat out refuse to display, even though they seemed to be served correctly and next/image is according to the documentation already supported in Next.js 12 in Combination with React 18

The issue is farily simple - I've tried importing images via next/image compoent, yet they fail to display.

In my index.server.tsx:

import type { NextPage } from 'next'
import Image from 'next/image'
import staticImage from '../public/background.png'

const Home: NextPage = () => {
  return (
    <section>
      <Image src={staticImage} alt="Staticly served background" />
      <p>this is fucked</p>
      <Image src="/background.png" layout="fill" alt="Pls work" />
    </section>
  )
}

export default Home

Yet, the images just flat out refuse to show:

I've tried the following:

1. Import the image staticly as recommended by the documentation (see first Image import in the example above)
2. Import the image via URL (see the second image import in the example above)
3. Deploy the application to vercel (as I presumed given this is experimental server-side streaming, the images might need to be served via Edge Network to display and fail on dev)
4. Import the image via a Test.client.tsx component, to enforce it's not an issue with SSR stream / Server component.

None of these however worked

Expected Behavior

I'd expect the images would display.

To Reproduce

You can view the repository I tested this on here:

https://github.com/samuelhulla/portfolio/tree/feat/parallax (branch feat/parallax)

Thank you in advance. As of note, I previously did have issue with my next images not showing and then they just simply started working nowhere out of nowhere, so I'm unsure if I'm doing anything wrong, this is some bug, or just a caching issue.

[huozhi]

Hi @samuelhulla I found you're using pages/_app.server.tsx, custom app as server component is not supported in 12.0.8 but will be supported later soon.
In short term you can change it back to pages/_app.tsx and it should work.

In the future versions we'll support custom _app.server as server component, with another signature form of _app component:

// _app.server.tsx
export default function App({ children } : { children: React.Node }) {
  return children
}

I'd recommend you to use custom _app without .server suffix for now, we'll announce the change of custom _app in server component until it's ready in code and document later

[samuelhulla]

Hey @huozhi.

You are correct regarding _app.server.tsx, as that was an oversight on my part while I was tinkering / testing. Regardless, this sadly however still does not fix the issue for me. As the image still doesn't show. Could you please check the repository and see if you can find anything else wrong with it? I've comitted the latest changes with the renamed _app.tsx

[huozhi]

Seems there's still a issue when having reactStrictMode: true in next config. Can you try again with removing it? I'll keep investigate it.

[samuelhulla]

@huozhi

I did and now I get the following error:

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './package.json' is not defined by "exports" in /Users/samuel/Coding/portfolio/node_modules/react/package.json
    at new NodeError (node:internal/errors:371:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:429:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:703:3)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.mod._resolveFilename (/Users/samuel/Coding/portfolio/node_modules/next/dist/build/webpack/require-hook.js:179:28)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at getPackagePath (/Users/samuel/Coding/portfolio/node_modules/next/dist/build/webpack-config.js:548:41)
    at Object.getBaseWebpackConfig [as default] (/Users/samuel/Coding/portfolio/node_modules/next/dist/build/webpack-config.js:564:9) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

node -v: v17.4.0

What's even weirder, after I re-added it back I can no longer start the app.

After further investigation what's even weirder, i tried changing my node version via nvm use 16 and now it actually did start, but with the following warning:

node -v: v16.13.2

yarn run v1.22.17
warning ../package.json: No license field
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

warn  - You are using the experimental Edge Runtime with `concurrentFeatures`.
warn  - You have experimental React Server Components enabled. Continue at your own risk.
(node:94315) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/samuel/Coding/portfolio/node_modules/react/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

warn - No utilities were generated there is likely a problem with the `content` key in the tailwind config. For more information see the documentation: https://tailwindcss.com/docs/content-configuration
wait  - compiling...
event - compiled client and server successfully in 1198 ms (127 modules)
wait  - compiling...
event - compiled successfully in 29 ms (99 modules)
wait  - compiling /_error (client and server)...
wait  - compiling...
event - compiled client and server successfully in 50 ms (128 modules)
warn  - using beta Middleware (not covered by semver) - https://nextjs.org/docs/messages/beta-middleware
wait  - compiling / (client and server)...
wait  - compiling...
event - compiled client and server successfully in 431 ms (251 modules)
wait  - compiling...
event - compiled successfully in 174 ms (106 modules)
wait  - compiling / (client and server)...
wait  - compiling...
event - compiled client and server successfully in 83 ms (247 modules)
wait  - compiling...
event - compiled successfully in 151 ms (101 modules)
wait  - compiling...
event - compiled client and server successfully in 112 ms (222 modules)

This however did fix the issue, but either way, something seems very wrong with this repo setup.

[huozhi]

@samuelhulla That's a known issue on react side, likely will be fixed in next rc version. I'm using the node 14 it works for me so far. Could you try to downgrade the node version?

[samuelhulla]

@huozhi Yeah, node@14 does work on dev without any warnings. As to your personal recommendation, would you say it's better to go with node16 with a warning or node14 without one?

[huozhi]

It's up to you, I think once react make it compatible for new node versions you're able to switch versions freely

[samuelhulla]

Alright, thanks a lot for the help. Unless there's something else you'd like to add you can consider this issue closed.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

[huozhi]

Hi we fixed the issue with strict mode on canary now, you can have reactStrictMode: true with next/image in server components at the same time now