vercel / vercel/next.js

`@radix-ui/react-icons` not working when `--turbopack` enabled ("...It might have been deleted in an HMR update.")

Open
#78,997 7 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

linear: turbopack Turbopack
Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Link to the code that reproduces this issue

https://github.com/gridaco/grida

To Reproduce
pnpm install
cd editor
pnpm dev # with --turbopack
# open http://localhost:3000/contact (this page uses radix-ui/react-icons) - or any other page that uses radix icons

with

  • "@radix-ui/react-icons": "1.3.2" (latest)
  • "next": "15.3.2" (latest)

turbopack enabled dev will raise

Error: Module [project]/node_modules/.pnpm/next@15.3.2_@opentelemetry+api@1.9.0_babel-plugin-macros@3.1.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/compiled/react/index.js [app-client] (ecmascript) was instantiated because it was required from module [project]/node_modules/.pnpm/@radix-ui+react-icons@1.3.2_react@19.1.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js [app-client] (ecmascript), but the module factory is not available. It might have been deleted in an HMR update.
pnpm why @radix-ui/react-icons
Legend: production dependency, optional only, dev only

editor@0.1.0 /..editor (PRIVATE)

dependencies:
@radix-ui/react-icons 1.3.2
Current vs. Expected behavior

import of icons should not affect runtime behaviour with or witout --turbopack

Provide environment information
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.2.0: Fri Dec  6 18:56:34 PST 2024; root:xnu-11215.61.5~2/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 22.15.0
  npm: 10.9.2
  Yarn: 1.22.19
  pnpm: 10.10.0
Relevant Packages:
  next: 15.3.2 // Latest available version is detected (15.3.2).
  eslint-config-next: 14.2.5
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.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

Anywhere I `import {...} from "@radix-ui/react-icons" will raise below error on runtime

👇

https://github.com/user-attachments/assets/1c2107d6-0193-4397-8eac-a6cf734ce97b

Cleaner example

https://github.com/user-attachments/assets/c79d1246-e1b3-4263-bdc3-02b456dfbe4d

Error: Module [project]/node_modules/.pnpm/next@15.3.2_@opentelemetry+api@1.9.0_babel-plugin-macros@3.1.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/compiled/react/index.js [app-client] (ecmascript) was instantiated because it was required from module [project]/node_modules/.pnpm/@radix-ui+react-icons@1.3.2_react@19.1.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js [app-client] (ecmascript), but the module factory is not available. It might have been deleted in an HMR update.

Runtime callstack

instantiateModule
[turbopack]/browser/runtime/base/dev-base.ts (155:11)
getOrInstantiateModuleFromParent
[turbopack]/browser/runtime/base/dev-base.ts (128:10)
esmImport
[turbopack]/shared/runtime-utils.ts (214:18)
[project]/node_modules/.pnpm/@radix-ui+react-icons@1.3.2_react@19.1.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js [app-client] (ecmascript)
.next/static/chunks/4aed3_@radix-ui_react-icons_dist_react-icons_esm_c5594b42.js (328:395)
<unknown>
[turbopack]/browser/runtime/base/dev-base.ts (201:21)
runModuleExecutionHooks
[turbopack]/browser/runtime/base/dev-base.ts (261:5)
instantiateModule
[turbopack]/browser/runtime/base/dev-base.ts (199:5)
getOrInstantiateModuleFromParent
[turbopack]/browser/runtime/base/dev-base.ts (128:10)
  • next build -> ok
  • next start -> ok
  • next dev -> ok
  • next dev --turbopack -> fails
    • server component -> fails
    • "use client" -> fails
Image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the failure in gridaco/grida with pnpm install, cd editor, and pnpm dev --turbopack, then compare it with the working non-Turbopack commands. Trace the runtime callstack through [turbopack]/browser/runtime/base/dev-base.ts and [turbopack]/shared/runtime-utils.ts, with @radix-ui/react-icons/dist/react-icons.esm.js as the triggering module. Done means importing Radix icons works in both server and client components under next dev --turbopack without the module-factory error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nextjs, react
Domain
build-system
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.