使用Neovis.js可视化Neo4j图数据时遇构造函数错误求助

It looks like you're hitting a common module import mismatch issue with Neovis.js in Angular. The error TypeError: ...default.a.default is not a constructor happens because the way you're importing the library isn't correctly accessing the actual NeoVis constructor function.

Here are a few solutions to try:

Solution 1: Adjust Import and Instance Creation #

First, try modifying your import statement to use a namespace import, then access the constructor directly:

// Component.ts
import * as NeoVis from 'neovis.js/dist/neovis.js';

ngOnInit() {
  this.draw();
}

draw() {
  const config = {
    container_id: "viz",
    server_url: "your-neo4j-url",
    // Add other required config params (like server_user, server_password, labels, relationships)
  };

  // Create instance using the namespace's NeoVis property
  const viz = new NeoVis.NeoVis(config);
  viz.render();
}

If that doesn't work, try accessing the default export directly without the extra .default:

import NeoVis from 'neovis.js/dist/neovis.js';

// ...

const viz = new NeoVis(config); // Remove the redundant .default

Solution 2: Use Require as a Workaround #

Sometimes ES module imports don't play nicely with CommonJS-built libraries. You can try using require instead (you'll need to declare require for TypeScript first):

// Add this at the top of your component file
declare var require: any;

// ...

draw() {
  const NeoVis = require('neovis.js/dist/neovis.js').default;
  const config = { /* your full config object */ };
  const viz = new NeoVis(config);
  viz.render();
}

Solution 3: Ensure the Container Exists Before Initializing #

While this isn't the direct cause of your constructor error, it's a common pitfall to watch out for. Make sure your <div id="viz"></div> is rendered before you try to create the Neovis instance. Move your draw() call to ngAfterViewInit instead of ngOnInit, since that lifecycle hook runs after the component's view has been fully rendered:

import { AfterViewInit, Component } from '@angular/core';

@Component({ /* your component metadata */ })
export class YourComponent implements AfterViewInit {

  ngAfterViewInit() {
    this.draw();
  }

  draw() {
    // Your Neovis initialization code here
  }
}

Debugging Tip #

If none of the above work, log the imported NeoVis to the console to inspect its structure:

import NeoVis from 'neovis.js/dist/neovis.js';

ngOnInit() {
  console.log(NeoVis); // Check what this outputs in your browser's dev tools
}

This will show you exactly how the constructor is exposed, so you can adjust your code to target the right property.

内容的提问来源于stack exchange，提问作者IamGrooot