Microbundle Compile Error Next.js

[janniclas]

When adding this component to a new next.js application I got the following compile error:

SyntaxError: Cannot use import statement outside a module

After a lot of digging around I found this GitHub Issue describing a similar problem when using microbundle. The suggested solution to change the "export" value in the package.json to the following worked for me

"exports": { "import": "./dist/react-cytoscape.modern.js", "require": "./dist/react-cytoscape.js" },

However, I'm completely unfamiliar with microbundle, @akx would u mind briefly looking into this if it makes sense to update the package.json with this code snippet?

[TheApeMachine]

That should go in your NextJS config, unless you're under version 13. NextJS has built in support to fix this now. For instance, from another project I was working on, here is my next.config.js (fixing the same error message for three older packages)

/** @type {import('next').NextConfig} */
const withTM = require('next-transpile-modules')(['@arcgis/core', '@stencil/core', '@esri/calcite-components']);

module.exports = withTM({
  reactStrictMode: true,
});

There should be no need to install any transpile package, it should be included.