Reference error Self is not defined

[AntonyNitheesh]

I am trying to display noe4j graph inside a component in vue js. But when I am trying to import Neovis from "neovis.js" it is showing self is not defined error.

[thebestnom]

Have you managed to fix that?

[matthabermehl]

I'm getting the same, nearly 2 years later. Also not super thrilled that the neo4j db creds appear client-side.

[thebestnom]

@matthabermehl first of all, neovis support putting the creds in the server side for a while now, second of all make sure in vue that you put it after dom is initialized, you can give me minimum viable repo that reproduce the problem and I see how to fix though Im pretty sure it's a vuejs bug

[zcemycl]

Same here, always have this error when registerOnEvent.

[reorx]

Here's my code that works, note that the filename should be .client.ts according to client modules in remix docs.

import { useEffect, forwardRef } from 'react';

import NeoVis from 'neovis.js';


interface Props {
  config: any
}


export const Neo4jVis = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> & Props>((props, ref) => {
  const { config, ...divProps } = props;

  useEffect(() => {
    console.log('render NeoVis', config);
    const vis = new NeoVis(config);
    vis.render();
  }, [config]);

  return (
    <div>
      <h2>NeoVis</h2>
      <div id={config.containerId} ref={ref} {...divProps}></div>
    </div>
  );
});

Neo4jVis.displayName = 'Neo4jVis';

[thebestnom]

@reorx Why are you using config: any? Neovis has a really extensive typed config, use NeoVisConfig type

[reorx]

@thebestnom I used NeoVisConfig type initially, but I removed it to prevent importing neovis.js in other modules while debugging the self is not defined problem.