Enum in types.d.ts used in useState hook crashes turbopack

TijanaMazinjanin commented 1 week ago

Link to the code that reproduces this issue

https://github.com/TijanaMazinjanin/nextjs_enum_bug

To Reproduce

Clone the linked repository
pnpm install && pnpm run dev-turbo
Open localhost:3000

You will see turbopack crashing.

Current vs. Expected behavior

The code should work the same with or without the --turbo flag. However, it currently crashes when --turbo is enabled, while it runs as expected without it.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 15707
  Available CPU cores: 16
Binaries:
  Node: 22.6.0
  npm: N/A
  Yarn: N/A
  pnpm: 9.7.0
Relevant Packages:
  next: 14.2.16 // An outdated version detected (latest is 15.0.2), upgrade is highly recommended!
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.3
Next.js Config:
  output: N/A

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

Turbopack

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

next dev (local)

Additional context

When I define enum in any other file except types.d.ts it's working. Latest nextjs 15.0.2 has the same issue. Linux distributions also have this issue.

lfades commented 1 week ago

I updated to Next.js canary and Turbopack did a better job with the error log. However, importing an enum from a declaration file and using it as an actual value in JS is not valid:

import { useState } from "react"
import { Difficulty } from "@types" // This can't be a declaration file, it has to be an existing module.

export default function Home() {

  const [cat, setCat] = useState<Difficulty>(Difficulty.None);

  return <div>
    {cat}
  </div>
}

After updating to the latest canary, it throws an error even without turbo. The behavior in v14 where it seems to work is wrong imo.

timneutkens commented 5 days ago

We'll want to add a better error when trying to import .d.ts files that are not used as types only. enum is a runtime value and it's being used in that way in the example, which means it should be a .ts file.

vercel / next.js