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.

Sign up for GitHub

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

Jump to bottom

next 12: False-Positive Build Error: "Images cannot be imported within pages/_document.js" #30600

Closed
fabb opened this issue Oct 29, 2021 · 4 comments · Fixed by #30768
Closed

next 12: False-Positive Build Error: "Images cannot be imported within pages/_document.js" #30600

fabb opened this issue Oct 29, 2021 · 4 comments · Fixed by #30768
Assignees
@styfle
Labels
Image (next/image) Related to Next.js Image Optimization.
Milestone
12.0.3

Comments

@fabb
Copy link
Contributor

fabb commented Oct 29, 2021

What version of Next.js are you using?

12.0.1 and 12.0.2-canary.8

What version of Node.js are you using?

14.17.6

What browser are you using?

none

What operating system are you using?

macOS

How are you deploying your application?

none

Describe the Bug

During build, this error shows up:

Images cannot be imported within pages/_document.js. Please move image imports that need to be displayed on every page into pages/_app.js.
Read more: https://nextjs.org/docs/messages/custom-document-image-import
Location: pages/_document.tsx

Note that we do not use next/image. We use our own webpack plugin based on file-loader to import images and copy them to the build output. It works fine in next.js 11 with webpack 5. We even have set images.disableStaticImages:true in next.config.js (even though that should not be necessary since we later might use next/image for some images except the ones in _document.tsx).

Expected Behavior

It should compile fine.

To Reproduce

  • Add an image import to _document.tsx: import favicon16 from 'static_hashed/img/touch-icons/favicon-16x16.png'
  • Do not use next/image
  • Run next build or next dev

Note that we use the imported images for <Head><link rel="icon">:

Our webpack plugin should not be necessary to demonstrate the issue, but let us know if you need it.
@fabb fabb added the bug Issue was opened via the bug report template. label Oct 29, 2021
@timneutkens timneutkens added the Linting Related to `next lint` or ESLint with Next.js. label Oct 29, 2021
@stefanprobst
Copy link
Contributor

not sure if this should be tagged with area: ESLint - the message seems to come from webpack here:

https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack/config/blocks/images/messages.ts

@fabb
Copy link
Contributor Author

fabb commented Oct 29, 2021

It should definitely not be related to eslint because we have disabled next.js eslinting.

@styfle styfle added Image (next/image) Related to Next.js Image Optimization. kind: bug and removed bug Issue was opened via the bug report template. Linting Related to `next lint` or ESLint with Next.js. labels Nov 1, 2021
@styfle
Copy link
Member

styfle commented Nov 1, 2021 •
edited

It looks like this error was added in #28475

But it should probably respect disableStaticImages: true

I created PR #30768 to fix this 👍

@styfle styfle self-assigned this Nov 1, 2021
@styfle styfle mentioned this issue Nov 1, 2021
Merged
@kodiakhq kodiakhq bot closed this as completed in #30768 Nov 2, 2021
kodiakhq bot pushed a commit that referenced this issue Nov 2, 2021
@styfle
Fix incorrect _document.js error when disableStaticImages: true (#…
14841c9 
…30768)

Fixes #30600
@styfle styfle added this to the 12.0.3 milestone Nov 5, 2021
@balazsorban44
Copy link
Member

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.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 27, 2022
natew pushed a commit to natew/next.js that referenced this issue Feb 16, 2022
@styfle @natew
Fix incorrect _document.js error when disableStaticImages: true (v…
f802a4c 
…ercel#30768)

Fixes vercel#30600
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@styfle styfle

Labels
Image (next/image) Related to Next.js Image Optimization.
Projects
None yet
Milestone
12.0.3
Development

Successfully merging a pull request may close this issue.

Fix incorrect _document.js error when disableStaticImages: true vercel/next.js
5 participants
@fabb @styfle @timneutkens @balazsorban44 @stefanprobst