Description
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/sweet-nova-x2vydg
To Reproduce
Steps to Reproduce:
- Set up a Next.js project with Turbopack by including the dependencies as described in the package.json below.
- Add a basic useRouter hook usage in any component to trigger navigation (e.g., useRouter in a page or component).
- Try to run the development server using npm run dev or next dev --turbopack -H 0.0.0.0.
- Observe the error occurring during the development server startup or when interacting with routing/navigation features.
Current vs. Expected behavior
Current Behavior:
-
Turbopack throws a panic due to alias resolution errors.
The following error appears in the logs:Panic: panicked at turbopack/crates/turbopack-core/src/resolve/alias_map.rs:203:13: AliasMap::lookup must not be called on alternatives, received Alternatives([Dynamic, Constant("null")])
-
Dynamic imports and
useRouter
fromnext/navigation
seem to trigger this error. -
The server crashes or hangs with the error preventing any further development.
Expected Behavior:
- The application should function as expected, allowing navigation using
useRouter
fromnext/navigation
and handling dynamic imports correctly. - No errors should occur in the console or browser, and dynamic imports and alias resolution should work seamlessly.
- The
npm run dev
ornext dev --turbopack -H 0.0.0.0
command should start the server without triggering a panic in Turbopack. - The error should not appear when navigating between pages or using dynamic imports in the project
### Provide environment information
```bash
Operating System: Fedora Linux
Node.js Version: v22.11.0
npm Version: 10.9.0
npx Version: 10.9.0
React Version: 18.3.1
React DOM Version: 18.3.1
Next.js Version: 15.0.3
Turbopack Version: (Should match with Next.js version)
Package Manager: npm
Which area(s) are affected? (Select all that apply)
create-next-app
Which stage(s) are affected? (Select all that apply)
next dev (local), next build (local), Vercel (Deployed)
Additional context
The error seems to be related to Turbopack's alias resolution system, potentially with dynamic and constant alias resolution conflicts.
- The issue appears when trying to use features like useRouter from next/navigation or dynamic imports.
I am using Next.js with the --turbopack flag for bundling.
Possible Solutions or Workaround:
- Check if the error is caused by a combination of dynamic imports and aliasing in Turbopack.
- Consider switching back to Webpack if the issue persists, as Turbopack is still under active development.
-
- Investigate if certain conflicting dependencies (like React packages or versions) might be contributing to the error.
-
The issue appears to be related to how Turbopack handles dynamic imports and alias resolution, which may involve some conflicting configurations.
-
It might be related to the use of constants and dynamic variables within the project.
-
I'm using Next.js 15.0.3 with the --turbopack flag enabled for bundling.
-
I have also confirmed that my project uses React 18.3.1 and React-DOM 18.3.1, which might be relevant to the problem.
-
The issue may be occurring specifically with the newer versions of Turbopack, which is under active development, and it may not have stable handling for certain dynamic import patterns.
Dependenices
"dependencies": {
"@hookform/resolvers": "^3.9.1",
"@radix-ui/react-accordion": "^1.2.2",
"@radix-ui/react-avatar": "^1.1.1",
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-dropdown-menu": "^2.1.2",
"@radix-ui/react-icons": "^1.3.1",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-switch": "^1.1.1",
"@radix-ui/react-toast": "^1.2.2",
"@radix-ui/react-tooltip": "^1.1.3",
"@tanstack/react-table": "^8.20.5",
"axios": "^1.6.5",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"firebase": "^11.1.0",
"framer-motion": "^11.13.5",
"input-otp": "^1.4.1",
"js-cookie": "^3.0.5",
"lucide-react": "^0.454.0",
"next": "^15.0.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hook-form": "^7.53.1",
"react-hot-toast": "^2.4.1",
"react-router-dom": "^6.28.0",
"recharts": "^2.13.3",
"sonner": "^1.7.1",
"tailwind-merge": "^2.5.4",
"tailwindcss-animate": "^1.0.7",
"zod": "^3.23.8"
}
Dev Dependencies
"devDependencies": {
"@eslint/js": "^9.14.0",
"@types/js-cookie": "^3.0.6",
"@types/node": "^20.17.6",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8.57.1",
"eslint-config-next": "15.0.2",
"eslint-plugin-react": "^7.37.2",
"globals": "^15.12.0",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5",
"typescript-eslint": "^8.14.0"
}```