how to use for webworker

[lhy234]

there's no 'toBuffer' nor 'canvas' in web-worker condition, how to use to generate a barcode png?

[lhy234]

there's no 'toBuffer' nor 'canvas' in web-worker condition, how to use to generate a barcode png?

require('bwip-js’) -> require('bwip-js/dist/bwip-js-node') is this the best way？

[lhy234]

require('bwip-js/dist/bwip-js-node.js') is right but require('bwip-js/dist/bwip-js-node') not

[metafloor]

Your comments are confusing. Are you running with browser web workers or using a nodejs web worker module? The node versions of bwip-js cannot work in the browser (there is no zlib module to do the png encoding). Similarly, web workers in a browser cannot access DOM elements (like canvas).

[lhy234]

browser webworkers.

there is no zlib module to do the png encoding,however ,it works in the newest chrome,using this: const bwipjs=require('bwip-js/dist/bwip-js-node.js'); const png = await bwipjs.toBuffer({ bcid:xcodeEle.BarcodeStyle.toLowerCase(), text:xcodeEle.CodeInfo.CodeValue, height:xcodeEle.MinBarHeight, width:xcodeEle.MinBarWidth, includetext: xcodeEle.ShowText }); let imageUrl = "data:image/png;base64,"+ png.toString("base64");

[metafloor]

Does your project import a zlib implementation? Otherwise, I cannot understand how that works!

[lhy234]

Does your project import a zlib implementation? Otherwise, I cannot understand how that works!

all my dependencies in package.json :

"dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@babel/core": "7.12.3",
    "@babel/helper-string-parser": "^7.18.10",
    "@babel/runtime": "^7.18.9",
    "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
    "@reduxjs/toolkit": "^1.8.3",
    "@svgr/webpack": "5.5.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@tsdotnet/array-copy": "^1.0.14",
    "@tsdotnet/common-interfaces": "^1.0.4",
    "@tsdotnet/disposable": "^1.1.20",
    "@tsdotnet/exceptions": "^1.0.16",
    "@tsdotnet/integer": "^1.0.12",
    "@tsdotnet/linq": "^1.0.11",
    "@tsdotnet/promises": "^1.0.12",
    "@tsdotnet/reflection": "^1.0.18",
    "@tsdotnet/regex": "^1.1.12",
    "@tsdotnet/serialization": "^1.0.5",
    "@tsdotnet/string-builder": "^1.0.10",
    "@tsdotnet/text-utility": "^1.0.26",
    "@types/bwip-js":"^3.0.0",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/offscreencanvas": "^2019.7.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@zxing/browser": "^0.1.1",
    "@zxing/library": "^0.19.1",
    "ace-builds": "^1.4.14",
    "ahooks": "^3.1.1",
    "antd": "^4.19.5",
    "axios": "^0.24.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.0",
    "babel-loader": "8.1.0",
    "babel-plugin-named-asset-import": "^0.3.7",
    "babel-preset-react-app": "^10.0.1",
    "bfj": "^7.0.2",
    "bwip-js": "^3.1.0",
    "camelcase": "^6.1.0",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "circular-json": "^0.5.9",
    "comlink": "^4.3.1",
    "css-loader": "4.3.0",
    "dotenv": "8.2.0",
    "dotenv-expand": "5.1.0",
    "dotnet-format": "^1.1.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-testing-library": "^3.9.2",
    "eslint-webpack-plugin": "^2.5.2",
    "file-loader": "6.1.1",
    "fontoxpath": "^3.17.2",
    "fs-extra": "^9.1.0",
    "gl-matrix": "^3.3.0",
    "html-webpack-plugin": "4.5.0",
    "htmlparser2": "^8.0.1",
    "identity-obj-proxy": "3.0.0",
    "jest": "26.6.0",
    "jest-circus": "26.6.0",
    "jest-resolve": "26.6.0",
    "jest-watch-typeahead": "0.6.1",
    "jimp": "^0.16.1",
    "jsbarcode": "^3.11.5",
    "jspdf": "^2.5.1",
    "lodash": "^4.17.21",
    "memfs": "^3.2.2",
    "mini-css-extract-plugin": "0.11.3",
    "ml-matrix": "^6.7.0",
    "nanoid": "^4.0.0",
    "optimize-css-assets-webpack-plugin": "5.0.4",
    "pnp-webpack-plugin": "1.6.4",
    "postcss-flexbugs-fixes": "4.2.1",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "8.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "5.0.2",
    "prettier": "^2.5.1",
    "prompts": "2.4.0",
    "qr-image": "^3.2.0",
    "qrcode-svg": "^1.1.0",
    "qrcode.react": "^1.0.1",
    "react": "^17.0.2",
    "react-ace": "^10.0.0",
    "react-app-polyfill": "^2.0.0",
    "react-color": "^2.19.3",
    "react-contexify": "^5.0.0",
    "react-dev-utils": "^11.0.3",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "^17.0.2",
    "react-error-overlay": "6.0.9",
    "react-redux": "^8.0.2",
    "react-refresh": "^0.8.3",
    "react-router-dom": "^6.2.2",
    "reflect-metadata": "^0.1.13",
    "resize-observer-polyfill": "^1.5.1",
    "resolve": "1.18.1",
    "resolve-url-loader": "^3.1.2",
    "save": "^2.4.0",
    "semver": "7.3.2",
    "sharp-collections": "^1.7.3",
    "slimdom": "^2.3.2",
    "slimdom-sax-parser": "1.4.0",
    "style-loader": "1.3.0",
    "terser-webpack-plugin": "4.2.3",
    "ts-pnp": "1.2.0",
    "typescript": "4.7.3",
    "url-loader": "4.1.1",
    "web-vitals": "^1.0.1",
    "webpack": "4.44.2",
    "webpack-dev-server": "3.11.1",
    "webpack-manifest-plugin": "2.2.0",
    "workbox-webpack-plugin": "5.1.4",
    "worker-plugin": "^5.0.1"
},

"devDependencies": { "@babel/plugin-proposal-export-namespace-from": "^7.18.9", "@types/react-color": "^3.0.5", "@typescript-eslint/eslint-plugin": "^4.29.2", "@typescript-eslint/parser": "^4.29.2", "babel-plugin-import": "^1.13.3", "cross-env": "^7.0.3", "eslint": "^7.32.0", "eslint-plugin-react": "^7.24.0", "eslint-plugin-react-hooks": "^4.2.0", "filemanager-webpack-plugin": "^7.0.0-beta.0", "less": "2.7.3", "less-loader": "^5.0.0", "copy-webpack-plugin": "6.0.0", "webpack-bundle-analyzer": "^4.5.0" }

and the devtool info:

and the result :

[lhy234]

well , there's zlib ,this is my yarn-lock file yarn-lock.txt

[metafloor]

That explains it. Couldn't understand how nodejs code was working in the browser. Your project is pulling in tons of polyfills that satisfy the nodejs runtime.

So, to answer your original question, because you are using the nodejs version in the browser, you have to override the export definitions in package.json. And as you discovered, it must be done by fully qualifying the path:

// commonjs 
const bwipjs = require('bwip-js/dist/bwip-js-node.js');

// -- or --
// es6 import
import bwipjs from 'bwip-js/dist/bwip-js-node.mjs';