nextjs - 💡(How to fix) Fix turbopack doesn't support wasm files [11 comments, 7 participants]

TL;DR

The issue can likely be fixed by configuring Turbopack to recognize and handle wasm files properly, similar to how Webpack is configured.

Guidance

• The error message indicates that the module type for the wasm file is unknown, suggesting a configuration issue with Turbopack.
• To verify the issue, try to import a wasm file in a Next.js project using Turbopack and observe if the same error occurs.
• Compare the Webpack configuration that works with the current Turbopack configuration to identify potential differences in handling wasm files.
• Consider adding a similar configuration for Turbopack to handle wasm files as assets, potentially using a plugin or loader.

Example

No explicit code example is provided due to the lack of direct Turbopack configuration details in the issue, but the Webpack example given can serve as a reference point for how to handle wasm files:

// Webpack configuration example
webpack: (config) => {
  config.module.rules.push({
    test: /\.wasm/,
    type: 'asset/resource',
  })
  // ...
}

A similar approach might be needed for Turbopack, but the exact implementation details are not provided in the issue.

Notes

The solution may depend on the specific version of Turbopack and Next.js being used, as well as any custom configurations or plugins that are in place.

Recommendation

Apply a workaround by configuring Turbopack to handle wasm files, potentially by using a plugin or loader similar to how it's done in Webpack, as the issue seems to be related to the configuration of Turbopack rather than a version issue.