#next js never loads in dev mode with turobpack, i only see this forever ✓ Ready in 1096ms ○ Compil
1 messages · Page 1 of 1 (latest)
I can help with your Turbopack loading issue in Next.js development mode. This is a known issue that several users have reported.
The problem you're experiencing where the dev server shows "Ready" but gets stuck at "Compiling" is likely due to one of several causes:
- Lazy compilation behavior: Next.js with Turbopack uses lazy compilation, meaning it only compiles pages when they're requested. Try actually visiting your site at
localhost:3000in a browser to trigger compilation.
As mentioned in a GitHub issue: "The compiler is 'lazy', so you have to actually hit an endpoint for it to process it. Go to a browser, or from the CLI cURL, to localhost:3000 and that'll compile that page." Github Issue #66729
-
Compatibility issues: Turbopack might have compatibility issues with certain code patterns in your project. Common problems include:
- Top-level await statements in imported modules
- Certain module resolution patterns in monorepos
- Issues with PostCSS configurations
-
Potential workarounds:
- Try manually defining a port:
next dev -p 3001 --turbo - Revert to the standard webpack compiler:
next dev(without--turbo) - Check for top-level await statements in your code that might be causing issues
- Try manually defining a port:
If you continue experiencing problems, you might want to check your project for compatibility issues or consider using the standard webpack compiler until the Turbopack issues are resolved.
For more detailed debugging, you could try running with tracing enabled: NEXT_TURBOPACK_TRACING=1 next dev --turbo which will generate trace logs that can help identify the specific issue.
Would you like me to help you troubleshoot any specific aspects of this problem?
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
@stray falcon Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@stiff surge it works but / never loads only other endpoints
Let me check the knowledge base for you again. Give me one moment! :books:
Based on your follow-up, it sounds like you're experiencing a specific issue with Turbopack where the root route ("/") fails to load while other routes work correctly. This is a known issue that has been reported in several GitHub issues.
There are several potential causes for this specific behavior:
-
Module resolution issues: Turbopack has stricter filesystem access than webpack by default, which can cause problems with imports, especially in monorepos or with certain module structures.
As noted in Github Issue #71886, Turbopack has different module resolution behavior that can cause root route issues.
-
Parallel routes or catch-all routes: There's a known issue with Turbopack not correctly handling catch-all segments in nested route groups.
According to Github Issue #67045, this can cause routing problems where the wrong page is displayed.
-
GraphQL or other API-related issues: Some users have reported problems specifically with GraphQL when using Turbopack in development mode.
As mentioned in Github Issue #72573, "it only happens on development mode with turbopack."
Possible solutions:
- Check if you have any imports that might be causing issues with Turbopack's stricter module resolution
- Try adding a simple
page.tsxfile in your root route with minimal code to see if it loads - If you're using a monorepo structure, you might need to configure Turbopack's root and resolveAlias settings:
// next.config.js
const nextConfig = {
experimental: {
turbo: {
resolveAlias: {
// Add your aliases here
},
},
},
};