`@radix-ui/react-icons` not working when `--turbopack` enabled ("...It might have been deleted in an HMR update.")
Nobody has claimed this yet.
- 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-> oknext start-> oknext dev-> oknext dev--turbopack -> fails- server component -> fails
- "use client" -> fails
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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