automerge/javascript/examples/create-react-app
Alex Good 1e7dcdedec automerge-js: Add prettier
It's christmas, everyone is on holiday, it's time to change every single
file in the repository!
2022-12-22 17:33:14 +00:00
..
public Move wrappers/javascript -> javascript 2022-10-16 19:55:54 +01:00
src automerge-js: Add prettier 2022-12-22 17:33:14 +00:00
.gitignore Move wrappers/javascript -> javascript 2022-10-16 19:55:54 +01:00
craco.config.js automerge-js: Add prettier 2022-12-22 17:33:14 +00:00
package.json consolidate inserts and deletes more aggressivly into a single splice 2022-10-18 13:29:56 +01:00
README.md automerge-js: Add prettier 2022-12-22 17:33:14 +00:00
yarn.lock Bump loader-utils in /javascript/examples/create-react-app 2022-11-16 13:35:34 +00:00

Automerge + create-react-app

This is a little fiddly to get working. The problem is that create-react-app hard codes a webpack configuration which does not support WASM modules, which we require in order to bundle the WASM implementation of automerge. To get around this we use craco which does some monkey patching to allow us to modify the webpack config that create-react-app bundles. Then we use a craco plugin called craco-wasm to perform the necessary modifications to the webpack config. It should be noted that this is all quite fragile and ideally you probably don't want to use create-react-app to do this in production.

Setup

Assuming you have already run create-react-app and your working directory is the project.

Install craco and craco-wasm

yarn add craco craco-wasm

Modify package.json to use craco for scripts

In package.json the scripts section will look like this:

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

Replace that section with:

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

Create craco.config.js

In the root of the project add the following contents to craco.config.js

const cracoWasm = require("craco-wasm")

module.exports = {
  plugins: [cracoWasm()],
}