esm和cmj混用报错分析

拾缘2025-10-01 10:35

elpis DSL领域模型开发时，引入pinia处理模版数据时报错

代码

menu.js

js 复制代码

const { defineStore } = require('pinia') ; 
import { ref } from 'vue';
export const useMenuStore = defineStore('menu',()=>{const menuList = ref([])})

business.js

js 复制代码

import {useMenuStore} from './menu.js' 
const menuStore = useMenuStore()

报错信息：

getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?

报错提示为useMenuStore在app.use(pinia)之前运行了

问题分析：getActivePinia() 为检查当前是否存在活跃实例。webpack打包正常，node环境运行正常，浏览器访问报错。说明是运行时问题，boot.js中有app.use(pinia)实例化。最终定位menu.js 文件 cmj 和esm混用导致

问题解析：

cmj和esm加载时机

CommonJS: 同步加载，运行时确认依赖。

ESM: 异步加载，编译时编译确认依赖。

总结：

在webpack 编译时定义好了useMenuStore ，但是没有执行const { defineStore } = require('pinia') ; 。在运行时才执行const { defineStore } = require('pinia') ; 但是useMenuStore 早已经定义好，而此时business.js已经提前调用了useMenuStore()，导致Pinia实例未激活。

解决方案

将const { defineStore } = require('pinia') ; 替换为import { defineStore } from 'pinia';