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.

wasm-bindgen-rayon/src/workerHelpers.worker.js

Lines 18 to 22 in a947bdc

	// This might need updating if the generated structure changes on wasm-bindgen
	// side ever in the future, but works well with bundlers today. The whole
	// point of this crate, after all, is to abstract away unstable features
	// and temporary bugs so that you don't need to deal with them in your code.
	import initWbg, { wbg_rayon_start_worker } from '../../../';

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

Related upstream issue: rustwasm/wasm-pack#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
                }
            },
        ]
    },
    // ...
});