Nuxt layers and deployment on Vercel/Netlify fails because of missing `tsconfig.json`
Hello all, I'm currently learning to use layers, and it's all great, but I have an issue when trying to deploy on Vercel or Netlify.
Basically, I have a bun monorepo with a Nuxt app extending a Nuxt "base" layer. The app was created with 'bunx nuxi@latest init myapp' and the layer was created with 'bunx nuxi@latest init -y layer base'. When trying to deploy the app, I get this error: "[vite:vue] failed to resolve "extends":"./.playground/.nuxt/tsconfig.json" in /opt/build/repo/packages/base/tsconfig.json"
2 Replies
Hi @lambda0xff. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
This issue is related to Nuxt layers and TypeScript configuration when deploying to Vercel or Netlify. Let's break down the problem and provide a solution based on the available information.
The error you're encountering suggests that the deployment process is having trouble resolving the TypeScript configuration file (
tsconfig.json) in your Nuxt layer setup. This is likely because the auto-generated .nuxt/tsconfig.json file is not available during the build process on these platforms.
To resolve this issue, you can try the following steps:
1. In your base layer, create a tsconfig.json file if it doesn't exist already. This file should extend the Nuxt-generated TypeScript configuration:
2. In your main Nuxt application, ensure you have a tsconfig.json file that extends both the Nuxt-generated configuration and your base layer's configuration:
3. Make sure to run nuxi prepare before deploying to generate the necessary TypeScript configuration files. You might need to add this as a pre-build step in your deployment configuration.
These steps should help resolve the TypeScript configuration issues when deploying your Nuxt application with layers to Vercel or Netlify.
It's worth noting that Nuxt automatically generates a .nuxt/tsconfig.json file with sensible defaults and your aliases as mentioned in the Nuxt documentation (https://nuxt.com/docs/guide/directory-structure/tsconfig). However, this file might not be available during the initial stages of the deployment process, which is why we're creating explicit tsconfig.json files.
If you're still encountering issues, you might want to check if your deployment platform supports monorepo setups correctly. Some additional configuration might be needed to ensure all necessary files are included in the deployment.
For more information on Nuxt layers and TypeScript configuration, you can refer to the Nuxt documentation on authoring layers (https://nuxt.com/docs/guide/going-further/layers) and TypeScript support in Nuxt (https://nuxt.com/docs/guide/concepts/typescript).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1157201729226555412> Kapa.ai is still learning and improving, please let me know how I did by reacting below.