Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Importing next/image into app router middleware logs "attempted import error" only on Linux #54416

Closed
1 task done
Syphini opened this issue Aug 23, 2023 · 1 comment · Fixed by #54688
Closed
1 task done
Assignees
Labels
Image (next/image) Related to Next.js Image Optimization. locked Runtime Related to Node.js or Edge Runtime with Next.js.

Comments

@Syphini
Copy link
Contributor

Syphini commented Aug 23, 2023

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP Debian 5.10.179-1 (2023-05-12)
    Binaries:
      Node: 16.20.0
      npm: 9.8.1
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.20-canary.2
      eslint-config-next: 13.4.19
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App Router, Image optimization (next/image, next/legacy/image), Middleware / Edge (API routes, runtime), Operating System (Windows, MacOS, Linux)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/Syphini/nextjs-middleware-import-bug-repro

To Reproduce

  1. Create a new NextJS app using npx create-next-app@latest (the reproduction template was perfect)
  2. Create a middleware.js file with the following code:
import Image from "next/image";

export async function middleware(request) {

}
  1. Run the project with npm run dev
  2. Open the hosted page in a browser and see the following error
Attempted import error: 'preload' is not exported from 'react-dom' (imported as 'preload').

Import trace for requested module:
./node_modules/next/dist/esm/client/image-component.js
./node_modules/next/dist/esm/shared/lib/image-external.js
./node_modules/next/image.js

Describe the Bug

An unexpected import error is logged to console

Attempted import error: 'preload' is not exported from 'react-dom' (imported as 'preload').

Import trace for requested module:
./node_modules/next/dist/esm/client/image-component.js
./node_modules/next/dist/esm/shared/lib/image-external.js
./node_modules/next/image.js

In my case, I was incidently importing next/image through a third-party package that deeply nested it within
The bug doesn't appear to have much affect other than logging to console, but it's a bit of a spam on middleware reload

Expected Behavior

Can verify on Windows OS that this error is not logged to the console, and no other issues observed.
It appears to just log this error on Linux (at least on the Debian/Ubuntu versions I have tried)

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

@Syphini Syphini added the bug Issue was opened via the bug report template. label Aug 23, 2023
@github-actions github-actions bot added Runtime Related to Node.js or Edge Runtime with Next.js. Image (next/image) Related to Next.js Image Optimization. area: OS labels Aug 23, 2023
@styfle styfle self-assigned this Aug 29, 2023
@styfle styfle added kind: bug and removed bug Issue was opened via the bug report template. labels Aug 29, 2023
@kodiakhq kodiakhq bot closed this as completed in #54688 Aug 29, 2023
kodiakhq bot pushed a commit that referenced this issue Aug 29, 2023
…om` (#54688)

- Fixes #54416
- Related to #47659 

Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
@github-actions
Copy link
Contributor

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

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 12, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Image (next/image) Related to Next.js Image Optimization. locked Runtime Related to Node.js or Edge Runtime with Next.js.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants