Importer un module ES dans Next.js ERR_REQUIRE_ESM

Question

J'ai rencontré cette erreur en essayant d'utiliser ky dans un projet Next.js:

Erreur [ERR_REQUIRE_ESM]: Doit utiliser import pour charger le module ES : /foo/node_modules/ky/index.js

Je pense que le problème vient du fait que Webpack (ou Babel) transforme tous les import en require() mais ky est un pur module ES.

J'ai réussi en important dynamiquement ky avant de l'utiliser mais ce n'est ni élégant ni efficace.

const handleFormSubmit = async (event) => {
  const ky = (await import("ky")).default;

  const response = await ky
    .get('http://localhost/api/foo')
    .json();
};

Des suggestions?

Answer 1

Étant donné que ky est exporté en tant qu'ESM, vous pouvez le transpiler avec next-transpile-modules dans next.config.js.

// next.config.js
const withTM = require('next-transpile-modules')(['ky']);

module.exports = withTM(/* votre configuration Next.js */);