Qwik.js框架代码优化器是否存在问题？报Cannot read properties of null错误

问题背景 #

遇到Qwik.js代码优化器抛出的内部服务器错误，无法调试该问题。相关代码及错误信息如下：

相关代码 #

const drawImageTask = useVisibleTask$(() => {
    const canvas = canvasSignal.value;
    if (canvas) {
      const ctx = canvas.getContext('2d');
      const img = new Image();
      img.src = mapProps.imageUrl;
      img.onload = async () => {
        const canvasSize = calculateCanvasSize(img); // < ------------------------- 触发错误

function calculateCanvasSize(image: HTMLImageElement) {
    const aspectRatio = image.width / image.height;
    const canvasWidth = window.innerWidth;
    const canvasHeight = canvasWidth / aspectRatio;
    return [canvasWidth, canvasHeight];
  }

错误信息 #

12:02:14 AM [vite] Internal server error: Cannot read properties of null (reading '0')
Plugin: vite-plugin-qwik
文件路径：G:/projects/websites/LoreCoords/Qwik Basic Template/src/components/map/map.tsx

调用栈 #

at createRollupError2 (G:\projects\websites\LoreCoords\Qwik Basic Template\node_modules@builder.io\qwik\optimizer.cjs:1624:38)
at G:\projects\websites\LoreCoords\Qwik Basic Template\node_modules@builder.io\qwik\optimizer.cjs:2166:49
at Array.forEach ()
at G:\projects\websites\LoreCoords\Qwik Basic Template\node_modules@builder.io\qwik\optimizer.cjs:2164:23
at Object.transform (G:\projects\websites\LoreCoords\Qwik Basic Template\node_modules@builder.io\qwik\optimizer.cjs:1314:9)
at TransformContext.transform (G:\projects\websites\LoreCoords\Qwik Basic Template\node_modules@builder.io\qwik\optimizer.cjs:2204:27)
at Object.transform (file:///G:/projects/websites/LoreCoords/Qwik%20Basic%20Template/node_modules/vite/dist/node/chunks/dep-79892de8.js:43387:44)
at async loadAndTransform (file:///G:/projects/websites/LoreCoords/Qwik%20Basic%20Template/node_modules/vite/dist/node/chunks/dep-79892de8.js:41105:29)

解决方案 #

1. 修复代码语法问题：原代码中img.onload的箭头函数、useVisibleTask$的回调函数均未闭合，导致Qwik优化器解析代码时出错。修正后的代码如下：

const drawImageTask = useVisibleTask$(() => {
    const canvas = canvasSignal.value;
    if (canvas) {
      const ctx = canvas.getContext('2d');
      const img = new Image();
      img.src = mapProps.imageUrl;
      img.onload = async () => {
        const canvasSize = calculateCanvasSize(img);
        // 后续使用canvasSize的业务逻辑
      }; // 闭合onload箭头函数
    }
}); // 闭合useVisibleTask$回调函数

function calculateCanvasSize(image: HTMLImageElement) {
    const aspectRatio = image.width / image.height;
    const canvasWidth = window.innerWidth;
    const canvasHeight = canvasWidth / aspectRatio;
    return [canvasWidth, canvasHeight];
}

2. 添加图像加载错误处理：避免运行时因图片加载失败导致的后续问题：

img.onerror = () => {
    console.error('图片加载失败', mapProps.imageUrl);
};

3. 更新Qwik依赖：若语法修复后仍报错，尝试升级Qwik及相关插件到最新版本，可能是优化器的已知bug已被修复：

npm update @builder.io/qwik vite-plugin-qwik

内容的提问来源于stack exchange，提问作者Adam R. Turner