Closed rubenkuipers closed 3 years ago
Hi @rubenkuipers ,
I write a test program for gatsby. Work well.
But the test program is not perfect. I learned that gatsby is similar to react. React will refresh or delete something accroding its life cycle logic. You may get unexpected errors when pages become complex.
So don't follow webpack sample or the test sample in this case. dbrjs react sample is a better one for getting started.
Other api in doc:
bPlaySoundOnSuccessfulRead Notice: It's an instance property.
Hi @Keillion, I have tried both examples (react and webpack) with the same result. I think this has something to do with the static html build step of Gatsby.
When I load the library and modify the settings in the same file as the scanner component it seems to work.
// import DBR from 'services/dbr';
import DBR from "dynamsoft-javascript-barcode";
import React from 'react';
import './BarcodeScanner.css';
class ScannerComp extends React.Component {
constructor(props){
super(props);
this.scanner = null;
}
async componentDidMount(){
DBR.BarcodeReader.engineResourcePath = "/dbr/";
// Please visit https://www.dynamsoft.com/customer/license/trialLicense to get a trial license
DBR.BarcodeReader.productKeys = process.env.GATSBY_DYNAMSOFT_TRIAL_KEY;
// DBR.BarcodeReader._bUseFullFeature = true; // Control of loading min wasm or full wasm.
try{
this.scanner = this.scanner || await DBR.BarcodeScanner.createInstance();
if(this.bDestroyed){
this.scanner.destroy();
return;
}
this.scanner.setUIElement(this.elRef.current);
// this.scanner.onFrameRead = results => {
// if (results.length){
// console.log(results)
// }
// };
this.scanner.onUnduplicatedRead = (txt, result) => {
this.props.onReadSuccess(result)
};
await this.scanner.open();
this.props.onInit();
} catch(ex){
// this.props.appendMessage(ex.message);
console.error(ex);
}
}
}
@rubenkuipers Yes, I have reproduce the error.
No error when run develop
, but error when run build
.
I'm looking into it.
@rubenkuipers
Gatsby's SSR environment has the two aspects not compatible with dbrjs:
1) webpack.target
is not web
, so SSR will load dbr.mjs
.
dbr.mjs
is for nodejs and dbr.browser.mjs
is for web.
2) document
, navigator
, HTMLCanvasElement
and so on, are undefined. Several sync init functions can't run.
Thus dbrjs can't work.
1) A walkaround is loading dbrjs async, so dbrjs will not be reached in SSR process.
const DBR = await import("dynamsoft-javascript-barcode");
test gatsby - load dbrjs async
2) Or load components, who use dbrjs, asynchronously.
const Foo = React.lazy(() => import('../componets/Foo));
Maybe the 2rd solution is why dbrjs can work in the same file as the scanner component.
I'm thinking about a better builtin solution in latter version.
Nowsdays only walkaround.
@Keillion Thanks for investigating and providing the workarounds. I will use workaround 2 for now..
DBRJS supports SSR to some extent in keillion-dynamsoft-javascript-barcode@0.20210123145106.0
.
You can check https://github.com/dynamsoft-rd-0/dbrjs-mass-samples/blob/master/dbrjs-gatsby/src/dbr.js for usage.
But I still don't know why DBR.BarcodeReader
is undefined
in SSR environment. 😒
This change will be release in one or two week.
@rubenkuipers
I have followed your webpack example and I'm trying to implement this example into a Gatsby app. During development, when running in the browser, everything is running fine with the config below:
services/dbr.js
But when I try to build the app using
npm run build
=gatsby build
, I get the following message:WebpackError: TypeError: Cannot set property 'engineResourcePath' of undefined
on line 4Any idea what is going wrong here?
My versions: node: v12.20.0 javascript-barcode: 8.0 gatsby: 2.28.1