Runtime error on createInstance

[PaloJeDobryClovek]

Hello, I am using v8.1.2 of javascript-barcode scanner with react 16 and CRA 4.0.1, I am using example code but I have problem load scanner I still get this error, do you know where could be a problem?

Uncaught (in promise) TypeError: e is undefined
    _callee5$ dbr.browser.mjs:11
    tryCatch runtime.js:45
    invoke runtime.js:274
    method runtime.js:97
    a dbr.browser.mjs:11
    a dbr.browser.mjs:11
    onmessage dbr.browser.mjs:11
    _callee6$ dbr.browser.mjs:11
    tryCatch runtime.js:45
    invoke runtime.js:274
    method runtime.js:97
    s dbr.browser.mjs:11
    promise callback*d dbr.browser.mjs:11
    a dbr.browser.mjs:11
    a dbr.browser.mjs:11
    _callee7$/< dbr.browser.mjs:11
    _callee7$ dbr.browser.mjs:11
    tryCatch runtime.js:45
    invoke runtime.js:274
    method runtime.js:97
    a dbr.browser.mjs:11
    a dbr.browser.mjs:11
    loadWasm dbr.browser.mjs:11
    _callee8$ dbr.browser.mjs:11
    tryCatch runtime.js:45
    invoke runtime.js:274
    method runtime.js:97
    a dbr.browser.mjs:11
    a dbr.browser.mjs:11
    createInstanceInWorker dbr.browser.mjs:11
    _callee39$ dbr.browser.mjs:11
    tryCatch runtime.js:45
    invoke runtime.js:274
    method runtime.js:97
    u dbr.browser.mjs:11
    u dbr.browser.mjs:11
    createInstance dbr.browser.mjs:11
    _callee$ scanner.js:14
    tryCatch runtime.js:45
    invoke runtime.js:274
    method runtime.js:97
    asyncGeneratorStep Babel

error from broser:

Unhandled Rejection (TypeError): e is undefined
_callee$
src/components/dynamsoftScanner/scanner.js:12

   9 |     this.scanner = null;
  10 |     this.elRef = React.createRef();
  11 | }
> 12 | async componentDidMount(){
     | ^  13 |     try{
  14 |         this.scanner = this.scanner || await DBR.BarcodeScanner.createInstance();
  15 | 

tryCatch
node_modules/regenerator-runtime/runtime.js:45
invoke
node_modules/regenerator-runtime/runtime.js:274
./node_modules/regenerator-runtime/runtime.js/defineIteratorMethods/</prototype[method]
node_modules/regenerator-runtime/runtime.js:97
asyncGeneratorStep
node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:3
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message

dbr.js:

import DBR from "dynamsoft-javascript-barcode";
require('dotenv').config();
//DBR.BarcodeReader.engineResourcePath = "/dynamsoft/dist/";
DBR.BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.1.2/dist/";
// Please visit https://www.dynamsoft.com/customer/license/trialLicense to get a trial license
DBR.BarcodeReader.productKeys = process.env.REACT_APP_DYNAMSOFT_SCANNER_KEY;
// DBR.BarcodeReader._bUseFullFeature = true; // Control of loading min wasm or full wasm.
export default DBR;

scanner react component:

import DBR from "./dbr";
import React from 'react';
import './BarcodeScanner.css';

class BarcodeScanner extends React.Component {
    constructor(props){
        super(props);
        this.bDestroyed = false;
        this.scanner = null;
        this.elRef = React.createRef();
    }
    async componentDidMount(){
        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.appendMessage(result.barcodeFormatString + ': ' + txt);
            };
            await this.scanner.open();

        }catch(ex){
            //this.props.appendMessage(ex.message);
            console.error(ex);
        }
    }
    componentWillUnmount(){
        this.bDestroyed = true;
        if(this.scanner){
            this.scanner.destroy();
        }
    }
    shouldComponentUpdate(){
        // Never update UI after mount, dbrjs sdk use native way to bind event, update will remove it.
        return false;
    }
    render() {
        return (
            <div ref={this.elRef} className="component-barcode-scanner">
                <svg className="dbrScanner-bg-loading" viewBox="0 0 1792 1792"><path d="M1760 896q0 176-68.5 336t-184 275.5-275.5 184-336 68.5-336-68.5-275.5-184-184-275.5-68.5-336q0-213 97-398.5t265-305.5 374-151v228q-221 45-366.5 221t-145.5 406q0 130 51 248.5t136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5q0-230-145.5-406t-366.5-221v-228q206 31 374 151t265 305.5 97 398.5z"></path></svg>
                <svg className="dbrScanner-bg-camera" style={{display:"none"}} viewBox="0 0 2048 1792"><path d="M1024 672q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224zm-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5z"></path></svg>
                <video className="dbrScanner-video" playsInline={true}></video>
                <canvas className="dbrScanner-cvs-drawarea"></canvas>
                <div className="dbrScanner-cvs-scanarea">
                    <div className="dbrScanner-scanlight" style={{display:"none"}}></div>
                </div>
                <select className="dbrScanner-sel-camera"></select>
                <select className="dbrScanner-sel-resolution"></select>
            </div>
        );
    }
}

export default BarcodeScanner;

[Keillion]

@PaloJeDobryClovek Seems no problem. My test

May you can show me a min project.

[Keillion]

I guess you do not give a valid string to process.env.REACT_APP_DYNAMSOFT_SCANNER_KEY.

You can debug:

console.log("key: ",process.env.REACT_APP_DYNAMSOFT_SCANNER_KEY)
DBR.BarcodeReader.productKeys = process.env.REACT_APP_DYNAMSOFT_SCANNER_KEY;

[PaloJeDobryClovek]

Thans for fast reply, I tried write key and is valid.... but I tried run code from chromium and get different error (before error was from firefox)

dbr.browser.mjs:11 Uncaught (in promise) TypeError: Cannot read property 'data' of undefined
    at Function._callee5$ (dbr.browser.mjs:11)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:274)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at dbr.browser.mjs:11
    at new Promise (<anonymous>)
    at a (dbr.browser.mjs:11)
    at Worker._dbrWorker.onmessage (dbr.browser.mjs:11)

Probably is problem somewhere in my implementation or app but I don't know how to find a root cause of error

[Keillion]

@PaloJeDobryClovek My pleasure.

I cannot tell where the problem lies from these error stacks.

Can you give me a minimal project that can reproduce this problem?