Webpack bundling a library that uses another library that contains WebAssembly gives several files as output, but the paths to them are not relative

Viewed 196

I'm making a custom element using Svelte, that I plan to publish to NPM as a library. The component uses a library I made, that uses WebAssembly. When I build the Svelte library with Webpack, it gives me three files.

  • 1.1.js
  • [hash].wasm
  • bundle.js

bundle.js references both the wasm file and 1.1.js. This works in the project folder itself, but when I npm pack it and try to use it in another project, it can't find the 1.1.js file or the wasm file. Apparently, the paths are relative to the website root instead of eg. /1.1.js instead of node_modules/packageName/1.1.js. I really have no clue how to fix this. Any ideas?

The start of my webpack config file looks like this:

const config: webpack.Configuration & WebpackDevServer.Configuration = {
    entry: {
        bundle: [
            './src/main.ts',
        ],
    },
    resolve: {
        alias: {
            // Note: Additional aliases will be loaded automatically from `tsconfig.compilerOptions.paths`
            svelte: path.resolve('node_modules', 'svelte'),
        },
        extensions: ['.mjs', '.js', '.ts', '.svelte'],
        mainFields: ['svelte', 'browser', 'module', 'main'],
    },
    output: {
        path: __dirname + '/public/build',
        filename: '[name].js',
        chunkFilename: '[name].[id].js',
    },
    ...

I have tried both importing the bundle.js directly with HTML, and importing the package using import x from y syntax in a JavaScript file, and running Webpack on the project that uses the Svelte component. I get errors such as this ChunkLoadError: Loading chunk 1 failed. (error: http://localhost:8080/1.1.js)

0 Answers
Related