Fixing Webpack require warning when using wasm-bindgen

[Pauan]

When using the getrandom library with wasm-bindgen + Webpack it uses require("crypto") in order to load the NodeJS crypto module. However, Webpack does not like that, so it gives a warning.

This PR fixes that warning by instead using module.require("crypto").

You can see more details here:

rustwasm/wasm-pack#822

webpack/webpack#8826

[simonwep]

Thank's for the quick fix! Could someone take a look at it, maybe @newpavlov?

[newpavlov]

Looks good to me, but I am not familiar with webpack and Node, so I would prefer for someone else to take a look at it. CI failures are not caused by this PR, but I think ideally we should first fix CI, then rebase this PR and merge it after successful CI passes.

Also could you please submit these changes to v0.2 branch as a separate PR? In it wasm code is moved to separate crates.

[IcanDivideBy0]

Oops, I didn't realized there's already a PR for that. I just submitted another one with a better solution IMO #138

[josephlr]

This looks good to me (modulo nits). I really wish we could have got the wasm-bindgen module attribute to work, but as I noted in #138, that attribute makes things break on the Web (why? I have no idea).

#141 fixes the CI, so we should be able to test this PR if you rebase on top of it (or you can just wait for that to be merged).

[josephlr]

Formatting nit: could we just put all of the Node.js declarations in their own block. Something like:

#[wasm_bindgen]
extern "C" {
    type NodeModule;
    #[wasm_bindgen(js_name = module)]
    static MODULE: NodeModule;

    #[derive(Clone, Debug)]
    type NodeCrypto;
    #[wasm_bindgen(method)]
    fn require(this: &NodeModule, s: &str) -> NodeCrypto;

    #[wasm_bindgen(method, js_name = randomFillSync)]
    fn random_fill_sync(this: &NodeCrypto, buf: &mut [u8]);
}

[Pauan]

@josephlr module doesn't work because ES6 modules are unconditionally always imported.

In order to conditionally import a module, you have to use dynamic import(), but that returns a Promise so that won't work for getrandom.

So the only option is to use the NodeJS-specific module.require function.

[Pauan]

@josephlr Unfortunately #141 was done against the 0.2 branch, so it doesn't fix the errors for this PR.

[josephlr]

@josephlr Unfortunately #141 was done against the 0.2 branch, so it doesn't fix the errors for this PR.

@Pauan, that's my bad. #142 fixes the CI on master and #143 applies these changes to the 0.2 branch. So we should be good once #142 is merged.

[josephlr]

I just rebased this onto master (now that #142 has been merged)

[huacnlee]

Still have this issue when I use getrandom = { version = "0.2.3", features = ["js"] }

[dependencies]
getrandom = { version = "0.2.3", features = ["js"] }
wasm-bindgen = {version = "0.2.76", features = ["serde-serialize"]}

Webpack version: webpack 5.51.1
Compile for Browser

Critical dependency: the request of a dependency is an expression

[josephlr]

@huacnlee do you have any more specific reproduction instructions? Do you know why the above fix is only just now not working? If so, can you open a new issue about this?

[huacnlee]

huacnlee/autocorrect#8

@josephlr I just add a example, please checkout it.

I found that when I use Webpack 4 with JavaScript it is work will, but when I upgrade Webpack 5 + TypeScript it's can not work.

[Herohtar]

@josephlr I'm experiencing this issue as well using getrandom with Webpack 5 and came across this while trying to resolve it. It looks like Webpack 5 now warns about module.require, as it calls out that specific line in the generated code:

export function __wbg_modulerequire_3440a4bcf44437db() { return handleError(function (arg0, arg1) {
    var ret = module.require(getStringFromWasm0(arg0, arg1)); // <-- Critical dependency: the request of a dependency is an expression
    return addHeapObject(ret);
}, arguments) };

[josephlr]

@huacnlee @Herohtar I opened #224 to track this, lets move the discussion there.