Property '__webpack_require__' doesn't exist

[MichaelDanielTom]

Hey all, I've been using this with our React-Native app, and it works great on iOS. But on Android, it has trouble importing, throwing ReferenceError: Property '__webpack_require__' doesn't exist while trying import anything from @giantmachines/redux-websocket. It appears to be coming from within dist/index.js on line 21:

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

We don't use webpack anywhere else in our app, so I was suspecting that the problem could have arose from either that, or something to do with the Metro bundler, since on Android everything runs fine while attached to the chrome debugger. Also I'm aware that this library wasn't necessarily made for React Native, but thought I'd raise this issue in case it was a more widespread problem with using different packagers or something like that.

[MichaelDanielTom]

Update: Looks like this issue is related to Hermes, since when running with V8 (which the chrome debugger uses) or with JavaScriptCore (which RN on iOS uses, and Android if Hermes is disabled), everything is fine.

The reason is that depending on your Hermes version, Reflect may not be supported, which is used in createMiddleware.js. I ended up forking redux-websocket to not use Reflect. Is there any reason that Reflect is used as opposed to normal property access?

[chenghw]

Hi @MichaelDanielTom , thanks for opening this issue. We can look into this. I think I may know what could be going wrong and it'd be tied with how we are building our library. In order to test this assumption, can you upload an example repository which would produce this error? I'll clone/fork your example and try fixing it locally.

[MichaelDanielTom]

Just made this minimal repo where I did react-native init, yarn added redux-websocket, imported it at the top of App.js, enabled hermes, and then ran it on Android, and it produced the same error. If you clone the repo, run yarn install, and then npx react-native run-android (with an android device or emulator connected to your computer), you should see the same error.

[chenghw]

I forgot how finicky React Native can be, I'm having some issues with my Android emulator starting up. In terms of the Reflect and why we're using it over normal object property access, there is probably not a good reason. When you forked and changed it to Reflect did it fix the problem?

[SystemBlad]

Hi guys, I had the same BUG using version 1.2.3, to solve it momentarily I needed to deactivate hermes. @MichaelDanielTom how had you fixed it?

[MichaelDanielTom]

Hi guys, I had the same BUG using version 1.2.3, to solve it momentarily I needed to deactivate hermes. @MichaelDanielTom how had you fixed it?

Hey SystemBlad, sorry for the late response - I actually ended up forking it and changing this line const handler = Reflect.get(handlers, baseActionType); to const handler = handlers[baseActionType]; It should have the same functionality but works with Hermes, aside from some subtle differences in error cases.

[chenghw]

Hey @MichaelDanielTom sorry going through the backlog of closed issues and see this was actually continued. Sorry for the late reply. If you put up a PR for this line change we can accept it.

Thanks,

[Alexlee500]

Hi guys, I had the same BUG using version 1.2.3, to solve it momentarily I needed to deactivate hermes. @MichaelDanielTom how had you fixed it?

Hey SystemBlad, sorry for the late response - I actually ended up forking it and changing this line const handler = Reflect.get(handlers, baseActionType); to const handler = handlers[baseActionType]; It should have the same functionality but works with Hermes, aside from some subtle differences in error cases.

Are you sure the issue is coming from Reflect? I tried this solution in my fork and the issue was not resolved. Currently on v1.5.0

// @ts-ignore
 const handler = handlers[baseActionType];

edit: When using the unbuilt code instead of packaged code, I did not run into this issue. Additionally, using it unbuilt, both const handler = Reflect.get(handlers, baseActionType); and const handler = handlers[baseActionType]; work. Looks I think it may be an issue with the build scripts and not the code.

[Ding-Fan]

To avoid this error, I have to download the .min.js file of the library I use and included it to my project.

[wolftech-app]

Alexlee500 is right, the build process is the problem in this case. For example if webpack replaced with rollup, then this problem has gone.

This package only implements just that: https://www.npmjs.com/package/@wolftech.app/redux-websocket