CommonJS build breaks with NextJS

[RenaudRohlinger]

If I try to use theatre on NextJS I randomly get following error:

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

The error happened to other developers in my company, and with a different setup of NextJS.

If I understand right, lodash-es is an ES module library and theatre output is a CommonJS build. So there is a clash between commonjs and esm?

I suppose a solution could be to use type="module" instead of type="commonjs"? Or change the configuration of the compiler to generates dynamic import() instead of require() ?

Is there any reason why you chose CommonJS instead of an ESM build?

FYI we use lodash-es as a dependency in our project

[RenaudRohlinger]

After a bunch of investigations I'm sure the issue is caused because of the commonjs output while using esm dependencies such as lodash-es. Basically, NextJS is just trying to read theatre as an ES module.

So a temporary solution is to force NextJS to read theatre as commonjs and not as an ESM library. (which will affect all the other libs)

// next.config.js
module.exports = {
  // Prefer loading of ES Modules over CommonJS
  experimental: { esmExternals: false }
}

[vezwork]

I've done some work to resolve issues with Theatre in NextJS. Please try out the 0.5.0-insiders.735bd98 release of Theatre to see if it resolves your issues. We will also be releasing 0.5 soon with this fix if you prefer to wait for a bit for the full release.

[AriaMinaei]

Closing as resolved.