Vue2 Can't import the named export 'toRefs' from non EcmaScript module pinia

23 min read

初始安装

import Vue from "vue";
import { createPinia, PiniaVuePlugin } from "pinia";

Vue.use(PiniaVuePlugin);
const pinia = createPinia();


new Vue({
    render: (h) => h(App),
    el: "#app",
    pinia,
});

报错如下:

 ERROR  Failed to compile with 19 errors                                            22:11:24
 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 'nextTick' 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)

另有报错

Uncaught TypeError: Object(...） is not a function
at createPinia (pinia.esm-bundler.js?77ba:874:1)
at eval (main. ts?b765:12:1)
at Module../src/main. ts (app.js:1228:1)
at
webpack_require__ (app:js:854:30)
at fn (app.js:151:20)
Object. 1 (app-is:1300:18)
at
_webpack_require (app-js:854:30)
at checkDeferredModules (app-J5:46:23)
at aPp.js:994:18
at app.j5:997:10
  1. Vue CLI 4.x 配置修改
// vue.config.js
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto',
        },
      ],
    },
  },
}
  1. 入口文件main.ts修改安装
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'windi.css'
import { createPinia, PiniaVuePlugin } from 'pinia'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()
Vue.use(VueCompositionAPI)

Vue.config.productionTip = false

Vue.use(ElementUI)
new Vue({
  router,
  pinia,
  render: (h) => h(App),
}).$mount('#app')