Cannot read property 'slice' of null (Create React App project)

[lnhrdt]

instascan throws an error in my projects:

TypeError: Cannot read property 'slice' of null parseJSFunc node_modules/instascan/src/zxing.js:4

The projects are created with Create React App 2. CRA2 is currently in alpha but is otherwise very stable and instascan is the first dependency I've come across that does not work. Perhaps the issue is within instascan.

I originally reported an issue in react-instascan (rubenspgcavalcante/react-instascan/issues/9) but the author looked into it and believes the issue is within instascan.

I've created a repository that reproduces the error: https://github.com/lnhrdt/react-instascan-error

Any ideas?

[rubenspgcavalcante]

Hi, just to give more info about the problem. In the create-react-app example from @lnhrdt , if you just overwrite the entire index.js with...

import {Camera} from "instascan";
Camera.getCameras().then(cameras => console.log(cameras));

...the error will happen. What I saw is some problem with the internal resolution of that script in the code. I noted this zxing script (minified) is added directly to the project and not as a dependence (should this bundled file came from this project?) Anyway if this is the case, maybe just add that package, using npm/yarn instead and check if the umd resolution works? 🤔

[lnhrdt]

Thanks for the extra info @rubenspgcavalcante!

I just updated the example repo to remove the react-instascan dependency and demonstrate the error using just instascan, the way Rubens suggested.

https://github.com/lnhrdt/react-instascan-error

[rubenspgcavalcante]

@lnhrdt , maybe this one is also related #121 The error is different, but I still thinking that's something with the internal module resolution 🤔

[lnhrdt]

Good insight @rubenspgcavalcante, seems likely. The instascan author hasn't participated in that discussion yet. @schmich do you have any insight in to this issue (which may be related to #121)? Your thoughts would be helpful here!

[karenjwap]

Error comes from a syntax change during transpilation.

in zxing.js, replace: var sourceRegex=/^function\s*(([^)]))\s{\s*([^]?)[\s;](?:return\s(.?)[;\s])?}$/;

by: var sourceRegex=/^function\s*\S*(([^)]))\s{\s*([^]?)[\s;](?:return\s(.?)[;\s])?}$/;

worked for me.

[augustofontes]

+1

[ZeeCoder]

That didn't work for me @karenjwap , but pointed me in the right direction. Ideally the Emscripten JavaScript build of the C++ port of the ZXing Java library should be rebuilt, as it seems the current one might not be compatible with newer browsers.

Essentially an object with function as values gets turned into strings, then parsed for their arguments, body and return value. The regex that's responsible for this pattern matching however does not account for function names, only nameless functions pass.

tldr Anyway, here's the solution:

Replace the sourceRegex bit with the following regex:

/^function[^\(]*\(([^)]*)\)\s*{\s*([^*]*?)[\s;]*(?:return\s*(.*?)[;\s]*)?}$/

Or just use a fork: https://github.com/CrowdReactive/instascan