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

Errors occurs when 'minimumCacheTTL' or 'icon.ico' are used with Turbopack #69330

Open
Enkratia opened this issue Aug 26, 2024 · 2 comments
Open
Labels
bug Issue was opened via the bug report template. Turbopack Related to Turbopack with Next.js.

Comments

@Enkratia
Copy link

Link to the code that reproduces this issue

https://github.com/Enkratia/css-reload-show-2

To Reproduce

  1. npm i

First error:

  1. npm run dev:turbo
  2. see error related with minimumCacheTTL (in terminal)

Second error:

  1. comment minimumCacheTTL in nextConfig.images (in next.config.mjs)
  2. npm run dev:turbo
  3. open http://localhost:3000/
  4. see error related with icon.ico (in browser)

Current vs. Expected behavior

  1. When i add minimumCacheTTL: 31540000000 to nextConfig.images it gives an error:
  • invalid value: integer 31540000000, expected u32 at line 54 column 34] {
    code: 'GenericFailure'

** Yes, minimumCacheTTL is not needed in dev mode, so i can just create 2 different next.config.mjs (for dev/prod mode), but this is working with webpack without any problems.
** minimumCacheTTL: 3154000000 is working fine (one zero less).
** It might be related to BigInt.

  1. When i add icon.ico in app (as it is written here https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons) - i get this error:

Processing image failed
unable to decode image data

Caused by:

  • Format error decoding Ico: The PNG is not in RGBA format!
  • The PNG is not in RGBA format!

Expected behavior - no errors (these errors doesn't occur when webpack is used)

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home Single Language
Binaries:
  Node: 20.10.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.6
  react: 18
  react-dom: 18
Next.js Config:
  output: standalone

Which area(s) are affected? (Select all that apply)

Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

** Actually my Operating System is Linux MInt 21 Cinnamon Edition x64, but when i use: "npx --no-install next info", - i am getting an error: "npm ERR! npx canceled due to missing packages and no YES option: ["next@14.2.6"]"

** node version: v21.7.2

@Enkratia Enkratia added the bug Issue was opened via the bug report template. label Aug 26, 2024
@github-actions github-actions bot added the Turbopack Related to Turbopack with Next.js. label Aug 26, 2024
@Enkratia Enkratia changed the title Errors occurs when minimumCacheTTL or icon.ico are used with Turbopack Errors occurs when 'minimumCacheTTL' or 'icon.ico' are used with Turbopack Aug 26, 2024
@samcx
Copy link
Member

samcx commented Aug 27, 2024

@Enkratia Thank you for submitting an issue!

I have shared this with the Turbopack team. We will be taking a look!

@bgw
Copy link
Member

bgw commented Aug 27, 2024

Large TTL Value

#69379 should fix the TTL issue by changing the u32 currently in use to a u64 (should support values up to 18446744073709551615).

Workaround: In the meantime, if you really want to set a TTL this large, just use u32::MAX, which is 4294967295. That should be sufficient for any practical purposes.

ICO Decode Error

This is because your icon.ico file technically isn't actually a valid ICO file!

$ file icon.ico
icon.ico: MS Windows icon resource - 1 icon, 256x256 with PNG image data, 256 x 256, 8-bit grayscale, non-interlaced, 32 bits/pixel

ICO files are required to be encoded with a RGBA/ARGB colorspace when using PNG image data:

The ability to read PNG images from ICO format images was introduced in Windows Vista.[7] A PNG image can be stored in the image in the same way as done for a standard Windows BMP format image, with the exception that the PNG image must be stored in its entirety, with its file header and must be in 32bpp ARGB format.[7]

-- https://en.wikipedia.org/wiki/ICO_(file_format)#PNG_format

This error comes from the image library we use:

While image-rs should be careful to only output valid ICO files with RGBA colorspace, it arguably should be more tolerant about what formats it accepts when decoding. We can work to upstream a change to image-rs, but that will take some time. I've created a backlog internal issue PACK-3221 for our team to track this.

Workaround: In the meantime, you should be able to encode your ICO file using RGBA colorspace, which should fix this issue, or you can save the file as a normal icon.png file instead of an icon.ico.

bgw added a commit that referenced this issue Aug 27, 2024
Fixes (part of) #69330

We were using a `u32` here instead of a `u64` for no good reason.

The workaround if you're encountering this is to just use `u32::MAX`
instead, which should be large enough for all practical purposes:
`4294967295`.

## Test Plan

Build turbopack in the next.js repo:

```
pnpm pack-next
```

Follow the repro in #69330:

```
git clone https://github.com/Enkratia/css-reload-show-2.git
# edit the package.json following the instructions from `pnpm pack-next` above
rm package-lock.json
pnpm i
pnpm dev --turbo
```

## Integration Testing?

There are some tests in
`test/integration/image-optimizer/test/index.test.ts`, but I didn't see
the obviously best way to test this, as most of those tests are looking
for errors by scanning stderr, and this is about not generating any
error.

Either way, I think this is very unlikely to regress.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. Turbopack Related to Turbopack with Next.js.
Projects
None yet
Development

No branches or pull requests

10 participants
@bgw @samcx @Enkratia and others