Instascan: L'importation ES6 échoue

Créé le 20 juil. 2017 · 5Commentaires · Source: schmich/instascan

J'essaie d'importer la bibliothèque via une instruction d'importation ES6 import InstaScan from 'instascan' , qui renvoie l'erreur suivante :

ERROR in ./node_modules/instascan/src/zxing.js
Module not found: Error: Can't resolve 'fs' in 'C:\projects\my_project\node_modules\instascan\src'
 @ ./node_modules/instascan/src/zxing.js 4:725-738 4:313578-313591
 @ ./node_modules/instascan/src/scanner.js
 @ ./node_modules/instascan/index.js
 @ ./src/components/qrcode-scanner.component.js
 @ ./stories/qrcode-scanner.component.story.js
 @ ./stories/index.js
 @ ./.storybook/config.js

Est-ce simplement que ma configuration npm est à nouveau gâchée, ou cette bibliothèque n'est-elle pas destinée à être utilisée de cette façon?
C'est probablement juste un webpack qui gâche les choses...

Pour reproduire, créez une application simple basée sur la réaction avec l'un des scripts create-react, démarrez le serveur de développement et essayez de l'importer et/ou de l'exiger à partir de là.

Windows 10 1607 build 14393.1480
Npm 5.03
Le module npm fs est installé globalement et localement dans le dossier du projet.

Source

axed

👍4

Commentaire le plus utile

ajoutez ceci à votre configuration webpack :

module.exports = {
  node: {
    fs: "empty"
  },
  entry: {
    app: [
      './src/main.js'
    ]
  },
...

Comme dans https://github.com/pugjs/pug-loader/issues/8#issuecomment -55568520

raphox le 11 août 2017

👍10

Tous les 5 commentaires

J'ai également rencontré ce problème en réaction. J'ai réussi à le faire fonctionner en utilisant find/replace in instascan/src/zxing.js . Trouvez les 2 phrases ci-dessous et remplacez les deux par des chaînes vides.

var fs=require("fs");

var nodeFS=require("fs");

Honnêtement, je ne connais pas très bien zxing.js, donc je ne sais pas pourquoi cela fonctionne.

ghost le 21 juil. 2017

❤2 👍1

Vous ne savez pas pourquoi les bibliothèques ciblées par navigateur Web devraient utiliser « fs », mais vous avez absolument raison de dire que c'était le problème !
Merci beaucoup pour cela!
Est-il approprié de faire un PR pour cela ou @schmich en tiendra-t-il compte ?

axed le 25 juil. 2017

Malheureusement, cette bibliothèque interrompt mon processus de création de pack Web (même problème que ci-dessus). Le hack de @rshepp fonctionne, mais est très peu pratique lorsque vous travaillez avec plusieurs personnes sur un projet.

@axed Pouvez-vous faire un PR ? Ce serait génial :)

ssc-hrep3 le 2 août 2017

ajoutez ceci à votre configuration webpack :

module.exports = {
  node: {
    fs: "empty"
  },
  entry: {
    app: [
      './src/main.js'
    ]
  },
...

Comme dans https://github.com/pugjs/pug-loader/issues/8#issuecomment -55568520

raphox le 11 août 2017

👍10

ajoutez ceci à votre configuration webpack :
module.exports = {
  node: {
    fs: "empty"
  },
  entry: {
    app: [
      './src/main.js'
    ]
  },
...
Comme dans pugjs/pug-loader#8 (commentaire)

alhamdoulillah bisa :)