error importing neovis.js

[mvolkmann]

Just importing neovis.js with the following line:

import NeoVis from 'neovis.js';

gives me the error:

main.js:3 Uncaught ReferenceError: visNetwork_min$1 is not defined

I have installed all the peer dependencies reported from installing neovis.js. Here's the dependency list from my package.json file:

  "dependencies": {
    "@egjs/hammerjs": "^2.0.17",
    "component-emitter": "^1.3.0",
    "keycharm": "^0.4.0",
    "moment": "^2.29.1",
    "neovis.js": "^1.5.0",
    "sirv-cli": "^1.0.0",
    "timsort": "^0.3.0",
    "uuid": "^8.3.1",
    "vis-data": "^7.1.0",
    "vis-util": "^4.3.4"
  }

Am I missing an install or setup step?

[thebestnom]

You really didn't need to add the peer dependency (except for neo4j) this looks like a bug on our end, if you have the time Ill like you to test the latest build on master (I didn't had time to publish it yet) in the meantime Ill try to test that tomorrow

[mvolkmann]

Thanks! I cloned the repo, ran npm install, ran npm run build, copied dist/neovis.js to my project node_modules/neovis.js/dist, and restarted my app. I still get the same error.

[thebestnom]

Which bundler are you using?

[mvolkmann]

I am using Rollup. However, i get the same error when I don't use any bundler.

[thebestnom]

Ok, Ill test that later today, for now I suggest you to try to use the standalone build (/dist/neovis.js)

[mvolkmann]

I actually do have it working now in a simple app that does not use a bundler. Are you suspecting that Rollup is discarding code that is needed and that's the cause of the error?

[thebestnom]

well, I did work with webpack and it worked for me, Im currently trying to setup rollup but I get a completely different error than yours, what is your rollup config? I tried

import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import css from 'rollup-plugin-import-css'

export default {
  input: 'index.js',
  output: {
    dir: 'output',
    format: 'iife'
  },
  treeshake: true,
  plugins: [nodeResolve(), commonjs(), css()]
};

[mvolkmann]

I am trying to use neovis.js from a default Svelte app setup. Here is the rollup.config.js file it provides:

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLLUP_WATCH;

function serve() {
    let server;

    function toExit() {
        if (server) server.kill(0);
    }

    return {
        writeBundle() {
            if (server) return;
            server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
                stdio: ['ignore', 'inherit', 'inherit'],
                shell: true
            });

            process.on('SIGTERM', toExit);
            process.on('exit', toExit);
        }
    };
}

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
    plugins: [
        svelte({
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file - better for performance
            css: css => {
                css.write('bundle.css');
            }
        }),

        // If you have external dependencies installed from
        // npm, you'll most likely need these plugins. In
        // some cases you'll need additional configuration -
        // consult the documentation for details:
        // https://github.com/rollup/plugins/tree/master/packages/commonjs
        resolve({
            browser: true,
            dedupe: ['svelte']
        }),
        commonjs(),

        // In dev mode, call `npm run start` once
        // the bundle has been generated
        !production && serve(),

        // Watch the `public` directory and refresh the
        // browser on changes when not in production
        !production && livereload('public'),

        // If we're building for production (npm run build
        // instead of npm run dev), minify
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

[thebestnom]

Sorry, I didn't had time to work on it, are you still having problem?

[mvolkmann]

I haven't tried lately. I believe it is still an issue when using Rollup as Svelte does by default. However, the project where I will be using this soon is now using React instead of Svelte and therefor using Webpack instead of Rollup. So I imagine it will work. I should know in the next couple of weeks when I get back to working on that part of the project.

[thebestnom]

Any news on that or you had dropped neovis?

[mvolkmann]

My status is the same. I'm not currently using Nevis from Svelte. I'm using it from React without any issues. But I assume there is still an issue with using it with Svelte.

[thebestnom]

I didn't got time to test that unfortunately, I don't know, maybe 2.0.0 fixed that, glad to hear that it works for you for your current case

[thebestnom]

But I've got more time lately so I might test that pretty soon