Bolt.New Next.JS project Issues and White Screen

[Raspin247]

Describe the bug

I am using an agent in Claude.ai to help me code with Bolt.New as I am not a developer.

I have created three separate Next.JS projects (trying to code the app) that have found the same issues. The report below is from a new project that I decided to start clean to see if the same issues occurred from the start.

I have used so much of my monthly tokens that I had to stop trying to fix the issue, if there is any opportunity to refund my tokens I would really appreciate it so that I can continue my work once resolved.

Bolt.new WebContainer Bug Report

Issue Summary

Unable to initialize new Next.js project due to WebContainer configuration issues, resulting in multiple runtime errors and API connection failures.

Environment Details

• Platform: Bolt.new
• Project Type: Next.js
• Browser: Chrome (based on console messages)
• Date/Time: 18th November 2024

Error Messages

Primary Errors

1. WebContainer Navigation Error:
   TypeError: Cannot navigate to URL: https://zp1v56uxy8rdxsypat0ockcb9e1.local.credentialless.webcontainer-api.io/
   Copy
2. API Connection Errors:
   GET https://bolt.new/api/chats/30991108 403 (Forbidden)
   GET https://bolt.new/api/deploy/30991108 404 (Not Found)
   PUT https://bolt.new/api/chats/30991108 403 (Forbidden)
   POST https://bolt.new/api/chats/33734863 403 (Forbidden)
   Copy
3. Runtime Errors:
   Unchecked runtime.lastError: The message port closed before a response was received.
   Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
   Copy

Secondary Issues

• Module resolution failures
• Context warnings in blitz.d3acb9e1.js
• Resource preload warnings

Steps to Reproduce

1. Created new Next.js project in Bolt.new
2. Project initialization started automatically
3. Errors appeared in console immediately after project creation
4. Unable to proceed with development due to WebContainer issues

Expected Behavior

1. WebContainer should successfully initialize
2. Project should set up without API errors
3. Development environment should be accessible
4. Next.js project should be ready for development

Actual Behavior

1. WebContainer fails to navigate to local development URL
2. Multiple API calls return 403/404 errors
3. Runtime errors prevent proper project initialization
4. Development environment is inaccessible

Additional Context

• This appears to be a WebContainer configuration issue rather than a Next.js project issue
• The errors suggest problems with both the WebContainer initialization and API authentication
• The credentialless domain suggests potential security configuration issues

Impact

• Unable to proceed with development
• Project initialization blocked
• Development environment inaccessible

Attempted Solutions

• Cleaned project cache
• Updated project dependencies
• Implemented proper Next.js configuration
• Added environment variables

Attachments

Questions for Investigation

1. Is this a known issue with the WebContainer implementation?
2. Are there specific browser requirements or configurations needed?
3. Are there any temporary workarounds available?
4. Is this related to recent changes in the WebContainer API?

Contact Information

Rick Aspin
[email protected]
+1 604 203 9581

Priority Level

High - Blocking development work

Link to the blitz that caused the error

https://stackblitz.com/edit/bolt-nextjs-shadcn-ss6uja?file=.gitignore

Steps to reproduce

1. Created new Next.js project in Bolt.new
2. Project initialization started automatically
3. Errors appeared in console immediately after project creation
4. Unable to proceed with development due to WebContainer issues

Expected behavior

1. WebContainer should successfully initialize
2. Project should set up without API errors
3. Development environment should be accessible
4. Next.js project should be ready for development

Parity with Local

• I have run the project in my local machine and I could not reproduce the issue.

Screenshots

Platform

Browser name  = Chrome
Full version  = 128.0.0.0
Major version = 128
navigator.appName = Netscape
navigator.userAgent = Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36
performance.memory = {
  "totalJSHeapSize": 67003968,
  "usedJSHeapSize": 64115788,
  "jsHeapSizeLimit": 4294705152
}
Hash = d3acb9e1

Additional context

It took me a long time to realize that this was an issue from the very start of my first project, I decided to start with a clean second project with a more structured process but immediately saw the blanks white screen. I tried to resolve the issue with the help of my Claude.ai agent but time and tokens continued to disappear with a solution. I had to place the ticket in the end. I have tried to provide as much detailed information as possible but not being a developer I am trusting my agent.

I love Bolt.new and I am excitedly looking to add coding to my design and project management skills to create outstanding applications. I am not scared of fixing issues but this one just beat me out and I had to reach out for help. I really would appreciate if this is no fault of my own that my tokens spent trying to fix the issue cab be resolved.

I appreciate your help in this matter, please let me know if you need anything else.

I apologize that I checked the box above that I had run the app on my local computer but I only downloaded it and could not figure out how to test it.......my apologies, please don't hold this against me, I did try!

Cheers
Rick