Possible to run nuxt3 + pinia

[piscis]

Reproduction

Hi I was playing with nuxt3 and tried to add pinia to the project but received the following error (see below).

As of now is it possible to use nuxt3 with pinia? I have it running in a nuxt2 project without problems so I was wondering if I'm doing something wrong.

Steps to reproduce the behavior

1. Go to https://github.com/piscis/nuxt3-pinia
2. clone and install
3. run yarn dev
4. See error

Expected behavior

Being able to use pinia with nuxt3

Actual behavior

Error:

Nuxt CLI v3.0.0-27235451.ece0e01                                                                                               20:33:00
                                                                                                                               20:33:00
  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.178.244:3000/
  > Network:  http://192.168.50.1:3000/
  > Network:  http://192.168.30.12:3000/

ℹ Vite warmed up in 432ms                                                                                                      20:33:01
✔ Vite server built in 682ms                                                                                                   20:33:01
✔ Vite server built in 56ms                                                                                                    20:33:01
✔ Nitro built in 149 ms                                                                                                        20:33:01
✔ Generated nuxt.d.ts                                                                                                          20:33:01
✔ Vite server built in 13ms                                                                                                    20:33:02
(node:6896) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
Server Side Rendering Error: /Users/alex/nuxtzen/node_modules/pinia/dist/pinia.esm-bundler.js:6
import { getCurrentInstance, inject, toRaw, watch, unref, markRaw, effectScope, ref, isVue2, isRef, isReactive, set, onUnmounted, reactive, toRef, del, computed, toRefs } from 'vue-demi';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:199:29)
    at ModuleJob.run (internal/modules/esm/module_job.js:183:25)
    at async Loader.import (internal/modules/esm/loader.js:178:24)
    at async __instantiateModule__ (file:///Users/alex/nuxtzen/.nuxt/dist/server/server.mjs:1892:3)
Server Side Rendering Error: /Users/alex/nuxtzen/node_modules/pinia/dist/pinia.esm-bundler.js:6
import { getCurrentInstance, inject, toRaw, watch, unref, markRaw, effectScope, ref, isVue2, isRef, isReactive, set, onUnmounted, reactive, toRef, del, computed, toRefs } from 'vue-demi';

Additional information

I did not install @nuxt/composition-api because this is already provided by nuxt statet here:
https://v3.nuxtjs.org/getting-started/migration

[posva]

The @pinia/nuxt and pinia itself are not yet fully compatible with Nuxt 3.

I need to figure out to make the dist files work in all different environments:

• webpack
• Node ESM
• Node CJS
• rollup
• vite

It's currently being a pain impossible to support all of them out of the box and I'm considering dropping node CJS support and documenting the option needed for webpack based projects: #675

If anybody has examples where the library works on all of the environments, I will be very happy to check them

[posva]

got this and a few more things fixed thanks to the help of @danielroe 💚

fixed at 438b16d