Comments (1)
This issue results from the combination of a few peculiarities:
-
The file
zbar.wasm
is loaded by a loader created by Emscripten. Even if created as an ES6 module, this loader references__dirname
and usesrequire('fs')
andrequire('path')
. This is a known issue. -
For pre-rendering, Next.js evaluates React components also in a Node context .
-
@undecaf/zbar-wasm
requires the filezbar.wasm
to be located in the same directory as thezbar-wasm
JS code.
Solution:
-
Instead of
import
ing,require(@undecaf/zbar-wasm)
in Next.js React components:import type { NextPage } from 'next' // Avoid importing from '@undecaf/zbar-wasm' const { scanImageData } = require('@undecaf/zbar-wasm') const Home: NextPage = () => { const scan = (image: ImageData) => { return scanImageData(image) } return ( <div>Hello!</div> ) } export default Home
This covers 1. and 2. in Node context.
-
Provide stubs for
fs
andpath
in browser context. This can be done by adding a custom Webpack config innext.config.js
:/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, swcMinify: true, webpack(config, { isServer }) { if (!isServer) { // Resolve node modules that are irrelevant for the client config.resolve.fallback = { ...config.resolve.fallback, fs: false, path: false, } } return config }, } module.exports = nextConfig
This covers 1. in browser context.
-
Have Webpack copy
zbar.wasm
to where the chunk containing thezbar-wasm
JS code resides. This requires thecopy-webpack-plugin
:yarn add -D copy-webpack-plugin
Then we need to extend
next.config.js
like so:const CopyPlugin = require('copy-webpack-plugin') /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, swcMinify: true, webpack(config, { isServer }) { // Copy zbar.wasm to where the chunk containing zbar-wasm is located config.plugins.push(new CopyPlugin({ patterns: [ { // In this project, zbar-wasm becomes part of static/chunks/pages/_app.js from: 'node_modules/@undecaf/zbar-wasm/dist/zbar.wasm', to: 'static/chunks/pages/' }, ], })) if (!isServer) { // Resolve node modules that are irrelevant for the client config.resolve.fallback = { ...config.resolve.fallback, fs: false, path: false, } } return config }, } module.exports = nextConfig
This covers 3.
I made a pull request to https://github.com/Loskir/zbar-wasm-nextjs that contains all these changes and fixes this issue.
from zbar-wasm.
Related Issues (19)
- big images cannot be scanned succesfully, in the first attempt. HOT 7
- webpack error migrating from 0.9.15 -> 0.9.16 HOT 5
- How to bundle zbar.wasm in a module project? HOT 6
- The barcode type DataMatrix is not supported HOT 1
- Please Help : Why i show this error when i tray import the package in Angular 16 HOT 1
- Build fails when using in Next.js App directory router. HOT 2
- [BUG] WebAssembly.Module doesn't parse at byte 1227: invalid opcode 192, in function at index 28 HOT 7
- [BUG] On IOS Safari Iphone 12 - after background/sleep mode reactivation changes camera to fisheye HOT 8
- Feature Suggestion: Allow Passing the Zbar Instance HOT 6
- [BUG] Not able to scan the barcode of this image using this library, however able to scan it with the phone app HOT 5
- Prepare for a NPM release of this package please HOT 1
- [BUG] Combined scan symbol type not recognized HOT 1
- Paused when failed to detect unsupported code type. HOT 2
- zbar-wasm doesn't work with nodejs 18
- TypeError: Failed to construct 'URL': Invalid URL HOT 5
- Issue with utf-8 HOT 13
- after 15 june this package giving an error HOT 2
- loading zbar-wasm as ES module fails in Node HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from zbar-wasm.