Incompatibility with `wasm-pack 0.13.0`

[acheroncrypto]

Problem

Upgrading wasm-pack to the latest version (0.13.0) results in the following error with bundlers:

Module not found: Error: Can't resolve '../../..' in '/home/runner/work/solana-playground/solana-playground/client/node_modules/@solana-playground/rust-analyzer/snippets/wasm-bindgen-rayon-7afa899f36665473/src'
Did you mean 'rust_analyzer_wasm.js'?
BREAKING CHANGE: The request '../../..' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

https://github.com/RReverser/wasm-bindgen-rayon/blob/a947bdce8ef1e4b5456b349bd5b3763fe2516e25/src/workerHelpers.worker.js#L18-L22

The structure of the wasm-bindgen generated package didn't change, but https://github.com/rustwasm/wasm-pack/pull/1061 added type: "module" to the package.json which expects full path imports.

Related upstream issue: https://github.com/rustwasm/wasm-pack/issues/1402

Solution

This should probably get fixed from wasm-pack's side by introducing an option for wasm-pack build that changes the type used.

In the meantime, there are 2 possible immediate workarounds for people who run into this:

• Remove type: "module" from the generated package.json
• Downgrade to wasm-pack 0.12.1

[noname0310]

Here's another solution using the latest version of wasm-pack, if you're having the same problem, it might help.

Just set resolvefullyspecified to false in your webpack config https://webpack.js.org/configuration/module/#resolvefullyspecified

This is how I'm applying it in my project

https://github.com/noname0310/babylon-mmd/blob/main/webpack.config.ts#L70-L73

export default (env: any): webpack.Configuration & { devServer?: WebpackDevServerConfiguration } => ({
    // ...
    module: {
        rules: [
            {
                test: /\.m?js$/,
                resolve: {
                    fullySpecified: false
                }
            },
        ]
    },
    // ...
});