The core of Replicache is written in Rust and compiled to Wasm.

Browsers have great support for Wasm these days, but Webpack 4 needs a little help...

If your webpack.config.js has a custom mainFields, you need to ensure it includes module:

  resolve: {
    ...
    mainFields: [
      ...
+     'module',
      ...
    ]
  },

replicache.js uses the newer ES feature import.meta feature to find replicache.wasm, which isn't supported by default in webpack 4.

npm install @open-wc/webpack-import-meta-loader

then, in webpack.config.js:

module: {
  rules: [
    ...
+      {
+        test: /\.js$/,
+        loader: require.resolve('@open-wc/webpack-import-meta-loader'),
+      },
    ...
  ]
}

When you instantiate Replicache, you need to tell it where the Wasm module is, since webpack is not bundling it for us:

const rep = new Replicache({
  ...

  // Only needed if replicache.wasm is not a sibling to the location the JS
  // is loading from.
  wasmModule: '/node_modules/replicache/out/replicache.wasm',
});

If you know how to teach webpack 4 to properly bundle the wasm module, please let us know 😀.