NextJS, esm/cjs Server error.

[Idzikowski-Casey]

When using ui-components with NextJs, I'm getting the following error:

It appears that Next is loading the common js bundle, when we expect it to load the ESM bundle. This problem seems related to this issue. The best solution I have found is installing next-transpile-modules and enabling the experimental esmExternal option in the next.config.js.

The next.config.js file looks like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: { esmExternals: true },
};

const withTM = require("next-transpile-modules")([
  "@macrostrat/hyper",
  "@macrostrat/ui-components",
]); // pass the modules you would like to see transpiled

module.exports = withTM(nextConfig);

After this, we can import ui-components directly through lib/esm. For instance:

import {
  ModelEditor,
  useModelEditor,
  ModelEditButton,
} from "@macrostrat/ui-components/lib/esm";

TL;DR:
Install next-transpile-modules and import @macrostrat/ui-components/lib/esm to fix esm error with nextjs.