React TypeScript项目中bwip-js的toCanvas方法使用问题

问题描述 #

在React TypeScript项目中使用bwip-js时，调用toCanvas方法出现类型错误：

Property 'toCanvas' does not exist on type 'typeof BwipJs'

查看VS Code的类型提示，发现默认导入的是Node.js环境的模块类型，而非浏览器环境的类型。

尝试过的无效方法 #

为了切换到浏览器模块，我尝试直接导入文件路径：

import BwipJs from "bwip-js/dist/bwip-js.js";

此时VS Code能识别toCanvas方法，但运行项目时触发模块找不到的错误：

Module not found: Error: Package path ./dist/bwip-js.js is not exported from package \node_modules\bwip-js (see exports field in \node_modules\bwip-js\package.json)

环境信息 #

• Node.js版本：v18.12.1
• React版本：^18.2.0
• TypeScript版本：^4.9.5
• bwip-js版本：^4.0.1
• 安装方式：npm安装
• 相关依赖：
  • @types/node: ^16.18.38
  • @types/react: ^18.2.14
  • buffer: ^6.0.3

原代码示例 #

import React, { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import bwipjs from 'bwip-js';

const App = () => {
  useEffect(() => {
    try {
      // 返回值是canvas元素
      let canvas = bwipjs.toCanvas('mycanvas', {
                bcid:        'code128',       // 条码类型
                text:        '0123456789',    // 要编码的文本
                scale:       3,               // 3倍缩放比例
                height:      10,              // 条码高度（毫米）
                includetext: true,            // 显示人类可读文本
                textxalign:  'center',        // 建议设置文本居中
            });
    } catch (e) {
        // `e`可能是字符串或Error对象
    }
  }, []);

  return (
    <div className="App">
      <div className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h2>Welcome to React</h2>
      </div>
      <canvas id="mycanvas"></canvas>
    </div>
  );
}

export default App;

解决步骤 #

1. 正确导入浏览器端模块 #

bwip-js v4.x版本通过package.json的exports字段定义了不同环境的入口，浏览器环境需要导入bwip-js/browser：

import bwipjs from 'bwip-js/browser';

2. 修复类型声明（若仍有报错） #

如果导入后TypeScript依然提示toCanvas不存在，可在项目的src/types/bwip-js.d.ts文件中添加自定义类型声明（没有types目录则新建）：

declare module 'bwip-js/browser' {
  import type { BwipJsOptions } from 'bwip-js';
  export default {
    toCanvas(canvas: string | HTMLCanvasElement, options: BwipJsOptions): HTMLCanvasElement;
  } & typeof import('bwip-js');
}

这样能让TypeScript正确识别浏览器端的toCanvas方法。

3. 优化React代码（推荐） #

用React的useRef获取canvas元素，避免依赖DOM ID查找，更符合React的组件化实践：

import React, { useEffect, useRef } from 'react';
import logo from './logo.svg';
import './App.css';
import bwipjs from 'bwip-js/browser';

const App = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (!canvasRef.current) return;
    
    try {
      bwipjs.toCanvas(canvasRef.current, {
        bcid:        'code128',
        text:        '0123456789',
        scale:       3,
        height:      10,
        includetext: true,
        textxalign:  'center',
      });
    } catch (e) {
      console.error('生成条码失败:', e);
    }
  }, []);

  return (
    <div className="App">
      <div className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h2>Welcome to React</h2>
      </div>
      <canvas ref={canvasRef}></canvas>
    </div>
  );
}

export default App;

4. 检查打包工具配置（按需） #

如果使用Create React App、Vite等主流打包工具，无需额外配置即可正确解析bwip-js/browser。若为自定义Webpack配置，确保开启ES模块支持，并正确处理bwip-js的导出规则。

内容的提问来源于stack exchange，提问作者JKamsker