I have a component library that I want to work with create-react-app style apps.

This component library is being built with webpack and it has a dependency on a WASM module which is being built with wasm_pack.

In the component library, I dynamically import the required wasm library. This produces a code split in the component library and webpack creates an index.js file and a separate file for the code split, call it spec.js as expected.

When I try to import this library in create-react-app however, it attempts to load /static/js/spec.js when the dynamic import code is hit, but nothing is served from that endpoint.

How do you get CRA to simply grab and host the split.js file from the component library?

I have played around with the output.publicPath variable in the webpack config for the component library but that seems to simply change where CRA is trying to pull the spec.js file from.

Do I need to specify something in the package.json file for the component library to include both the main js file and the split file?

For reference the dynamic import code within the component library is

import { useEffect, useState } from 'react'

export const useValidator = () => {
  const [validator, setValidator] = useState<any>(null)
  const [validatorReady, setValidatorReady] = useState<boolean>(false)
  const [error, setError] = useState<any | undefined>(undefined)

  useEffect(() => {
    let f = async () => {
      try {
        console.log("attempting to import wasm")
        const wasm = await import( /*webpackChunkName:"spec"*/ '@maticoapp/matico_spec');
        console.log("gotWasm ", wasm)
        setValidator(wasm)
        setValidatorReady(true)
      } catch (err) {
        setError(`failed to load wasm: ${err}`)
        console.log("unexpected error in load wasm ", err);
      }
    };
    f();
  }, []);
  return { validator, validatorReady, error }
}

the webpack setup for the component library has the entry and output set as

const config = {
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath:"auto",
    filename: "index.js",
    library: {
      name: "matico_components",
      type: "umd"
    },
  },

and to handle the WASM import I have this in the component library webpack

  experiments: {
    asyncWebAssembly: true
  },

and I am using react-app-rewired on the CRA to also load in the WASM files.

Also just to note that the actual code split file ends up getting called something else. Just using spec.js here as an example.