最新hbuilderx在main.js中引入pinia报错误Cannot read property '__VUE_DEVTOOLS_GLOBAL_HOOK__' of null

最新hbuilderx在main.js中引入pinia报错误Cannot read property ‘VUE_DEVTOOLS_GLOBAL_HOOK’ of null

示例代码：

import {
	createSSRApp
} from 'vue'
import * as Pinia from 'pinia';

export function createApp() {
	const app = createSSRApp(App)
	app.use(Pinia.createPinia());
	return {
		app,
		Pinia
	}
}

操作步骤：

在main.js中引入pinia，运行到模拟器中就报错误

预期结果：

希望引入可以正常运行

实际结果：

报错误

bug描述：

在main.js中引入pinia就会报以下错误 18:52:17.572 ready in 14977ms. 18:52:17.708 手机端调试基座版本号为4.65, 版本号相同，跳过基座更新 18:52:18.219 正在建立手机连接… 18:52:19.494 正在同步手机端程序文件… 18:52:20.163 同步手机端程序文件完成 18:52:21.308 正在启动HBuilder调试基座… 18:52:22.338 应用【src】已启动 18:52:24.135 reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack -> Uncaught TypeError: Cannot read property ‘VUE_DEVTOOLS_GLOBAL_HOOK’ of null at getDevtoolsGlobalHook (app-service.js:15860:23) at setupDevtoolsPlugin (app-service.js:15963:18) at addDevtools (app-service.js:16258:5) at install2 (app-service.js:16741:7) at createApp (app-service.js:97925:10) at (app-service.js:97930:62) at (app-service.js:97938:3)


4 回复

hello , 提供一下可以复现的项目看一下，你也可以尝试一下，回退上个版本就正常了吗？


就是hello-uniapp项目，引入就会报错

我这里测试没有问题，你提供一下你的项目吧

这个错误是由于在uni-app中使用Pinia时，Vue DevTools相关的全局钩子未正确初始化导致的。解决方法如下：

  1. 修改main.js中的代码：
import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'

export function createApp() {
    const app = createSSRApp(App)
    const pinia = createPinia()
    
    // 禁用devtools
    if (process.env.NODE_ENV === 'production') {
        pinia._p.push(() => {
            if (typeof window !== 'undefined') {
                delete window.__VUE_DEVTOOLS_GLOBAL_HOOK__
            }
        })
    }
    
    app.use(pinia)
    return {
        app,
        pinia
    }
}
  1. 确保你的项目依赖版本兼容：
  • pinia版本建议使用^2.0.0以上
  • vue版本建议使用^3.0.0
  1. 如果问题仍然存在，可以尝试在manifest.json中添加：
"h5": {
    "devServer": {
        "disableHostCheck": true
    }
}
回到顶部