When running in pnpm workspace: "Pre-transform error: [@vue/compiler-sfc] Failed to resolve extends base type."

[jrutila]

Environment

Nuxt project info:

---

• Operating System: Windows_NT
• Node Version: v18.20.4
• Nuxt Version: 3.13.2
• CLI Version: 3.14.0
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Version

3.0.0-alpha.4

Reproduction

I don't get to seem the reproduction work in stackblitz, so here's a setup.sh that will demonstrate the problem.

#!/bin/bash

set -xe

# Init nuxt
pnpm dlx nuxi@latest init --packageManager pnpm --no-gitInit nuxt-proj

# Make it a workspace
rm -Rf nuxt-proj/node-modules nuxt-proj/pnpm-lock.yaml
echo -e 'packages:\n  - "nuxt-proj"' > pnpm-workspace.yaml

# Add @nuxt/ui next
cd nuxt-proj
pnpm add @nuxt/ui@next
pnpm add -D typescript
pnpm install

# Add @nuxt/ui module
cat <<EOF > nuxt.config.ts
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  modules: ["@nuxt/ui"],
  devtools: { enabled: true }
})
EOF

# Use nuxt ui in app.vue
cat <<EOF > app.vue
<template>
  <div>
    <UButton>Button</UButton>
  </div>
</template>
EOF

# Run
pnpm dev

Description

When @nuxt/ui 3 is used in a pnpm workspace project, the run dev fails on error: "Pre-transform error: [@vue/compiler-sfc] Failed to resolve extends base type."

When the workspace is removed (remove pnpm-workspace.yaml and run pnpm install in the project folder) the run works. Having typescript in devDependencies (as said in #1289 (comment)) does not help.

Additional context

No response

Logs

> nuxt dev

Nuxt 3.13.2 with Nitro 2.9.7                                                                                                                                                                                                                                                   
                                                                                                        
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose
  ➜ DevTools: press Shift + Alt + D in the browser (v1.5.1)                                                                                                                                                                                                                    

ℹ Nuxt Icon server bundle mode is set to local                                                                                                                                                                                                                                
✔ Vite client built in 41ms                                                                                                                                                                                                                                                   

 ERROR  Pre-transform error: [@vue/compiler-sfc] Failed to resolve extends base type.                                                                                                                                                                                          
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

C:/root/nuxt-proj/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected]_@_ytyqagzq6elb226bn7bwxmetxq/node_modules/@nuxt/ui/dist/runtime/components/Button.vue
57 |  const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)
58 |
59 |  async function onClickWrapper(event: MouseEvent) {
   |                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
60 |    loadingAutoState.value = true
   |  ^^^
61 |    const callbacks = Array.isArray(props.onClick) ? props.onClick : [props.onClick]

✔ Vite server built in 1581ms                                                                                                                                                                                                                                                 
✔ Nuxt Nitro server built in 1258 ms                                                                                                                                                                                                                                    
ℹ Vite client warmed up in 1ms                                                                                                                                                                                                                                                 
ℹ Vite server warmed up in 827ms

[benjamincanac]

Do you have typescript installed in your devDependencies?

[jrutila]

Do you have typescript installed in your devDependencies?

Yes. In the reproduction script it does that: pnpm add -D typescript

[benjamincanac]

Just tried your script and it is invalid, the pnpm-workspace.yml looks like this:

-e packages:
  - "nuxt-proj"

Also, typescript doesn't appear in the nuxt-proj/package.json dev dependencies.

But anyway it works fine on my side. If the issue persists, could you please provide a repository as reproduction? Tailwind CSS v4 is not working on StackBlitz at the moment.

[DevJoghurt]

@benjamincanac
Since I have just stumbled across the same bug, here is a small repo where the error occurs:
https://github.com/DevJoghurt/nuxtui-pnpm-bug

Just clone the repo and run:

pnpm install
pnpm dev

[benjamincanac]

@DevJoghurt You're missing two things in your reproduction:

1. A tsconfig.json with:

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

2. (optional) A postinstall script in your package.json with nuxt prepare app to generate the .app/.nuxt before running nuxt dev

[jrutila]

Here is my reproduction repository https://github.com/jrutila/nuxt-ui-issue-2291. It is a little bit slimmer, even.

@DevJoghurt are you running your project on Windows? Could that have to do something with this, if it works with @benjamincanac.

[benjamincanac]

@jrutila Same as @DevJoghurt reproduction, you're missing a tsconfig.json at the root of your workspace. This fixes the issue for me.

[jrutila]

@benjamincanac yes, just noticed that you meant the root tsconfig.json. And it indeed fixed it for me, too.

Is it working as intended like that? Or is this just a workaround?

[jrutila]

And it works also if the root tsconfig.json extends the tsconfig.json from the nuxt app.

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

[DevJoghurt]

@benjamincanac

Ok, thank you. I've got it working now too

[benjamincanac]

As to why we need to do this, it might be a limitation or bug of vue sfc compiler - will need to investigate more!