Add WASM support

packages/react-scripts/config/webpack.config.js

@@ -270,8 +270,8 @@ module.exports = function(webpackEnv) {
               : false,
           },
           cssProcessorPluginOptions: {
-              preset: ['default', { minifyFontValues: { removeQuotes: false } }]
-          }
+            preset: ['default', { minifyFontValues: { removeQuotes: false } }],
+          },
         }),
       ],
       // Automatically split vendor and commons
@@ -557,6 +557,13 @@ module.exports = function(webpackEnv) {
                 'sass-loader'
               ),
             },
+            // Adds support for dynamic loading of .wasm files like so:
+            // const { fn } = import('./module.wasm')
+            {
+              test: /\.wasm$/,
+              include: paths.appSrc,
+              use: [{ loader: require.resolve('wasm-loader'), options: {} }],
+            },
             // "file" loader makes sure those assets get served by WebpackDevServer.
             // When you `import` an asset, you get its (virtual) filename.
             // In production, they would get copied to the `build` folder.
@@ -568,7 +575,12 @@ module.exports = function(webpackEnv) {
               // its runtime that would otherwise be processed through "file" loader.
               // Also exclude `html` and `json` extensions so they get processed
               // by webpacks internal loaders.
-              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+              exclude: [
+                /\.(js|mjs|jsx|ts|tsx)$/,
+                /\.html$/,
+                /\.json$/,
+                /\.wasm$/,
+              ],
               options: {
                 name: 'static/media/[name].[hash:8].[ext]',
               },

packages/react-scripts/package.json

@@ -76,6 +76,7 @@
     "terser-webpack-plugin": "2.3.0",
     "ts-pnp": "1.1.5",
     "url-loader": "2.3.0",
+    "wasm-loader": "^1.3.0",
     "webpack": "4.41.2",
     "webpack-dev-server": "3.9.0",
     "webpack-manifest-plugin": "2.2.0",

test/fixtures/wasm-support/__snapshots__/index.test.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`can use wasm library in development 1`] = `"Ultimate answer: 42"`;
+
+exports[`can use wasm library in production 1`] = `"Ultimate answer: 42"`;

test/fixtures/wasm-support/index.test.js

@@ -0,0 +1,41 @@
+const testSetup = require('../__shared__/test-setup');
+
+const puppeteer = require('puppeteer');
+
+test('can use wasm library in development', async () => {
+  const { port, done } = await testSetup.scripts.start();
+
+  const browser = await puppeteer.launch({ headless: true });
+  try {
+    const page = await browser.newPage();
+    await page.goto(`http://localhost:${port}/`);
+    await page.waitForSelector('.wasm-result', { timeout: 0 });
+    const output = await page.evaluate(() => {
+      return Array.from(document.getElementsByClassName('wasm-result')).pop()
+        .innerHTML;
+    });
+    expect(output).toMatchSnapshot();
+  } finally {
+    browser.close();
+    done();
+  }
+});
+test('can use wasm library in production', async () => {
+  await testSetup.scripts.build();
+  const { port, done } = await testSetup.scripts.serve();
+
+  const browser = await puppeteer.launch({ headless: true });
+  try {
+    const page = await browser.newPage();
+    await page.goto(`http://localhost:${port}/`);
+    await page.waitForSelector('.wasm-result', { timeout: 0 });
+    const output = await page.evaluate(() => {
+      return Array.from(document.getElementsByClassName('wasm-result')).pop()
+        .innerHTML;
+    });
+    expect(output).toMatchSnapshot();
+  } finally {
+    browser.close();
+    done();
+  }
+});

test/fixtures/wasm-support/package.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "react": "latest",
+    "react-dom": "latest",
+    "serve": "10.0.2"
+  }
+}

test/fixtures/wasm-support/src/App.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+
+class App extends Component {
+  state = {};
+  componentDidMount() {
+    import('./hello_world_bg.wasm').then(helloWorld => {
+      this.setState({ answer: helloWorld.add(21, 21) });
+    });
+  }
+  render() {
+    const { answer } = this.state;
+    return answer ? (
+      <div className="wasm-result">Ultimate answer: {answer}</div>
+    ) : null;
+  }
+}
+
+export default App;

test/fixtures/wasm-support/src/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));