Uncaught TypeError: Cannot read property 'getScreenshot' of null at BarcodeScannerComponent.js:8

[rickwh77]

I am having an issue with getting this error when using a ternary operator to hide the barcode scanner.

      {showBarcodeReader ?
    <div>
      <BarcodeScannerComponent
        width={500}
        height={500}
        onUpdate={(err, result) => {
          if (result) setData(result.text)
          else setData('Not Found')
        }}
      />
      <p>{data}</p>
      <div>
        <Button
          variant="contained"
          size="large"
          color="primary"
          className={classes.button}
          onClick={handleBarcodeReaderCancel}
        >
          Cancel
        </Button>
      </div>
    </div>
    : null}

[j5bot]

Looks like the interval isn't cleaned up from useEffect and so capture gets called after teardown... and when it's called, the ref.current is null.

[j5bot]

The current master uses optional chaining and so you shouldn't get the error but it still needs cleanup.

Here is a commit where I do it on my fork:

https://github.com/j5bot/react-webcam-barcode-scanner/commit/49ae661b28cee712a3637df91f98f0a2454eeff2