Nuxt•4w ago

Nuxt + cloudinary in pnpm monorepo setup

Hello everyone, sorry for the probably trivial question but I'm quite new in the nuxt environment but I'm captivated by its community and tools 🙂 I succesfully installed and tested @nuxtjs/cloudinary plugin on a fresh project but I'm now struggling trying to import that inside a monorepo , where one "folder" is the nuxt app itself. I installed the plugin, but I get the following error once I import it. Pre-transform error: [@vue/compiler-sfc] Failed to resolve extends base type. and Unresolvable type reference or unsupported built-in utility type It looks like a typescript misconfiguration. I tried to force shamefully-hoist=true with no success. Anyone who could give me some hints on how to solve the problem? I noticed that inside my nuxt/node_modules folder, @nuxtjs/cloudinary is symbolic link to the root node_modules folder. I think this might be the problem but I'm kindof stuck 🙂 hope i was clear.

- Operating System: Windows_NT
- Node Version:     v22.12.0
- Nuxt Version:     3.15.0
- CLI Version:      3.17.2
- Nitro Version:    2.10.4
- Package Manager:  [email protected]
- Builder:          -
- User Config:      default
- Runtime Modules:  @nuxtjs/[email protected], @pinia/[email protected], @nuxt/[email protected], @unlazy/[email protected], @nuxt/[email protected], @nuxtjs/[email protected]
- Build Modules:    -

5 Replies

kapa.ai•4w ago

Hi @cwrong. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question and the available knowledge sources, I can offer some insights and suggestions regarding your Nuxt + Cloudinary setup in a pnpm monorepo environment. The error messages you're encountering suggest that there might be issues with TypeScript configuration and module resolution in your monorepo setup. Here are a few points to consider: 1. TypeScript Configuration: Make sure your tsconfig.json file in the Nuxt app folder extends the auto-generated TypeScript configuration. Add the following to your tsconfig.json:

   {
     "extends": "./.nuxt/tsconfig.json"
   }

   {
     "extends": "./.nuxt/tsconfig.json"
   }

This is recommended in the Nuxt TypeScript documentation. 2. Nuxt Configuration: In your nuxt.config.ts file, ensure you have properly configured the Cloudinary module. Here's an example:

   export default defineNuxtConfig({
     image: {
       cloudinary: {
         baseURL: '<https://res.cloudinary.com/<your-cloud-name>/image/upload/'>
       }
     },
     modules: ['@nuxtjs/cloudinary']
   })

   export default defineNuxtConfig({
     image: {
       cloudinary: {
         baseURL: '<https://res.cloudinary.com/<your-cloud-name>/image/upload/'>
       }
     },
     modules: ['@nuxtjs/cloudinary']
   })

This configuration is based on the Nuxt Image Cloudinary provider documentation. 3. Monorepo TypeScript Hoisting: In a pnpm monorepo setup, you might need to hoist certain TypeScript definitions. Add the following to your nuxt.config.ts:

   export default defineNuxtConfig({
     typescript: {
       hoist: [
         "nitropack/types",
         "nitropack/runtime",
         "nitropack",
         // ... other modules as needed
       ]
     }
   })

   export default defineNuxtConfig({
     typescript: {
       hoist: [
         "nitropack/types",
         "nitropack/runtime",
         "nitropack",
         // ... other modules as needed
       ]
     }
   })

This is suggested in the Nuxt TypeScript configuration documentation. 4. Workspace Configuration: If you're working within a monorepo workspace, you might need to include the parent workspace in your Nuxt project. Add this to your nuxt.config.ts:

   export default defineNuxtConfig({
     typescript: {
       includeWorkspace: true
     }
   })

   export default defineNuxtConfig({
     typescript: {
       includeWorkspace: true
     }
   })

This option is mentioned in the Nuxt TypeScript configuration documentation. 5. Module Resolution: Ensure that your nuxt.config.ts file correctly resolves the Cloudinary module. You might need to use the full path to the module in your monorepo setup. If these suggestions don't resolve your issue, it might be helpful to check your pnpm workspace configuration and ensure that all dependencies are correctly hoisted and resolved within your monorepo structure. Remember that working with monorepos can introduce complexity in module resolution and TypeScript configuration. You might need to experiment with different configurations to find the right setup for your specific project structure. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@526496166154862592> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

cwrongOP•4w ago

@kapa.ai if shamefully-hoist is true, modules should be able to access root modules via symlink. this seems to break everything.

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're correct that enabling shamefully-hoist=true in pnpm should allow modules to access root-level dependencies via symlinks. However, this approach can indeed lead to issues in some cases, especially with complex setups like Nuxt projects in monorepos. According to the Nuxt documentation on node_modules, the package manager (in this case, pnpm) creates the node_modules directory to store the project's dependencies. However, when using pnpm with shamefully-hoist=true, it can sometimes cause conflicts or unexpected behavior. In fact, the Nuxt team has been working on improving compatibility with pnpm. There was a recent change to disable shameful hoisting in the Nuxt repository itself, as mentioned in this pull request. The description states: "Long overdue, this removes shameful hoist behaviour on nuxt/nuxt, with the exception of webpack loaders. We can consider a future implementation to make it possible to use webpack in a pnpm repository." This suggests that shameful hoisting can indeed cause issues, particularly in more complex setups like yours. Instead of relying on shamefully-hoist=true, you might want to try the following approaches: 1. Use pnpm's workspace features to manage your monorepo dependencies more effectively. 2. Explicitly declare all necessary dependencies in each project within your monorepo. 3. Use the typescript.hoist option in your nuxt.config.ts to manually specify which types should be hoisted, as mentioned in the Nuxt configuration documentation. 4. If you're still encountering issues, you might need to temporarily switch to npm or yarn for your Nuxt project within the monorepo, as they handle hoisting differently. Remember, the goal is to find a balance between proper dependency isolation (which pnpm provides) and the needs of your Nuxt project. It may take some experimentation to find the right setup for your specific monorepo structure. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@526496166154862592> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt + cloudinary in pnpm monorepo setup

Did you find this page helpful?