zrender TypeError: “x“ is not a constructor

最新推荐文章于 2024-08-17 16:20:23 发布
原创 最新推荐文章于 2024-08-17 16:20:23 发布 · 657 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bug

在使用Zrender时遇到init方法报错，经过排查发现是由于tree-shaking导致registerPainter方法丢失。通过手动导入并注册Painter类，问题得到解决。项目已上线并开源。

如果有兴趣了解更多相关内容，欢迎来我的个人网站看看：耶瞳空间

我是调用zrender的init方法报错，如下图：
在这里插入图片描述

然后经过大佬指点，这种开发环境没问题但生产环境报错的东西，一般是因为打包的时候被tree-shaking掉了。

debug+翻看源码后发现丢失调的是registerPainter方法
在这里插入图片描述

模仿源码去调用：
在这里插入图片描述

import {
   
    init } from "zrender";
import {
   
    registerPainter
最低0.47元/天 解锁文章
源码解读之zrender-ZRender 类(3)
jexxx的博客
02-07 607
这几个函数中被使用了，这几个方法主要是控制画布是否更新，根据函数名可以猜测这个属性的功能是"脏矩形渲染"，也就是局部渲染，找到图形会变化的区域（脏矩形）做去更新。在实例化过程中，还遇到了几个文档描述比较模糊但很有用的参数：useDirtyRect，useCoarsePointer，usePointerSize。，咋一看也没看到它在哪里赋初值，然后在网页打断点调试，发现在初始化的时候会调用。，在后面的分析中会写到这个 useDirtyRect 的工作流程。未开启前，当更新的图形不在区域但还是会更新。
解决ESLint报错：“TypeError: this.cliEngine is not a constructor“
pleaseprintf的博客
07-29 2381
ESLint是前端开发中常用的代码规范检查工具。然而，有时我们可能会遇到"TypeError: this.cliEngine is not a constructor"这样的报错，影响代码规范检查的进行。本文将为你详细介绍该报错的原因，并提供解决方法，确保ESLint的正常工作。通过本文，你了解了解决"TypeError: this.cliEngine is not a constructor"报错的多种方法。遵循这些方法，你可以确保ESLint正常工作，并帮助团队维持良好的代码规范。
源码解读之zrender-入口(2)
jexxx的博客
02-02 447
根据以上分析找到 all.ts 文件，这里做了一些初始化的事情：registerPainter，注册绘图工具，默认注册了 canvas 和 svg。从使用方式来看，zrender 导出了一个对象，这个对象上面有一个init的方法，接收一个DOM对象，所以让我们看看 init 方法做了什么吧。该如何找一个工程的入口文件呢，参考[[🧺 package.json 正确配置入口文件]]文章可知，这里的入口是工程中的。方法会 return 一个实例化对象，内部将实例保存到全局变量。入口先分析到这里，还是挺简单的。
TypeError: ‘x‘ is not a constructor的解决方案
2301_79779756的博客
08-17 2561
TypeError: ‘x’ is not a constructor 错误通常由于尝试以构造函数方式实例化一个非构造函数对象、拼写错误、导入错误或误用非函数对象引起。通过确认对象是否为构造函数、检查拼写和导入、避免误用非函数对象、以及确保模块导出/导入正确，可以有效解决此错误。
vue项目报错TypeError this.cliEngine is not a constructor
qq_46102720的博客
10-12 1031
1.解决方法参考地址：https://blog.csdn.net/qq_34917408/article/details/108530084?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Ede
TypeError: URL is not a constructor，Node不同版本安全写法
sherleysong的专栏
07-20 5540
一、两种标准 1. WHATWG API【强烈推荐】 const myURL = new URL('xxxx') 这种写法，采用了目前安全性最好的标准，包括URLs、域名、IP地址、 application/x-www-form-urlencoded格式及他们的API。 2. Legacy API【不安全不推荐】 const myURL = url.parse('xxxx') 另一种 Legacy API ，至今NodeJS兼容着该写法，但不安全，不推荐。即使这种方式用起来更为简单一些。 Legacy
TypeError: cleanWebpackPlugin is not a constructor 问题已解决
weixin_55242897的博客
02-28 1237
项目场景 const path = require('path') const htmlWebpackPlugin = require('html-webpack-plugin') //导入每次删除文件夹的插件 //此下一行为错误引用，{ CleanWebpackPlugin }为固定导入法，引用时用new CleanWebpackPlugin() //const cleanWebpackPlugin = require('clean-webpack-plugin') const { CleanWebpa
TypeError: CleanWebpackPlugin is not a constructor
benben的博客
07-19 2917
引起错误的代码 const path = require('path'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { entry : { app : './src/index.js', print: './src/print.js' ...
报错：TypeError: AutoImport is not a functionTypeError: AutoImport is not a function和TypeError: Compone
m0_67294756的博客
07-02 1253
解决：是 unplugin-auto-import版本高了，需要降低版本。报错：AutoImport is not a function。
Vue解决打包时报错TyeError: Class extends value undefined is not a constructor or null
weixin_44237840的博客
10-14 466
https://blog.csdn.net/weixin_48604432/article/details/120360633
图形报表使用的zrender插件
06-02
是一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同
npm ERR! request to https://registry.npm.taobao.org/zrender/-/zrender-4.0.7.tgz failed, reason: cert
编程小白的博客
02-02 1926
前端vue项目在打包时报错。
this.cliEngine is not a constructor 2种解决方法
热门推荐
04-14 1万+
Webstorm + vue 老是提示 this.cliEngine is not a constructor 百度上的解决方法 this.cliEngine = require(packagePath + "lib/cli-engine"); 改为 this.cliEngine = require(packagePath + "lib/cli-engine").CLIEngine; 然后重启...
芋道项目发版后报错： jt is not a function...
w_jiunian的博客
07-17 329
本地没有任何问题，打包后突然报错 $t或者Jt或者st不是一个函数
zrender使用问题
miaofangchao的博客
04-09 2130
1、文档不是很好用，极其简约 https://ecomfe.github.io/zrender-doc/public/ 很多方法不会使用，需要不断去尝试。 2、"5.0.4"版本只渲染svg的问题： 找了半天才发现是安装包入口文件的问题： 使用npm安装的包跟克隆下来的包index.js文件不一样，但是typescript正常，这个有点坑，不故意的还是遗漏了？需要修改node_modules 中zrender index.js 文件: 原index.js： export * from './lib/zren
【捣鼓】TypeError: “x” is not a constructor
Jamcy123的博客
04-23 4392
今天在处理一个问题的时候无意中发现一个新的问题，对象内的简写方法不能用作构造函数使用，而属性赋值的匿名函数可以。 const obj1 = { f:function () { this.num = 0; } } const obj2 = { f() { this.num = 0; } } new obj1.f(); // f {num: 0} new obj2.f(); // Uncaught TypeError: obj2.f is not
Vue Zrender 应用一
qiulei_21的专栏
10-08 1062
解决vue3中引入zrender的问题
vue2项目测试环境报错：TypeError: c[r.a[i]] is not a constructor？如何解决？
qq_33747356的博客
01-12 803
vue2项目本地无报错，发布测试环境后报错如下，麻烦大佬指导一下，小弟万分感谢
Uncaught in promise typeError: Clz is not a constructor
最新发布
10-11
`Uncaught in promise TypeError: Clz is not a constructor` 错误通常意味着在 Promise 内部尝试将一个非构造函数的值作为构造函数来使用。以下是一些可能的解决方法： #### 检查构造函数的引入和定义 确保 `Clz` 被正确定义和引入。如果是从其他模块引入的，检查引入路径和引入名是否正确。 ```javascript // 示例：正确引入构造函数 import Clz from './path/to/Clz'; async function someAsyncFunction() { try { const instance = new Clz(); // 其他逻辑 } catch (error) { console.error(error); } } someAsyncFunction(); ``` #### 检查变量赋值 确保 `Clz` 没有被意外赋值为非构造函数类型的值。可以在使用前进行类型检查。 ```javascript // 示例：类型检查 let Clz; // 假设这里有赋值操作 Clz = 'not a constructor'; async function someAsyncFunction() { if (typeof Clz === 'function') { const instance = new Clz(); // 其他逻辑 } else { console.error('Clz is not a constructor'); } } someAsyncFunction(); ``` #### 调试和日志输出 在出现错误的位置添加日志输出，查看 `Clz` 的实际值。 ```javascript async function someAsyncFunction() { console.log('Clz value:', Clz); try { const instance = new Clz(); // 其他逻辑 } catch (error) { console.error(error); } } someAsyncFunction(); ``` #### 检查异步加载 如果 `Clz` 是通过异步加载获取的，确保在使用之前已经加载完成。 ```javascript // 示例：异步加载模块 async function loadModule() { const { Clz } = await import('./path/to/Clz'); if (typeof Clz === 'function') { const instance = new Clz(); // 其他逻辑 } else { console.error('Clz is not a constructor'); } } loadModule(); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值