App runs in dev but not after build + preview
I have a Nuxt 3 app that runs okay in dev mode but when I build it and use npx serve to take a look, I get a blank screen with this error in the console:
I don't know if there is a way to debug this thoroughly so I can understand what component is triggering this behavior, does anyone know?
7 Replies
Hi @thelinuxlich. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The error you’re seeing—
Instead of using
The error message points to a problem with how a component is being defined or imported. This can sometimes be caused by: - Using a component or library that is not compatible with SSR or the production build. - Incorrect or missing exports in a custom or third-party component. - Issues with how dependencies are bundled or tree-shaken in production. To debug: - Check your build output for warnings or errors. - Try to identify which component is causing the issue by commenting out components or pages and rebuilding. - Ensure all your dependencies are compatible with Nuxt 3 and SSR. 3. Known Issues and Workarounds
There are reports of similar issues where certain features or plugins work in dev but fail in production, sometimes due to differences in how modules are bundled or how dynamic imports are handled. For example, issues with async components, dependency injection, or certain plugins can cause runtime errors only after build Nuxt 3.16.0 build and run preview error 500, inject doesn't work in component loaded via defineAsyncComponent. - If you are using async components or third-party libraries, try replacing them with static imports to see if the issue persists. - If you recently upgraded Nuxt or a dependency, try downgrading to a previous version to check if the issue is version-specific. 4. Check for Incorrect Usage in Templates
Sometimes, using
- Use
Uncaught TypeError: isFunction is not a function at defineComponent—after building and previewing your Nuxt 3 app, but not in development, suggests a problem that only manifests in the production build. This is a common scenario in Nuxt 3, where some issues are masked in dev mode but surface after building.
Based on the knowledge sources, here are some steps and considerations:
1. Use the Correct Preview CommandInstead of using
npx serve, you should use the Nuxt preview command to serve your built app. After running nuxt build, use:
or
This ensures the app is served in a way compatible with Nuxt’s output, as npx serve is a generic static file server and may not handle server-side rendering or dynamic routes correctly. The preview command starts a server to preview your application after the build and loads your .env file into process.env for convenience in preview mode Nuxt Preview Command.
2. Debugging the ErrorThe error message points to a problem with how a component is being defined or imported. This can sometimes be caused by: - Using a component or library that is not compatible with SSR or the production build. - Incorrect or missing exports in a custom or third-party component. - Issues with how dependencies are bundled or tree-shaken in production. To debug: - Check your build output for warnings or errors. - Try to identify which component is causing the issue by commenting out components or pages and rebuilding. - Ensure all your dependencies are compatible with Nuxt 3 and SSR. 3. Known Issues and Workarounds
There are reports of similar issues where certain features or plugins work in dev but fail in production, sometimes due to differences in how modules are bundled or how dynamic imports are handled. For example, issues with async components, dependency injection, or certain plugins can cause runtime errors only after build Nuxt 3.16.0 build and run preview error 500, inject doesn't work in component loaded via defineAsyncComponent. - If you are using async components or third-party libraries, try replacing them with static imports to see if the issue persists. - If you recently upgraded Nuxt or a dependency, try downgrading to a previous version to check if the issue is version-specific. 4. Check for Incorrect Usage in Templates
Sometimes, using
this in templates (e.g., this.variables.appMenu) can cause issues in Nuxt 3. Instead, you should reference variables directly (e.g., variables.appMenu) Nuxt 3 says "variables" is undefined.
If after these steps the issue persists, try to isolate the problematic component or dependency by gradually commenting out parts of your app and rebuilding. This can help you pinpoint the source of the error.
If you need more targeted help, providing a minimal reproduction (e.g., on StackBlitz or GitHub) can help others assist you more effectively.
Summary:- Use
nuxi preview or npm run preview instead of npx serve.
- Check for SSR-incompatible code or dependencies.
- Debug by isolating components.
- Watch for known issues with async components or dependency injection in production.
If you have more details or a reproduction, feel free to share for more specific guidance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@159175656083554304> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
using
nuxi preview gives the same outputPerhaps it's coming from a 3rd-party library?
That seems to be the case for some people on Google.
e.g. https://github.com/vuejs/core/issues/10429
I think so
problem is how to debug this in a complex app, I wish we could see how the components are being loaded, but it looks so black box
was able to find the dated dependencyu
but what a hell of a experience lol
use php then
Calm down fanboy