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)
I had the same problem but I solved editing my vue.config.js file with the following webpack rule:
With this configuration it worked.
For NuxtJS:
Here is the chained Webpack config if someone else needs it:
vue.config.js:
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”
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
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
We tried some experiments such as deleting ths
.cjs
file fromvue-demi
, but it seems that no matter what we do, the file is not reading the.mjs
file correctly.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.
[[[> > > I had the same problem but I solved editing my vue.config.js file with the following webpack rule:
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)
It works