Can't import the named export from non EcmaScript module (only default export is available)

Steps to reproduce the behavior

1. Use Vue-cli to create a Vue 3 app with Typescript.
2. Run yarn add pinia@next.
3. Edit the main.ts:

import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";

const app = createApp(App);
app.use(createPinia());
app.mount("#app");

1. Run yarn serve.

Expected behavior

The compilation goes without an error

Actual behavior

Throws error:

ERROR  Failed to compile with 18 errors                                                                                                           

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'computed' from non EcmaScript module (only default export is available)

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'del' from non EcmaScript module (only default export is available)

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'effectScope' from non EcmaScript module (only default export is available)

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'getCurrentInstance' from non EcmaScript module (only default export is available)

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'inject' from non EcmaScript module (only default export is available)

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'isReactive' from non EcmaScript module (only default export is available)

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'isRef' from non EcmaScript module (only default export is available)

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'isVue2' from non EcmaScript module (only default export is available)

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'markRaw' from non EcmaScript module (only default export is available)

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'onUnmounted' from non EcmaScript module (only default export is available)

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'reactive' from non EcmaScript module (only default export is available)

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'ref' from non EcmaScript module (only default export is available)

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'set' from non EcmaScript module (only default export is available)

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'toRaw' from non EcmaScript module (only default export is available)

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'toRef' from non EcmaScript module (only default export is available)

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'toRefs' from non EcmaScript module (only default export is available)

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'unref' from non EcmaScript module (only default export is available)

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'watch' from non EcmaScript module (only default export is available)

Additional Information:

"dependencies": {
   "core-js": "^3.6.5",
   "pinia": "^2.0.0-rc.9",
   "primeflex": "^3.0.1",
   "primeicons": "^4.1.0",
   "primevue": "^3.7.1",
   "vue": "^3.0.0",
   "vue-router": "^4.0.0-0"
 },
 "devDependencies": {
   "@typescript-eslint/eslint-plugin": "^4.18.0",
   "@typescript-eslint/parser": "^4.18.0",
   "@vue/cli-plugin-babel": "~4.5.0",
   "@vue/cli-plugin-eslint": "~4.5.0",
   "@vue/cli-plugin-router": "~4.5.0",
   "@vue/cli-plugin-typescript": "~4.5.0",
   "@vue/cli-service": "~4.5.0",
   "@vue/compiler-sfc": "^3.0.0",
   "@vue/eslint-config-prettier": "^6.0.0",
   "@vue/eslint-config-typescript": "^7.0.0",
   "eslint": "^6.7.2",
   "eslint-plugin-prettier": "^3.3.1",
   "eslint-plugin-vue": "^7.0.0",
   "lint-staged": "^9.5.0",
   "node-sass": "^4.12.0",
   "prettier": "^2.2.1",
   "sass-loader": "^8.0.2",
   "typescript": "~4.1.5"
 },

[jhony-v]

I had the same problem but I solved editing my vue.config.js file with the following webpack rule:

// vue.config.js
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: "javascript/auto"
        }
      ] 
    }
  }
}

With this configuration it worked.

[4Kazelot]

I had the same problem but I solved editing my vue.config.js file with the following webpack rule:

// vue.config.js
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: "javascript/auto"
        }
      ] 
    }
  }
}

With this configuration it worked.

For NuxtJS:

export default {
  build: {
    extend(config) {
      config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      })
    },
  },
}