How to import next-ui in a react Application

[sateesh2020]

Hi Team,

I am trying to use next-ui in a reactjs application,
and when i tried to import( import nx from 'next-ui' ) nx after installing with npm, getting below error

next.js:2949 Uncaught TypeError: Cannot read property 'Collection' of undefined at next.js:2949 at Object../node_modules/next-ui/js/next.js (next.js:3881) at __webpack_require__ (bootstrap 2de25ff…:659) at fn (bootstrap 2de25ff…:85) at Object../src/Topology.js (App.js:17) at __webpack_require__ (bootstrap 2de25ff…:659) at fn (bootstrap 2de25ff…:85) at Object../src/App.js (App.css?f931:26) at __webpack_require__ (bootstrap 2de25ff…:659) at fn (bootstrap 2de25ff…:85) at Object../src/index.js (index.css?902b:26) at __webpack_require__ (bootstrap 2de25ff…:659) at fn (bootstrap 2de25ff…:85) at Object.0 (registerServiceWorker.js:108) at __webpack_require__ (bootstrap 2de25ff…:659) at ./node_modules/ansi-regex/index.js.module.exports (bootstrap 2de25ff…:708) at bundle.js:712

[alwye]

Hi @sateesh2020
Thanks for your question. We'll verify this information.

[alwye]

@abdvl I believe you made apps on React with Next, didn't you?

[bofortitude]

hi there, I encountered the similar problem in the vue.js framework. Any ideas about it?

[alwye]

Hi @sateesh2020 and @bofortitude.

Looks like it's been a long time! I'm currently on a completely different team at Cisco, and am not aware of the status of the project, so I would recommend you to contact the developers directly at next-support@cisco.com

[rishabh1403]

Hi @sateesh2020 @bofortitude , did you find a solution to this ? I have a similar problem. Need to integrate NeXt UI in a react app.
Thanks

[sateesh2020]

I solved it by using the 'react-async-script-loader'

import React, { Component } from 'react';
import scriptLoader from 'react-async-script-loader'
class NxTopology extends Component {
    constructor(props){
        super(props);
    }
    componentWillReceiveProps ({ isScriptLoaded, isScriptLoadSucceed }) {
        if (isScriptLoaded && !this.props.isScriptLoaded) { 
          if (isScriptLoadSucceed) {
            this.initTopology()
          }
          else this.props.onError()
        }
      }
     
      componentDidMount () {
        const { isScriptLoaded, isScriptLoadSucceed } = this.props
        if (isScriptLoaded && isScriptLoadSucceed) {
          this.initTopology()
        }
      }
      initTopology(){
          if(window.nx){
            let nx = window.nx;
            let app = new nx.ui.Application();
            app.container(document.getElementById('newTopology'));
            var topologyData = {
                ...
                };
            let topo = new nx.graphic.Topology({
                'adaptive': true,
                'scalable': true,
                'showIcon': true,
                dataProcessor: 'force',
                'nodeConfig': {
                    'label': 'model.name',
                    'iconType': 'model.routerType'
                },
                'linkConfig': {
                    'linkType': 'curve',
                    'width': 3
                },
                'identityKey': 'id',
                'enableSmartLabel': true,
                'enableSmartNode': true,
                'enableGradualScaling': true,
                'supportMultipleLink': true,
                'dataProcessor': 'force',
                'autoLayout': true,
            });
            topo.data(topologyData);
            app.on('resize', function () {
                topo.adaptToContainer();
            });
            topo.attach(app);
          }
      }
    render() {
        return (
            <div id="newTopology">
            {this.props.children}
            </div>
        );
    }
}
export default scriptLoader(
    '/dist/js/next.js'
  ) (NxTopology);

[DiroKate]

@sateesh2020

export default scriptLoader(
    '/dist/js/next.js'
  ) (NxTopology);

the path /dist/js/next.js is from the project file path, how to change to node_modules?
thanks

[sateesh2020]

@DiroKate
It wont work that way , cause while building (react build) the file is not imported into the build file, its being called explicitly when the min file is loaded into the browser.

[Sky-Young]

hi . I use vue-cli + webpack framework. I have the same problem. have some solution?

[alwye]

Hi all

To my best knowledge the Next project is no longer maintained.

[nathak]

I am using vue.js. Are you proceeding with the content?

[prerna67]

Can I import next-ui in my angular 8 application?
How much does it supports angular 2+?

[lannierose]

This worked for me in a vue application:

In next.js, I changed the initial definition of var nx = {...} to windows.nx = {...},
and I passed windows.nx instead of just nx into all the self-invoking functions,
i.e., replace all })(nx); lines with })(window.nx);

I imported next.css and next.js in App.vue, where my custom.css was already being imported:

import './styles/custom.css'
import '../static/next/css/next.css'
import '../static/next/js/next.js'

In my component, I set these data vars:

data: () => ({
   nx: window.nx,
   graphContainer: null,
   topology: null,
   nxApp: null,
   topologyConfig: {
     'adaptive': true, // canvas width 100% if true
     'showIcon': true, // show icons' nodes, otherwise display dots
     'nodeConfig': { // special configuration for nodes
       'label': 'model.name',
       'iconType': 'router',
       'color': '#0how00'
     }, 
     // and so on
   },
   topologyData: {
     nodes: [...]
     links: [...]
     nodeSet: [...]
   }
 }),

Here is the component's mounted() event handler:

  mounted () {
    this.nxApp = new this.nx.ui.Application()
    this.nxApp.container(this.$refs['graph-container'])
    this.topology = new this.nx.graphic.Topology(this.topologyConfig)
    this.topology.data(this.topologyData)
    this.topology.attach(this.nxApp)
  }

In the template, obviously, I have this div:

<div ref="graph-container" class="graph-container"></div>

And bingo!, the NeXt diagram appeared.

[jcace]

For React in 2020, I did this with React Hooks and used a package called 'react-load-script'.

import Script from 'react-load-script';

In the component's render JSX, load the script using the "Script" component, and set up a div with an id for the diagram to show up in:

<>
<Script url="lib/cisco-next/js/next.js"
    onError={() => console.log("Error!")}
    onLoad={handleLoad}
    />
   <div id="nxContainer"/>
</>

Note: I put the entire cisco-next library in the /public/lib folder, so it's just served from there.

Then, I used useState hooks to store the Cisco Next functions in my component's local state, as well as a topologyData state to hold the node/link date to be rendered.

  const [topologyData, setTopologyData] = useState();
  const [topology, setTopology] = useState();
  const [nxApp, setNxApp] = useState();

My handleLoad function

  const handleLoad = () => { 
    const tempApp = new window.nx.ui.Application()
    tempApp.container(document.getElementById('nxContainer'))
    setNxApp(tempApp);
    
    const topology = new window.nx.graphic.Topology(topologyConfig) // topology config JSON object
    setTopology(topology);
  }

And lastly, two useEffect hooks to make it update automatically:

  // Update the topology data if it changes
  useEffect(() => {
    if (!topology || !nxApp || !window.nx) {
      return;
    }
    topology.data(topologyData);
  }, [nxApp, topology, topologyData])

  // Attach the diagram once it's first loaded
  useEffect(() => {
    if (!topology || !nxApp || !window.nx) {
      return;
    }
    topology.attach(nxApp);
  }, [nxApp, topology])

Now, anywhere in my component I can simply call setTopologyData({...}) with new data, and it will automatically update the diagram!