Nuxt.js 2 + nuxt-vite + pinia error

maxdzin commented 3 years ago

Reproduction

Thank you so much for such a great state managing lib for Vue. Pinia works well with Nuxt as well. However, when I tried to use it along with nuxt-vite, an issue happen from the start. I tried with the fresh install and also, there is a reproduction link to Codesandbox:

Steps to reproduce the behavior

Initialize a fresh Nuxt universal app + install the dependencies (the latest versions are used at the moment): "dependencies": { "@nuxtjs/composition-api": "^0.29.2", "@pinia/nuxt": "0.0.2", "nuxt": "^2.15.8", "pinia": "^2.0.0-rc.9" }, "devDependencies": { "nuxt-vite": "^0.2.4" }
Add required modules into "buildModules" section of nuxt.config,js: buildModules: ["nuxt-vite", "@nuxtjs/composition-api/module", "@pinia/nuxt"],
Run npm run dev
See the error

Expected behavior

The app launched correctly with listed modules/configurations.

Actual behavior

The app won't launch because of the error. This is comes in the console: Uncaught SyntaxError: The requested module '/node_modules/pinia/dist/pinia.cjs?import' does not provide an export named 'defineStore'

Additional information

node version is 14.17.3 npm version is 7.24.0

posva commented 3 years ago

I'm glad you like it ! I need a boiled down repro to check

maxdzin commented 3 years ago

Hi @posva OK. I've created a repo for that. You can check it here: https://github.com/spirico/nvp-test.git

posva commented 3 years ago

It seems to be importing the wrong file of pinia but I'm not sure of why, could be a bug of nuxt-vite too.

tobiasdiez commented 3 years ago

In the same setting (Nuxt 2 + vite) but with the most recent version of pinia, I got the following error Cannot read properties of undefined (reading 'install') in Function.Vue.use.

The relevant part of the generated server.js file looks as follows:

// --------------------
// Request: /@id/defaultexport:D:/Programming/JabRefOnline/node_modules/@pinia/nuxt/dist/templates/plugin.mjs
// Parents: 
// - /.nuxt/index.js ($id_d8486045)
// Dependencies: 
// - /node_modules/vue-demi/lib/index.mjs ($id_4c439bf5)
// - /node_modules/pinia/dist/pinia.mjs ($id_b1920624)
// --------------------
const $id_42c572ca = async function (global, __vite_ssr_exports__, __vite_ssr_import_meta__, __vite_ssr_import__, __vite_ssr_dynamic_import__, __vite_ssr_exportAll__) {
const module = __createCJSModule__(__vite_ssr_exports__)
const __vite_ssr_import_0__ = await __vite_ssr_import__("/node_modules/vue-demi/lib/index.mjs");

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

if (__vite_ssr_import_0__.isVue2) {
  __vite_ssr_import_0__.Vue2.use(__vite_ssr_import_1__.PiniaVuePlugin);
}

The problem is the strange import statement for pinia. In fact, if I remove the following https://github.com/posva/pinia/blob/bd9a8a43b31163246d8a101aa27a94b86bfac4fd/packages/nuxt/src/index.ts#L31-L33 then the generated import reads

const __vite_ssr_import_1__ = await __vite_ssr_import__("/node_modules/pinia/dist/pinia.mjs");

and the error is gone.

antlionguard commented 2 years ago

there's any update for this issue and pr #781?

Ttou commented 2 years ago

@posva https://stackblitz.com/github/Ttou/nuxt2-pinia-issue

vuejs / pinia