Блог

Я пытаюсь интегрироваться scanner-js в свое приложение react, но получаю сообщение об ошибке TypeError: Cannot read property 'scan' of undefined .

Вы можете найти код ниже:

 import { scanner } from 'scanner-js';
class Home extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  scan = () => {
    scanner.scan(this.displayImagesOnPage, {
      output_settings: [
        {
          type: 'return-base64',
          format: 'jpg',
        },
      ],
    });
  };

  displayImagesOnPage(successful, mesg, response) {
    if (!successful) {
      // On error
      console.error('Failed: '   mesg);
      return;
    }
    if (
      successful amp;amp;
      mesg != null amp;amp;
      mesg.toLowerCase().indexOf('user cancel') >= 0
    ) {
      // User cancelled.
      console.info('User cancelled');
      return;
    }
    var scannedImages = scanner.getScannedImages(response, true, false); // returns an array of ScannedImage
    for (
      var i = 0;
      scannedImages instanceof Array amp;amp; i < scannedImages.length;
      i  
    ) {
      var scannedImage = scannedImages[i];
      var elementImg = scanner.createDomElementFromModel({
        name: 'img',
        attributes: {
          class: 'scanned',
          src: scannedImage.src,
        },
      });
    }
  }
  render() {
    return (
      <div>
        <button type="button" onClick={this.scan}>
          Scan
        </button>
      </div>
    );
  }
}

export default Home;
 

При наведении курсора мыши на scanner объект отображаются следующие данные, но я не знаю, почему он выдает неопределенную ошибку.

Может кто-нибудь помочь мне найти проблему?

Заранее спасибо.

Это потому, что вы импортируете его неправильно. Если вы проверите пакет в npm, вы увидите, что экспортируемого модуля нет, поэтому вы не можете импортировать ни один export ( import {scanner} from 'scanner-js' ), ни вы не можете импортировать export ( import scanner from 'scanner-js ) по умолчанию.

Вам нужно импортировать весь модуль только для побочных эффектов, и он добавит глобальную scanner переменную к window объекту.

 import 'scanner-js';

console.log(typeof scanner);
// => object

console.log(typeof scanner.scan);
// => function
 

Если вы используете ESLint, вам нужно добавить scanner в качестве глобальной переменной.

Ссылка на CodeSandbox: https://codesandbox.io/s/scanner-js-hcz2j