Failed to compile - Using with NextJS

[rohitcoder]

I copied given example but it's not working with NextJS, any idea?

// ** MUI Imports
import { Card, CardContent, CardHeader } from '@mui/material'

import VisGraph, {
    GraphData,
    GraphEvents,
    Network,
    Options,
  } from 'react-vis-graph-wrapper';
  

interface props {
    query: any
}

const DependencyGraph = (props: props) => {
    const { query } = props
    const graph: GraphData = {
        nodes: [
          { id: 1, label: 'Node 1', title: 'node 1 tootip text' },
          { id: 2, label: 'Node 2', title: 'node 2 tootip text' },
          { id: 3, label: 'Node 3', title: 'node 3 tootip text' },
          { id: 4, label: 'Node 4', title: 'node 4 tootip text' },
          { id: 5, label: 'Node 5', title: 'node 5 tootip text' },
        ],
        edges: [
          { from: 1, to: 2 },
          { from: 1, to: 3 },
          { from: 2, to: 4 },
          { from: 2, to: 5 },
        ],
      };
    
      const options: Options = {
        layout: {
          hierarchical: true,
        },
        edges: {
          color: '#000000',
        },
        height: '500px',
      };
    
      const events: GraphEvents = {
        select: (event: any) => {
          const { nodes, edges } = event;
          console.log(nodes, edges);
        },
      };
    return (
        <Card>
            <CardHeader title="Dependency Graph" />
            <CardContent>
                <VisGraph
                    graph={graph}
                    options={options}
                    events={events}
                    ref={(network: Network) => {
                        //  if you want access to vis.js network api you can set the state in a parent component using this property
                        console.log(network);
                    }}
                    />
            </CardContent>
        </Card>
    );
}

export default DependencyGraph;

[ZachHaber]

Fixing this would either be a major version change or we'd need to add a separate entry file for nextjs to workaround that.
In the meantime, you can use the patch package package. Find where we import the css file (I'm on my phone, without my computer anywhere close to me) and remove that line. Then import the css file directly yourself in your code, and that should work. If you are using esmodules with typescript's node next (node 16) resolution, you might need to modify the package.json file to add exports and the css file to that exports config.
And then run patch package with the --exclude 'nothing' option, which allows it to patch the package.json file successfully.

Hope this helps!

[pbio]

You need to use Next.js with the src/app directory which allows you to import css in external npm packages. This solved it for my case:
CSS files can now be imported inside any layout or page, including styles from external npm packages.
See this thread with the resolution on the last comment: vercel/next.js#27953 (comment)