Passthrough wasm files to webpack internal loaders

[pmrcunha]

Closes #4912.

Hi!
I was unable to load a .wasm file in an app generated with CRA, since the file-loader was catching it and throwing an error.

After ejecting, I realized that a minor change would allow the wasm files to be handled by webpack's internal loaders. This PR adds that change to CRA, so that wasm can be used without ejecting.

I tested my changes manually, by creating an app with CRA, linking my version of react-scripts, running the app normally, and then running the app loading an hello-world wasm project.

Hope this is useful!

[ianschmitz]

Interesting! If we were to make this change, perhaps we should add the extension to

create-react-app/packages/react-scripts/config/paths.js

Line 49 in b4fe788

const moduleFileExtensions = [

Presumably you could then import ./foo which could resolves ./foo.wasm. Webpack appears to support this behavior by default: https://webpack.js.org/configuration/resolve/#resolveextensions

[pmrcunha]

Hey! I made and tested the change you suggested.
Also, here's a test repo, for reference: https://github.com/pmrcunha/cra-wasm-test

[ianschmitz]

It's not quite clear to me if this is fully supported on webpack's side. It sounds like it's still very much experimental. For example this PR: webpack/webpack#9415 as well as https://github.com/webpack/webpack/blob/master/examples/wasm-simple/webpack.config.js seem to indicate setting experiments properties. Reading the default config logic seems to confirm as well: https://github.com/webpack/webpack/blob/3518ad590f353d53011bdeb466130783821a168f/lib/WebpackOptionsDefaulter.js#L180-L187.

[pmrcunha]

I think you're right: https://github.com/webpack/changelog-v5/blob/master/README.md#experiments

I'm quite new to wasm myself, so my idea was more that CRA could allow people to experiment with wasm without ejecting, by letting the wasm files through, not so much to fully support it. I totally get it if you feel that that could be risky though.

[ianschmitz]

Thanks for the link! This line in that change log is interesting:

Note that this also means .mjs support and WebAssembly support are now disabled by default.

If that's the case, it's not likely that we will want to enable this under the experiments option when webpack 5 is released, in which case this PR would no longer function correctly. When they consider the feature stable we would likely re-evaluate and include support from our end.

I'm going to close this for now, but please do let us know when it becomes stable in webpack and we'll do our best to support it!