Can't make Haul to work together with Realm

[ferrannp]

Current Behavior

Compiling fails.

Expected Behavior

To compile.

Haul Configuration (webpack.haul.js)

Default.

Your Environment

software	version
Haul	1.0.0-beta.13
react-native	0.50.3
node	8.4.0
yarn	1.5.1
realm	2.2.13

Stacktrace:

./node_modules/realm/lib/index.js
102:27-55 Critical dependency: the request of a dependency is an expression
   at CommonJsRequireContextDependency.getWarnings (/Users/ferrannp/Development/Projects/ReactNative/Showman/node_modules/webpack/lib/dependencies/ContextDependency.js:39:18)
   at Compilation.reportDependencyErrorsAndWarnings (/Users/ferrannp/Development/Projects/ReactNative/Showman/node_modules/webpack/lib/Compilation.js:703:24)
   at Compilation.finish (/Users/ferrannp/Development/Projects/ReactNative/Showman/node_modules/webpack/lib/Compilation.js:561:9)
   at applyPluginsParallel.err (/Users/ferrannp/Development/Projects/ReactNative/Showman/node_modules/webpack/lib/Compiler.js:506:17)
   at /Users/ferrannp/Development/Projects/ReactNative/Showman/node_modules/tapable/lib/Tapable.js:289:11
   at _addModuleChain (/Users/ferrannp/Development/Projects/ReactNative/Showman/node_modules/webpack/lib/Compilation.js:507:11)
   at processModuleDependencies.err (/Users/ferrannp/Development/Projects/ReactNative/Showman/node_modules/webpack/lib/Compilation.js:477:14)
   at _combinedTickCallback (internal/process/next_tick.js:131:7)
   at process._tickCallback (internal/process/next_tick.js:180:9)
@ ./node_modules/realm/lib/index.js
@ ./src/database/index.js
@ ./src/root.js
@ ./src/index.js
@ ./index.ios.js
@ multi ./node_modules/haul/src/utils/polyfillEnvironment.js ./index.ios.js

[dbuarque]

Hey @ferrannp did have found a solution for that?

[zamotany]

The error is caused by dynamic require here: https://github.com/realm/realm-js/blob/e53cb3c7b14df7c9d8ca50e03e5c02f95b8f1154/lib/user-methods.js#L26-L28 which from the Webpack point of view cannot be statically analysed hence the error.

[dbuarque]

Hey @zamotany, thanks for the answer, can I do something about this in webpack config?

[Exulansis]

Did anyone manage to move forward on this?

[danielkcz]

As far as I know, the Webpack does not support dynamic require except using require.context (non-standard) and with Webpack 4 there should be support for dynamic import. I think you need to open issue in Realm repo to support Webpack, there is nothing Haul can do about this. But hey, I am no expert here :)

Edit: Or perhaps webpack.ContextReplacementPlugin plugin could do some good, but haven't used that yet.

[rdy]

It looks like the dynamic require it is trying to do isn't really necessary as long as it has fetch ( i think haul already tries to polyfill fetch on its own). Have you tried forking realm and tried:

const performFetch = fetch;

[zamotany]

As @FredyC said, there's nothing we can do in haul to make it works. This needs to be handled either in Realm codebase itself or make a fork or use patch-package

[krizzu]

As @zamotany said, Haul cannot do anything about it. However, to make Realm work with Haul, you have to noop expression requires (and my suggestion is to use patch-package when you do so, to make this only once).

1. Link realm (react-native link)
2. (optional) Add patch-package as dev-dep
3. Go to node_modules/realm/lib/index.js
   1. Change const require_method = require; to const require_method = () => {};
4. Go to node_modules/realm/lib/user-methods.js
   1. Change const require_method = require; to const require_method = () => {};
5. (optional) run yarn patch-package realm
6. (optional) Store patches in your repo

This correctly make realm work in context of ReactNative.

[danielkcz]

Wow, @Krizzu that's super dirty, did not even know that something like patch-package exists :D I think it would be way easier to consult this with maintainers and create a fork in meantime. It looks like that proper build steps are included so it doesn't need to be published to NPM, just yarn add name/realm-js to install the fork.

Looking at the Realm code I am failing to understand why this even exists there. Why not to use require call directly since it's used only to load node-fetch module? It's some dirty practice happening there.

[krizzu]

@FredyC patch-package is there so you don't have to create forks :) Besides, this will just bypass webpack's complain about expression requirements

[zamotany]

@FredyC

@Krizzu's solution is way cleaner than some production code I have seen 😂

[Exulansis]

Thank you everyone for the suggestions, I tried the approaches mentioned here, and did manage to get over the webpack complaints mentioned in this issue.

The app bundles fine, but fails to run on the device. I get the error: SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.

I need to get a better understanding of webpack / babel, it looks like Realm uses es6 syntax in the files it exports, and for some reason the device running the code does not like it. I will keep digging, or perhaps settle for another database implementation)

Thank you everyone!

[rdy]

@Exulansis you can configure the babel-loader to parse realm, by default I think it skips node modules, just do so in your webpack.haul.js. Provided you have the right transforms in your babelrc it should work.