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

Steps to reproduce the behavior

Use Vue-cli to create a Vue 3 app with Typescript.
Run yarn add pinia@next.
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");

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"
 },

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 16
Comments: 17 (3 by maintainers)

Most upvoted comments

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.

+143

jhony-v on Sep 14, 2021

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',
      })
    },
  },
}

+72

4Kazelot on Oct 18, 2021

Here is the chained Webpack config if someone else needs it:

vue.config.js:

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("mjs")
      .test(/\.mjs$/)
      .type("javascript/auto")
      .include.add(/node_modules/)
      .end();
  },
};

+16

timpulver on Sep 28, 2021

Seems related and also the workaround mentioned in the discussion works.

But it’s strange as all the issues I found (here, here) describe this problem as “unable to do named import from CJS into ESM module”. But VueDemi provides ESM build and after checking Webpack 4 docs (as Vue CLI is still on WP4), it has also correct settings in package.json ("module" field pointing to .mjs file).

So I still don’t understand why it is treated as “non EcmaScript module”

Liwoj on Sep 14, 2021

Hello, we are trying to use Pinia alongside Vuex in a Nuxt 2 project in order to smooth our eventual migration to Nuxt 3. However, even after adding

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

to our build config, we are still seeing the Can't import the named export 'isVue2' from non EcmaScript module (only default export is available). The error comes from our ./.nuxt/dist.plugin.209980bd.mjs file which seems to be the @pinia/nuxt plugin setup.

Here is some of our package.json

// dependencies
"nuxt": "2.15.8",
"vue": "2.6.14",
"@nuxtjs/composition-api": "^0.23.2" ,
"@pinia/nuxt": "^0.1.9",
"pinia": "^2.0.14

// devDependencies
"@nuxt/typescript-build": "2.1.0"

We tried some experiments such as deleting ths .cjs file from vue-demi, but it seems that no matter what we do, the file is not reading the .mjs file correctly.

taidaid on Jul 1, 2022

I reproduced the issue on a simple project. This should be fixable by changing the extensions of the generated files. I still need to test it out a bit more.

posva on Sep 29, 2021

[[[> > > 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',
      })
    },
  },
}

@4Kazelot For the NuxtJS what file does this config go in?

https://nuxtjs.org/docs/features/configuration/#extend-webpack-config](https://nuxtjs.org/docs/features/configuration/#extend-webpack-config)](https://nuxtjs.org/docs/features/configuration/#extend-webpack-config)](https://nuxtjs.org/docs/features/configuration/#extend-webpack-config)

AzimovAzimDev on Jun 5, 2022

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.

It works

Kooklen on Jan 24, 2022