(nuxt-bridge with vite) Cannot read properties of undefined (reading 'install')

[HendrikJan]

Environment

Nuxt CLI v3.0.0-27398533.8edd481 07:46:42
RootDir: /sandbox 07:46:42
Nuxt project info: 07:46:42

---

• Operating System: Linux
• Node Version: v16.12.0
• Nuxt Version: 2.16.0-27358576.777a4b7f
• Package Manager: [email protected]
• Bundler: Webpack
• User Config: bridge, modules, buildModules
• Runtime Modules: @nuxtjs/[email protected]
• Build Modules: @pinia/[email protected], @nuxt/[email protected]

---

Reproduction

https://codesandbox.io/s/bridge-with-pinia-omd9y?file=/nuxt.config.js

Steps to reproduce the behavior

1. Go to 'https://codesandbox.io/s/bridge-with-pinia-omd9y?file=/nuxt.config.js'
2. You probably need to fork to be able to restart the server
3. Restart the server
4. Reload the sandbox browser
5. See the error

500

Cannot read properties of undefined (reading 'install')
at Function.Vue.use (file://./.nuxt/dist/server/server.mjs:7855:23)
at $id_c39524e4 (file://./.nuxt/dist/server/server.mjs:21584:7)
at async __instantiateModule__ (file://./.nuxt/dist/server/server.mjs:21780:3)

Describe the bug

This bug was first reported in vuejs/pinia and LinuxBorg suggested that this would likely be a Nuxt(bridge) or Vite bug.

Issue in vuejs/pinia: vuejs/pinia#1024

The code runs fine in Codesandbox without vite:true, but when I add vite:true to the nuxt.config.js it fails.

Additional context

I'll copy some lines of code from my local environment where the error originates:

Function.Vue.use (file://./.nuxt/dist/server/server.mjs:7855:23)

function initUse (Vue) {
  Vue.use = function (plugin) {
    var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // additional parameters
    var args = toArray(arguments, 1);
    args.unshift(this);
    if (typeof plugin.install === 'function') { // <-- ERROR IS CAUSED HERE
      plugin.install.apply(plugin, args);
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args);
    }
    installedPlugins.push(plugin);
    return this
  };
}

$id_b275682f (file://./.nuxt/dist/server/server.mjs:48398:7)

// Parents: 
// - /.nuxt/index.js ($id_d8486045)
// Dependencies: 
// - /node_modules/@vue/composition-api/dist/vue-composition-api.mjs ($id_7ff7ff90)
// - /node_modules/@nuxt/bridge/dist/runtime/vue2-bridge.mjs ($id_da8a99d6)
// - /@id/pinia/dist/pinia.mjs/dist/pinia.mjs ($id_4e48e908)
// --------------------
const $id_b275682f = async function (global, __vite_ssr_exports__, __vite_ssr_import_meta__, __vite_ssr_import__, __vite_ssr_dynamic_import__, __vite_ssr_exportAll__) {
const __vite_ssr_import_0__ = await __vite_ssr_import__("/node_modules/@vue/composition-api/dist/vue-composition-api.mjs");
const __vite_ssr_import_1__ = await __vite_ssr_import__("/node_modules/@nuxt/bridge/dist/runtime/vue2-bridge.mjs");

const __vite_ssr_import_2__ = await __vite_ssr_import__("/@id/pinia/dist/pinia.mjs/dist/pinia.mjs");


if (__vite_ssr_import_1__.isVue2) {
  __vite_ssr_import_1__.install();
  const Vue = "default" in __vite_ssr_import_1__.Vue2 ? __vite_ssr_import_1__.Vue2.default : __vite_ssr_import_1__.Vue2;
  Vue.use(__vite_ssr_import_2__.PiniaVuePlugin); // <-- ERROR IS CAUSED HERE
}

file dist.plugin.c9118ab8.mjs

import { isVue2, install, Vue2 } from 'vue-demi';
import { PiniaVuePlugin, createPinia, setActivePinia } from 'pinia';

if (isVue2) {
  install();
  const Vue = "default" in Vue2 ? Vue2.default : Vue2;
  Vue.use(PiniaVuePlugin); // <-- ERROR SEEMS TO BE CAUSED HERE
}

Logs

No response

[HendrikJan]

This seems to be a duplicate of vuejs/pinia#690