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

[HendrikJan]

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)

Expected behavior

A working application

Actual behavior

The server builds without an error, but when loading the page in the browser, the 500 error shows

Additional information

The application in the codesandbox works without vite:true. The error shows up when I add vite:true.

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
}

[LinusBorg]

I'd assume that this is a bug in nuxt(bridge), as this import code generated by nuxt points to an invalid import path:

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

See the double /dist/pinia.mjs/dist/pinia.mjs?

As you state that this only happens when you enable vite in nuxt-bridge, the original import in the package is fine, it's the vite mode that seems to break this particular import.

Could end up being a bug in vite in the end, but should be checked out in nuxt-bridge first.

[HendrikJan]

Created an issue in nuxt/framework

[HendrikJan]

Duplicate of #690