ERR_REQUIRE_ESM error within NextJS project.

[josefssonemil]

This error pops up whenever I try to use the SEO Pane in a studio which is embedded within a NextJS project

error - Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/lodash-es/lodash.js from .../node_modules/sanity-plugin-seo-pane/dist/index.js not supported.
Instead change the require of lodash.js in .../node_modules/sanity-plugin-seo-pane/dist/index.js to a dynamic import() which is available in all CommonJS modules.

It seems as if this row in dist/index.js is the culprit:

var lodashEs = require('lodash-es'); (line 10)

I've added esmExternals: "loose" to next.config.mjs but it doesn't help. I'm using the latest versions of Next, Sanity and the plugin itself.

Help would be much appreciated :)

[Jacobfred88]

I'm having the same issue. Added esmExternals: "loose", but it's also not working!

[manishwg]

I'm also having the same issue.

[tahmeednabi]

Adding this to next.config.js fixed it for me:

/** @type {import('next').NextConfig} */
module.exports = {
  ...
  transpilePackages: [
    "sanity-plugin-seo-pane",
    "lodash-es",
    "yoastseo",
    "@yoast",
  ],
};

[ollebergkvist]

Adding this to next.config.js fixed it for me:

/** @type {import('next').NextConfig} */
module.exports = {
  ...
  transpilePackages: [
    "sanity-plugin-seo-pane",
    "lodash-es",
    "yoastseo",
    "@yoast",
  ],
};

Did not work for me :/

[DanielHirunrusme]

• 1

[shealan]

Worked for me, thank you!