Subject: Persistent Build Error with Next.js on Firebase App Hosting

App Hosting
1

Hi everyone,

We’re running into a stubborn build error while trying to deploy our Next.js application to Firebase App Hosting, and we’re hoping the community might have some insights or suggestions.

Our Tech Stack:

  • Frontend: Next.js (version 15.2.3, as reported by the build)
  • Deployment: Firebase App Hosting
  • Development Environment: Project IDX

The Problem:

Our build consistently fails with a syntax error in a specific file, src/app/weer-dashboard/page.tsx. The error message is always:

Error: Expected ‘from’, got ‘g’ ,-[/home/user/studio/src/app/weer-dashboard/page.tsx:34:1] … (and the import trace) … Caused by: Syntax Error

This error points to a malformed import statement, specifically on line 34. However, even when we drastically simplify the content of this file, the error persists on what appears to be the same line number, suggesting the build process might not be correctly reflecting the actual file content or there’s a deeper issue with file interpretation.

Additionally, we’ve seen a “Could not find the module” error that seemed related to a nested workspace/workspace directory in the build path, which we’ve since addressed.

What We Have Tried:

  1. Initial Syntax Error Correction: We identified an initial syntax error (a missing closing curly brace) in a different file (src/actions/rampen.ts) and corrected it.
  2. Metadata Export Fix: We commented out a metadata export in a client component (src/app/premium/success/page.tsx) as it’s not allowed in Next.js.
  3. Refactoring with Suspense: We attempted to move the logic from src/app/weer-dashboard/page.tsx to a separate client component (src/components/weer-dashboard.tsx) and wrap it with <Suspense> to address potential server-side rendering issues with hooks like useSearchParams(). This attempt was hampered by issues with file writing/syncing in the environment.
  4. Adding export const dynamic = 'force-dynamic';: We added export const dynamic = 'force-dynamic'; to the top of src/app/weer-dashboard/page.tsx to force dynamic rendering and prevent pre-rendering issues.
  5. Reverting Commits: We attempted to revert commits to return to a previous state, but this reintroduced earlier errors.
  6. Deleting Nested Directory: We identified and deleted a nested workspace/workspace directory that appeared to be confusing the build process regarding the project root.
  7. Clearing Cache and Reinstalling Dependencies: We deleted the local .next cache and ran npm install to ensure a clean build environment.
  8. Simplifying weer-dashboard/page.tsx: As a test, we replaced the entire content of src/app/weer-dashboard/page.tsx with minimal, correct code, but the same syntax error persists on what the build reports as line 34.

What Did Not Succeed:

Despite multiple attempts and various fixes, the build continues to fail with the same “Expected ‘from’, got ‘g’” syntax error in src/app/weer-dashboard/page.tsx. It seems the build process is not consistently reflecting the changes made to this file, or there’s an underlying issue with how the build environment interprets it.

What We Are Looking For From the Community:

  • Similar Experiences: Has anyone encountered a similar persistent syntax error during the build process with Next.js on Firebase App Hosting, especially one that seems unrelated to the actual file content?
  • Insights into Build Process: Any insights into the build process of Next.js on Firebase App Hosting, particularly regarding file synchronization, caching, or how the project root is determined, would be invaluable.
  • Troubleshooting Suggestions: Are there any other troubleshooting steps we could try from within the IDE or related to Firebase Hosting configuration that might address this kind of file synchronization/interpretation issue?
  • Workarounds: Any potential workarounds that could help us bypass this specific file’s build problem?

We are quite stuck on this and appreciate any help or guidance the community can provide.

Thanks in advance for your time and expertise!

1 Like
2

Can you share the full tsc or build log and relevant sections of that file?

3

This is exactly the most annoying part of the AI I’ve been going through. Its really so painful that even all the attempts by the AI to correct anything doesn’t seems to help and I don’t know what to do again. since yesterday

image
image591×803 38.3 KB

4

Hey awidbe,

This may be relevant for you.

5

So I just thought i should share this here it might help. After Google AI exhausted all options and my build keeps failing for two days straight, I simply went to log and copied the log on the google cloud console and shared with another popular AI not going to mention name and in 1 seconds, it told me what and what to do and I copied it to my firestore project and it thanked me for the detailed instruction.

It performed the abracadabra and it still failed. I copied the build log again and shared and return with a similar response but modified and I gave it to the AI on my project, it did it part again and the build became successful after 2+ days.

1 Like
6

Solved, basicly the approach from @awidbe , i created a simple prompt for another AI solution (extern), and copied the whole log file to analyse.It created a prompt for fixing, another attempt after the first one and the deployment worked again (as far as I can see).
The prompt was easy :
I created an application using Firebase Studio Prototyping (so with Vibe Coding). When I try to deploy, I keep getting errors. I’ve included the log file.
Can you help me write a prompt for the Vibe Coding AI that tells it exactly what to do to fix the issue?

1 Like
7

I’m glad that this helped you. Keep building and lets hope google AI would be more intelligent and accurate in debugging.

9

If this happens again, the best way to resolve it is to open up your Google Cloud Platform console and go to Cloud Build. Check the History tab for your app. All the error details that prevented the app from publishing will be available in the history log next to the failed event. 99 out of 100 times it’s a bug in the code that prevents it from publishing.

You can also check whether your app will publish before you hit the publish button by running the following in your command line terminal in Code mode.

npm run build

The same build messages that occur when you publish, will appear in the terminal.

1 Like
10

Hola. estoy con el mismo problema "no puedo publicar la app. aparentemente un erro de compilacion y Gemeni no lo esta solucionando. ejecute el npm run build y no tira errores. pero sigue sin publicar y el error de la app hosting parece ser siempre el mismo. alguien puede ayudarme a solucionar? hace dos dias que estoy intentando y nada. desde ya muchas gracias

1 Like
11

Hola @Noe_Fernando_Singh ,
El primer paso es enviar una solicitud de error mediante este enlace. Una vez enviada, puedes contactar con un miembro del equipo de Firebase Studio para obtener ayuda.

@jamesor es muy útil