Skip to content

Fix missing bundle issues for browsers #402

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cinderblock wants to merge 3 commits into
base: master
Choose a base branch
from
+22 −9
Open

Fix missing bundle issues for browsers #402

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8223cc2
Fixes no build files present.
cinderblock Jan 19, 2026
0a4f802
Use `prepare` to ensure deps are always built
cinderblock Jan 19, 2026
95f7329
Update README.md to clarify usage of precompiled bundle and module bu…
cinderblock Jan 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .npmignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
*~
node_modules
coverage
.nyc_output
test/
examples/
.travis.yml
.gitignore
rollup.config.js
test.js
19 changes: 11 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,10 @@ If not specified, output type is guessed from file extension.<br>
Recognized extensions are `png`, `svg` and `txt`.

### Browser
`node-qrcode` can be used in browser through module bundlers like [Browserify](https://github.com/substack/node-browserify) and [Webpack](https://github.com/webpack/webpack) or by including the precompiled bundle present in `build/` folder.
`node-qrcode` can be used in browser through module bundlers like [Browserify](https://github.com/substack/node-browserify) and [Webpack](https://github.com/webpack/webpack).

#### Module bundlers
If you're using a module bundler (Webpack, Vite, Rollup, Parcel, etc.), simply install and import the module as you would in Node.js. The bundler will automatically use the browser-compatible source files via the `browser` field in `package.json`:
```html
<!-- index.html -->
<html>
Expand All @@ -101,11 +102,13 @@ QRCode.toCanvas(canvas, 'sample text', function (error) {
})
```

#### Precompiled bundle
#### Precompiled bundle (for non-bundler usage)
If you're **not** using a module bundler and want to include the library directly via a `<script>` tag, the precompiled standalone bundle is already included when you install from npm:

```html
<canvas id="canvas"></canvas>

<script src="/build/qrcode.js"></script>
<script src="/path/to/node_modules/qrcode/build/qrcode.js"></script>
<script>
QRCode.toCanvas(document.getElementById('canvas'), 'sample text', function (error) {
if (error) console.error(error)
Expand All @@ -114,9 +117,9 @@ QRCode.toCanvas(canvas, 'sample text', function (error) {
</script>
```

If you install through `npm`, precompiled files will be available in `node_modules/qrcode/build/` folder.
The precompiled bundle has support for [Internet Explorer 10+, Safari 5.1+, and all evergreen browsers](https://browserl.ist/?q=defaults%2C+IE+%3E%3D+10%2C+Safari+%3E%3D+5.1).

The precompiled bundle have support for [Internet Explorer 10+, Safari 5.1+, and all evergreen browsers](https://browserl.ist/?q=defaults%2C+IE+%3E%3D+10%2C+Safari+%3E%3D+5.1).
**Note:** Most modern projects use bundlers (Webpack, Vite, etc.) and don't need the precompiled bundle - just `npm install qrcode` and import it.

### NodeJS
Require the module `qrcode`
Expand Down Expand Up @@ -294,13 +297,13 @@ An helper method is provided by the lib through an optional file that you can in
})
```

With precompiled bundle:
With precompiled bundle (run `npm run build` to generate these files):

```html
<canvas id="canvas"></canvas>

<script src="/build/qrcode.min.js"></script>
<script src="/build/qrcode.tosjis.min.js"></script>
<script src="/build/qrcode.js"></script>
<script src="/build/qrcode.tosjis.js"></script>
<script>
QRCode.toCanvas(document.getElementById('canvas'),
'sample text', { toSJISFunc: QRCode.toSJIS }, function (error) {
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"pretest": "npm run lint",
"test": "node --throw-deprecation test.js",
"build": "rollup -c",
"prepublish": "npm run build",
"prepare": "npm run build",
"browser": "node examples/clientsideserver.js"
},
"bin": {
Expand Down