Search code examples
javascriptwebpacklaravel-8gojs

Import gojs extension using webpack

I'm using Laravel 8 with Laravel-mix so that my JS assets are compiled with webpack.

I have imported gojs successfully by doing this:

npm i gojs

Then adding this to my bootstrap.js:

import * as go from 'gojs';

Then compiling using:

npm run dev

So far so good my app.js now includes the gojs code and I can run basic gojs samples on my pages.

However I cannot figure out how to include any gojs extensions.

I've tried adding an extension to my boostrap.js in all these different ways (separately not all at once):

import DataInspector from 'gojs/extensions/DataInspector.js';
import * as Inspector from 'gojs/extensions/DataInspector.js';
import { DataInspector } from 'gojs/extensionsTS/DataInspector';
require('gojs/extensions/DataInspector.js');
require('../../node_modules/gojs/extensions/DataInspector.js');

Most compile without error and when I check my app.js compiled javascript the DataInspector code appears to be included.

However when I add a sample script to my page that uses the Inspect I get error:

Uncaught ReferenceError: Inspector is not defined

So it appears the DataInspector extension has not been included. The only way I can get it to work is to directly add a script tag to the DataInspector.js file in my HTML. However I'd like to figure out how to properly import it with all my other assets.

Solution

  • It's best to copy extension files into your own directory to use them. They are provided as examples of how to extend the library, and should not be imported directly.

    If you look at extension code, you'll see it carries this warning:

    /*
* This is an extension and not part of the main GoJS library.
* Note that the API for this class may change with any version, even point releases.
* If you intend to use an extension in production, you should copy the code to your own source directory.
* Extensions can be found in the GoJS kit under the extensions or extensionsTS folders.
* See the Extensions intro page (https://gojs.net/latest/intro/extensions.html) for more information.
*/