Tengo una biblioteca de componentes con la que quiero trabajar con aplicaciones de estilo create-react-app.

Esta biblioteca de componentes se crea con webpack y depende de un módulo WASM que se crea con wasm_pack.

En la biblioteca de componentes, importo dinámicamente la biblioteca wasm requerida. Esto produce una división de código en la biblioteca de componentes y el paquete web crea un archivo index.js y un archivo separado para la división de código, llámelo spec.js como se esperaba.

Sin embargo, cuando intento importar esta biblioteca en create-react-app, intenta cargar /static/js/spec.js cuando se activa el código de importación dinámica, pero no se sirve nada desde ese punto final.

¿Cómo logra que CRA simplemente tome y aloje el archivo split.js de la biblioteca de componentes?

He jugado con la variable output.publicPath en la configuración del paquete web para la biblioteca de componentes, pero parece que simplemente cambia de dónde CRA intenta extraer el archivo spec.js.

¿Debo especificar algo en el archivo package.json para que la biblioteca de componentes incluya tanto el archivo js principal como el archivo dividido?

Como referencia, el código de importación dinámica dentro de la biblioteca de componentes es

 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 } }

la configuración del paquete web para la biblioteca de componentes tiene la entrada y la salida establecidas como

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

y para manejar la importación de WASM, tengo esto en el paquete web de la biblioteca de componentes

 experiments: { asyncWebAssembly: true },

y estoy usando react-app-rewired en el CRA para cargar también los archivos WASM.

También solo para tener en cuenta que el archivo dividido de código real termina llamándose de otra manera. Solo usando spec.js aquí como ejemplo.