next.js: Webpack 5 breaks dynamic wasm import for SSR

`const CopyPlugin = require(“copy-webpack-plugin”); /** @type {import(‘next’).NextConfig} */ const nextConfig = { webpack: function (config, options) { config.plugins.push(new CopyPlugin({ patterns: [ { from: “public/wasm”, to: “./static/wasm” }, ], })) return config; } }

module.exports = nextConfig `

It resolved my issue related to including wasm file in bundle

Nice idea! I made an webpack plugin to create the symlink, so it doesn’t depend on cleanDistDir.

config.plugins.push(
  new (class {
    apply(compiler) {
      compiler.hooks.afterEmit.tapPromise(
        'SymlinkWebpackPlugin',
        async (compiler) => {
          if (isServer) {
            const from = join(compiler.options.output.path, '../static');
            const to = join(compiler.options.output.path, 'static');

            try {
              await access(from);
              console.log(`${from} already exists`);
              return;
            } catch (error) {
              if (error.code === 'ENOENT') {
                // No link exists
              } else {
                throw error;
              }
            }

            await symlink(to, from, 'junction');
            console.log(`created symlink ${from} -> ${to}`);
          }
        },
      );
    }
  })(),
);

It seems like the issue is the following line part of the webpack config:

https://github.com/vercel/next.js/blob/1ebf26af784637a27fe422090418126c474353f4/packages/next/build/webpack-config.ts#L918-L921

The server output gets prefixed with 'chunks' which can’t be resolved by the static site generation.

I’ve managed to make it work by using the following webassemblyModuleFilename config in my next.config.js but that doesn’t seem ideal.

webpack: (config, { isServer }) => {
  config.experiments = { asyncWebAssembly: true };

  if (isServer) {
    config.output.webassemblyModuleFilename =
      './../static/wasm/[modulehash].wasm';
  } else {
    config.output.webassemblyModuleFilename =
      'static/wasm/[modulehash].wasm';
  }

  return config;
},

Didn’t worked without config.optimization.moduleIds = 'named';.

So the result workaround for me is:

webpack: (config, options) => {
    patchWasmModuleImport(config, options.isServer);
    return config;
},

+

function patchWasmModuleImport(config, isServer) {
    config.experiments = Object.assign(config.experiments || {}, {
        asyncWebAssembly: true,
    });

    config.optimization.moduleIds = 'named';

    config.module.rules.push({
        test: /\.wasm$/,
        type: 'webassembly/async',
    });

    // TODO: improve this function -> track https://github.com/vercel/next.js/issues/25852
    if (isServer) {
        config.output.webassemblyModuleFilename = './../static/wasm/[modulehash].wasm';
    } else {
        config.output.webassemblyModuleFilename = 'static/wasm/[modulehash].wasm';
    }
}

@michalzalobny these are from node.js bult-in modules - join is from node:path while access and symlink are from node:fs/promises.

Nice idea! I made an webpack plugin to create the symlink, so it doesn’t depend on cleanDistDir.

config.plugins.push(
  new (class {
    apply(compiler) {
      compiler.hooks.afterEmit.tapPromise(
        'SymlinkWebpackPlugin',
        async (compiler) => {
          if (isServer) {
            const from = join(compiler.options.output.path, '../static');
            const to = join(compiler.options.output.path, 'static');

            try {
              await access(from);
              console.log(`${from} already exists`);
              return;
            } catch (error) {
              if (error.code === 'ENOENT') {
                // No link exists
              } else {
                throw error;
              }
            }

            await symlink(to, from, 'junction');
            console.log(`created symlink ${from} -> ${to}`);
          }
        },
      );
    }
  })(),
);

When I try to push this plugin it breaks and says that It could not find the join, access, and symlink functions. Where are they declared in your webpack code?

Vercel being serverless might be peculiar about what Node.js APIs you can use (here node:fs/promises and node:path).

Usually there’s a solution in configuring Vercel for runtime filesystem emulation, but since this is a build-time issue, it won’t be of any use here.