Блог

Главная - Вопросы по программированию - Как я могу импортировать WebAssembly rust в NextJS?

Как я могу импортировать WebAssembly rust в NextJS?

#next.js #webassembly

Вопрос:

Я использую nextjs, я использую:

 import { greet } from "backend";

Это package.json зависимости:

 "dependencies": { "backend": "file:../backend/pkg", "next": "11.1.2", "react": "17.0.2", "react-dom": "17.0.2", "webpack": "^5.52.0" },

Это моя конфигурация на nextjs.config.js :

 module.exports = { 
reactStrictMode: true,
experiments: { asyncWebAssembly: true, buildHttp: true, executeModule: true, layers: true, lazyCompilation: true, outputModule: true, syncWebAssembly: true, topLevelAwait: true, },
}

И в этом моя ошибка:

 Module parse failed: Unexpected character '' (1:0) The module seem to be a WebAssembly module, but module is not flagged as WebAssembly module for webpack. BREAKING CHANGE: Since webpack 5 WebAssembly is not enabled by default and flagged as experimental feature. You need to enable one of the WebAssembly experiments via 'experiments.asyncWebAssembly: true' (based on async modules) or 'experiments.syncWebAssembly: true' (like webpack 4, deprecated). For files that transpile to WebAssembly, make sure to set the module type in the 'module.rules' section of the config (e. g. 'type: "webassembly/async"'). (Source code omitted for this binary file)

Комментарии:

1. Вы нашли решение этой проблемы, если да, не могли бы вы, пожалуйста, поделиться им со мной? Прямо сейчас у меня та же проблема.

Ответ №1:

Ошибка журнала исходит от Webpack, а не от next. Вам нужно отредактировать webpack.config, чтобы сделать это в соответствии с их официальным веб-сайтом

https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config

вы должны передать функцию, я использовал это и хорошо работал

 module.exports = {
  reactStrictMode: true,
  webpack: function (config, options) {
    console.log(options.webpack.version); // 5.18.0
    config.experiments = { asyncWebAssembly: true };
    return config;
  },
};
Метки: