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';

相关推荐
Zyx200714 分钟前
HTML5 敲击乐(2):从静态页面到移动端适配的完整实践
前端
有意义16 分钟前
从HTML敲击乐了解开发流程
javascript
烟袅16 分钟前
JavaScript 中的 null 与 undefined:你真的搞懂它们的区别了吗?
javascript
有点笨的蛋17 分钟前
“花”点心思学代理:JavaScript中的对象与中介艺术
javascript
今禾17 分钟前
流式输出深度解析:从应用层到传输层的完整技术剖析
前端·http·面试
Hilaku21 分钟前
一个函数超过20行? 聊聊我的函数式代码洁癖
前端·javascript·架构
白兰地空瓶25 分钟前
# 从对象字面量到前端三剑客:JavaScript 为何是最具表现力的脚本语言?
前端
不会算法的小灰26 分钟前
JavaScript 核心知识学习笔记:给Java开发者的实战指南
javascript·笔记·学习
vivo互联网技术38 分钟前
vivo 前端三剑客发展历程及原理揭秘
前端