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.

[jjnanthakumar]

When I try this with extensions, I couldn't compile/build.

import cytoscape from 'cytoscape';
import cyCanvas from "cytoscape-canvas";
import dagre from "cytoscape-dagre";
import { useCallback, useEffect, useRef, useState } from "react";
import CytoscapeComponent from "react-cytoscapejs";
import { MdiMicrosoftExcel } from "../Icons/MdiMicrosoftExcel";
import { availableLayoutsConfig } from "./layoutConfig";

cytoscape.use(dagre);
cyCanvas(cytoscape);

Error:

1. Attempted import error: 'cytoscape' does not contain a default export (imported as 'cytoscape').
2. TypeError: Cannot read properties of undefined (reading 'use')

Can someone help? @TheApeMachine

Using NextJS 14

[TheApeMachine]

I don't know, I haven't used NextJS for a long time now, though in a recent Vite project, this is still how I import it I can see...

Try import { cytoscape } from 'cytoscape' Or import * as cytoscape from 'cytoscape'

[TheApeMachine]

I think you need to use a Capital C, from the react-cytoscape docs:

import Cytoscape from 'cytoscape';
import COSEBilkent from 'cytoscape-cose-bilkent';
import React from 'react';
import CytoscapeComponent from 'react-cytoscapejs';

Cytoscape.use(COSEBilkent);

[jjnanthakumar]

Thanks for your quick response.

I found the cause that how the nextjs build/packages the application.

After upgrading nextjs to latest version and changing the tsconfig from target "es5", the issue is resolved.

Once again thanks.

Nanthakumar JJ