React TypeScript 应用程序中的 bwip-js `toCanvas` 方法存在问题

Question

我正在我的 React TypeScript 应用程序中使用

bwip-js

，并且遇到了

toCanvas

方法的问题。当我尝试使用它时，我收到错误：

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

。

在 VS Code 中检查

bwip-js

类型后，它似乎正在导入 Node 模块类型而不是浏览器模块类型。 package.json 可以在这里找到：bwip-js package.json

为了解决此问题，我尝试使用以下行直接导入浏览器模块类型：

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)

有谁知道如何在 React TypeScript 应用程序的浏览器环境中成功使用

toCanvas

中的

bwip-js

方法？任何帮助将不胜感激。

附加信息：

Node.js Version: v18.12.1

React Version: ^18.2.0

TypeScript Version: ^4.9.5

bwip-js Version: ^4.0.1

Installation Method: The bwip-js library was installed via npm, as indicated in the package.json file.

Relevant Dependencies: Other dependencies that might interact with bwip-js include:
    @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 {
      // The return value is the canvas element
      let canvas = bwipjs.toCanvas('mycanvas', {
                bcid:        'code128',       // Barcode type
                text:        '0123456789',    // Text to encode
                scale:       3,               // 3x scaling factor
                height:      10,              // Bar height, in millimeters
                includetext: true,            // Show human-readable text
                textxalign:  'center',        // Always good to set this
            });
    } catch (e) {
        // `e` may be a string or Error object
    }
  }, []);

  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;

Answer 1

您成功解决这个问题了吗？我也面临这个问题