Migrating from UMD to ES Modules

The /tools/umd-to-es-modules/ folder in the yFiles for HTML package contains a tool that does most of the migration for you. See the corresponding section for more information.

If you would like to do the migration manually, here is the outline of what you need to do:

Remove the Old Loading Mechanism

How to do that depends on the old mechanism:

UMD

Remove all require(['yfiles/…​'], …​) and define('yfiles/…​', …​) calls.

CommonJS

Remove all require('yfiles/…​') calls.

Script Loading (i.e., globals)

Remove all <script> tags that load yFiles modules.

Replace the Fully Qualified Names of yFiles Classes With Their ES Module Name

Usually, this means simply removing the namespace part like this:

// before
const gc = new yfiles.view.GraphComponent()

// after
const gc = new GraphComponent()

There are a couple of exceptions to that rule though: Classes that had identical names but were in different namespaces were renamed to avoid name clashes. These classes are:

Add Import Statements

The yFiles types that are used in your code have to be imported now. This is done using import statements:

import { GraphComponent, GraphEditorInputMode, ... } from 'yfiles'

Some IDE may offer you an option to add all missing imports, which makes things much easier.

If you are not using webpack or a similar build tool that can resolve symbolic import paths, you will have to specify the actual path to the yFiles library, as this is the only syntax that browsers support natively:

import { GraphComponent, GraphEditorInputMode, ... } from '../lib/yfiles.js'

Add type="module" to Script Tags

Since we are using import statements now, the script has to be loaded in module mode:

<script src="./app.js" type="module"></script>