[RC 9] [RC 10] `Cannot read properties of undefined (reading 'modules')` when `vue` is installed in parent dir

[pi0]

Related issues

• #7532
• #7220
• #7573
• https://github.com/nuxt/framework/issues/7564
• sidestream-tech/sidebase#16

Reproduction

Minimal reproduction: https://stackblitz.com/edit/github-2yn1ze?file=app%2Fpackage.json,app%2Fnuxt.config.ts

Describe the bug

How it happens: If vue dependency is installed outside of project directory in an adjutant directory (usually home directory with node_modules), vite-node that is enabled by default for RC.9+ makes issues. (issue is with nuxt custom external options)

Additional context

Workaround 1

Try switching to the edge channel. It should have been solved with #7612.

Workaround 2

Check your home directory. If there is any node_modules dir, remove it or rename it. It is probably created wrongly in the past.

Workaround 3

It might be also because of a monorepo setup that has ../node_modules/vue dependency. In this case, switch to the legacy vite bundler:

export default defineNuxtConfig({
  vite: {
    devBundler: 'legacy',
  },
});

Remarks

The root cause of this issue is having multiple instances of vue in externals. In the future similar issue might happen with different causes as vue does not support multiple version instances.

[richardeschloss]

Thanks for the PR! FWIW, 3.0.0-rc.11-27722816.abd0feb seems to be having things working on my end 🤞

[andreas83]

i had this issue even with 3.0.0-rc.11-27722816.abd0feb, node_modules removed from project and parent dir as well adding legacy devBunder to nuxt.config.ts.

At the end, removing the yarn.lock file fixed the issue for me.

Nuxt 3.0.0-rc.11-27722816.abd0feb with Nitro 0.5.4-27719614.c3af02d                                                                                                      09:58:22
                        
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: Server rendering context not provided. Make sure to only call useSSRContext() conditionally in the server build.
[Vue warn]: Unhandled error during execution of setup function 
  at <NuxtRoot>
[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'modules')
  at _sfc_main.setup (./node_modules/nuxt/dist/app/components/nuxt-root.vue:67:16)  
  at callWithErrorHandling (./node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22)  
  at setupStatefulComponent (./node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7109:29)  
  at setupComponent (./node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7064:11)  
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:172:17)  
  at renderToString (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:450:26)  
  at Object.renderToString$1 [as renderToString] (./.nuxt/dev/index.mjs:472:24)  
  at Object.renderToString (./node_modules/vue-bundle-renderer/dist/runtime.mjs:173:40)  
  at processTicksAndRejections (node:internal/process/task_queues:96:5)  
  at async ./.nuxt/dev/index.mjs:527:21

---

• Operating System: Linux
• Node Version: v16.13.1
• Nuxt Version: 3.0.0-rc.11-27722816.abd0feb
• Nitro Version: 0.5.4-27719614.c3af02d
• Package Manager: [email protected]
• Builder: vite
• User Config: buildModules, publicRuntimeConfig
• Runtime Modules: -
• Build Modules: [email protected]

---

[pi0]

Happy hearing finally issue fixed for you @andreas83. As mentioned in remarks, there might be other causes that shows this issue (basically for any reason if two versions of vue 3 being used in server-side). Renovating lockfile is a nice idea 👍🏼

[mittci]

Renovating lockfile is a shit idea that not work

May be will help

vite: {
    devBundler: 'legacy',
  },

[mittci]

second also is a shit solution

[mittci]

i am boring from yours nuxt