Instascan: ES6 import fails

Created on 20 Jul 2017 · 5Comments · Source: schmich/instascan

I'm trying to import the library via an ES6 import statement import InstaScan from 'instascan', which throws the following error:

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

Is it just my npm setup beeing all messed up again, or is this lib not intended to be used that way?
Probably this is just webpack messing things up...

To reproduce create a simple react based app with one of the create-react-scripts, start the dev server and try to import and/or require it from there.

Windows 10 1607 build 14393.1480
Npm 5.03
The npm module fs is installed globally and locally in the project's folder.

Source

axed

👍4

Most helpful comment

add this to your webpack config:

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

Like in https://github.com/pugjs/pug-loader/issues/8#issuecomment-55568520

raphox on 11 Aug 2017

👍10

All 5 comments

I encountered this issue in react too. I managed to get it working using find/replace in instascan/src/zxing.js. Find the 2 phrases below and replace both with empty strings.

var fs=require("fs");

var nodeFS=require("fs");

I'm honestly not very familiar with zxing.js so I don't know why this works.

ghost on 21 Jul 2017

❤2 👍1

Not sure why webbrowser targeted libs should make any use of 'fs' but your absolutely right that this was the problem!
Thank you very much for this!
Is it appropiate to make a PR for this or will @schmich take this into account?

axed on 25 Jul 2017

Unfortunately, this library breaks my webpack build process (same issue as above). The hack of @rshepp works, but is very impractical when working with multiple people on a project.

@axed Can you make a PR? That would be great :)

ssc-hrep3 on 2 Aug 2017

add this to your webpack config:

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

Like in https://github.com/pugjs/pug-loader/issues/8#issuecomment-55568520

raphox on 11 Aug 2017

👍10

add this to your webpack config:
module.exports = {
  node: {
    fs: "empty"
  },
  entry: {
    app: [
      './src/main.js'
    ]
  },
...
Like in pugjs/pug-loader#8 (comment)

alhamdulillah bisa :)