How to import JXG as module using webpack and babel?

Kasper Peulen

unread,

Sep 21, 2016, 4:32:49 PM9/21/16

to JSXGraph

I use babel and webpack for ES2015/ES2016 syntax. I was wondering how I can get this to work with JSXGraph.

More specifically I want to import JSXGraph using import syntax. I got it somewhat to work with the following method. I made this module:

import 'jsxgraph/distrib/jsxgraphcore'

module.exports = window.JXG;

Then I use it like this:

import {JSXGraph} from './jsxgraph';
const board = JSXGraph.initBoard('jxg', {axis: true});
board.create('functiongraph', (x) => x**2);

This works for me. I use the webpack configuration from create-react-app btw (I'm not sure if this matters).

This seems a bit hacky to me. I was wondering if you guys plan (or already do) support importing JXG as a module.

michael

unread,

Sep 22, 2016, 3:11:15 PM9/22/16

to JSXGraph

Hi,

usually it should be enough to install the JSXGraph npm package. Then you should be able to just import and use it, like in this example:

https://gist.github.com/migerh/3d1c3f540ba7d3d6b98fe0b9b6176bd2

Unfortunately, webpack seems to interfere with the module locations. The result is that jsxgraph or webpack simply cannot find the required JSXGraph submodules. The only solution I could quickly come up with was to use webpack's exports-loader [1]. First install it:

$ npm install --save-dev exports-loader

Then you can do

import JXG from 'exports?JXG!jsxgraph/distrib/jsxgraphcore';

in your source file. This at least saves you your wrapper script. The only drawback compared to the most desirable outcome I can see is that JXG is still defined globally.

Best regards,

Michael

[1] https://github.com/webpack/exports-loader

Kasper Peulen

unread,

Oct 25, 2016, 2:34:06 PM10/25/16

to JSXGraph

Hi Michael,

I was playing a bit around, this worked for me:

I published a modified package to npm that includes the builed jsxgraphcore-amd file:

import {JSXGraph} from '@kasperpeulen/jsxgraph/build/bin/jsxgraphcore-amd'

const board = JSXGraph.initBoard('jxg');

board.create('point', [0,2]);

Wouldn't that be a general a good main file?

Kind regards, Kasper Peulen

michael

unread,

Oct 26, 2016, 1:20:50 PM10/26/16

to JSXGraph

Great, thanks for figuring this out.

The amd file is something that should be part of a regular release. It also makes sense to use it as the main file for npm packages.