esm和cmj混用报错分析

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)"?

报错提示为useMenuStoreapp.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';

相关推荐
古夕2 小时前
技术复盘文档:`resourceLogoUrl` 数据丢失问题分析与最终解决方案
前端·javascript·vue.js
streaker3032 小时前
前端开发者的 AI 学习笔记 🚀
前端·openai
高热度网2 小时前
从 Vercel 构建失败谈 Git 大小写敏感性问题:一个容易被忽视的跨平台陷阱
前端·javascript
青衫旧故2 小时前
Uniapp Vue2 Vue3常量保存及调用
前端·javascript·vue.js·uni-app
知白守黑2673 小时前
访问控制、用户认证、https
linux·服务器·前端
小妖怪的夏天3 小时前
electron 打包web页面解决跨域问题
前端·javascript·electron
骚饼3 小时前
Git 命令配置别名、Git命令缩写(Mac版)
前端·git
LoveEate3 小时前
vue3 el-switch表单联动校验
前端·javascript·vue.js
z_y_j2299704383 小时前
服务器中更新前端项目
服务器·前端