Using devextreme and devextreme-react as an external library

[zolem]

Category

• Question
• Typo
• Bug
• Additional article idea

I am using a very large library in my spfx solution and I would like to not only share it among webparts within this app but share it across any other webparts that might be using this library.

What I know

• I know that you can include external libraries such as jquery and some libraries that have typings separate from their npm package.
• I know that even if I put a reference to an external library in the externals section it won't actually pull down the library if I don't import it anywhere in my code.
• I understand the current examples in the documentation. I managed to successfully use moment-timezone which is great.

Problem I am having

I am trying to use the DevExtreme and devextreme-react libraries. This library is very large so I want to include it once from a cdn when a webpart is requesting it and continue using the same script with each additional webpart instance. The problem is that the library comes with typings included in it. It is in a subfolder bundles/dx.all.d.ts instead of in its own package. It also has multiple files you can include instead of including the entire library. In addition the devextreme-react is depending on the devextreme library so it is also including files from devextreme.

The project either doesn't load the external libraries because I don't include them, or things fail to compile because I am not importing it properly..? maybe?

My question is how do I exclude the library, add it to externals configuration, import it into my project files with typings and still have my project compile?

[zolem]

Working on this I think I am getting close but there is something in my way every time.
I tried this in gulpfile.js:

build.configureWebpack.mergeConfig({
    additionalConfiguration: (generatedConfiguration) => {
        generatedConfiguration.externals.push(/^devextreme\/.+$/);
        return generatedConfiguration;
    }
});

Which causes an error such as:

[13:00:02] Error - [copy-assets] External "devextreme/events" is not correctly referenced in config.json. Deployed modules will produce unexpected behavior.
[13:00:02] Error - [copy-assets] External "devextreme/ui/button" is not correctly referenced in config.json. Deployed modules will produce unexpected behavior.
[13:00:02] Error - [copy-assets] External "devextreme/events" was specified without a path, and it is neither a component nor a localized module. The produced manifest will likely not load.
[13:00:02] Error - [copy-assets] External "devextreme/ui/button" was specified without a path, and it is neither a component nor a localized module. The produced manifest will likely not load.

So in my config.js I try:

  "externals": {
    "devextreme/ui/button": "https://cdn3.devexpress.com/jslib/18.1.6/js/dx.all.debug.js",
  },

Which then changes my errors to this:

[13:01:05] Error - [copy-assets] External "devextreme/events" is not correctly referenced in config.json. Deployed modules will produce unexpected behavior.
[13:01:05] Error - [copy-assets] External "devextreme/events" was specified without a path, and it is neither a component nor a localized module. The produced manifest will likely not load.

Seems like I am close except there is no way to fix the 2 remaining errors without loading the library again throwing an error at run time, which means I am blocked there too.

Not sure where to go from here. Maybe I am missing something.

[thechriskent]

You should be able to install the package as a dev-dependency (--save-dev). This will allow you to use the typings during development but not include it with your bundle. Referencing it from the CDN as an external should work just fine (although I've not done it with this particular library).

You can check the external file(s) using this free tool: https://rencore.com/sharepoint-framework/script-check and it will provide some guidance on how the package should be referenced.

[zolem]

@thechriskent so how do I add it as an external library when the import statement is:

import dxScheduler, { IOptions } from "devextreme/ui/scheduler";

Putting external like this will not work:

    "devextreme": {
      "globalName": "devextreme",
      "path":"https://cdn3.devexpress.com/jslib/18.1.6/js/dx.all.js"
    },

Since devextreme does not equal devextreme/ui/scheduler.

I also cannot do

    "devextreme/ui/scheduler": {
      "globalName": "devextreme",
      "path":"https://cdn3.devexpress.com/jslib/18.1.6/js/dx.all.js"
    },

because if I need more than one module, which I do I would have to do it twice and spfx will load it twice and there will be an error.

EDIT:
It doesn't appear that switching to dev dependency keeps it out of the bundle.

[zolem]

So I found a potential solution, of course the only problem is I have to stop using devextreme-react and use just plain jquery.

Basically if I put in the config this:

    "jquery": {
      "path": "https://code.jquery.com/jquery-2.1.1.min.js",
      "globalName": "jQuery"
    },
    "devextreme/bundles/dx.all": {
      "path": "https://cdn3.devexpress.com/jslib/18.1.6/js/dx.all.js",
      "globalName": "DevExpress",
      "globalDependencies": ["jquery"]
    }

And then anywhere that requires a devextreme component I would have to create a wrapper and import devextreme like this:

import * as React from 'react';
import * as $ from 'jquery';
import DevExpress from 'devextreme/bundles/dx.all'; DevExpress;

export default class DxButton extends React.Component<DevExpress.ui.dxButtonOptions> {
    private el: HTMLElement;
    private $el: JQuery<HTMLElement>;
    public constructor(props: DevExpress.ui.dxButtonOptions) {
        super(props);
    }
    public componentDidMount() {
        this.$el = $(this.el);
        (this.$el as any).dxButton({
            ...this.props as any
        } as DevExpress.ui.dxButtonOptions);
    }

    public componentWillUnmount() {
        (this.$el as any).dxButton('dispose');
        this.$el.remove();
    }

    public render(): React.ReactElement<DevExpress.ui.dxButtonOptions> {
        return <div ref={el => this.el = el} />;
    }
}

The reason I can't use devextreme-react is because it uses the modules of devextreme and forces the package to be bundled no matter what.

Not the ideal solution but seems like the only possible way to do it in the end.

[zolem]

I have everything working great except for one last problem. The library I am using even though I mark it as external will load multiple times if there are multiple different web parts on the page using the same library, which then throws errors with the library. Is there a way to make it a universal library that once loaded will not be loaded again?

[zolem]

So I am thinking what I will do is have an extension that I install that will search for a specific key such as a guid or something to tell if the library has already been included, if it has not then it will load the script otherwise it won't. Maybe it creates a global function or something that can be called from a webpart or extension to ensure that the needed library is available before running.

I could just force install this extension on the entire tenant to make sure it is there. Would be nice to have this as a feature on SharePoint online though. I feel like it would be fairly easy to check if the library is already installed based on the CDN url.

[zolem]

@VesaJuvonen Has there been any kind of progess on allowing a library to be included? I am running into roadblocks all over the place. I tried creating an npm package that would simply check if a library is included and if it is then it won't do anything otherwise it will include it. The problems I am having is with using types. Is there a way to specify that a library will be present so you can depend on it, but not include it in the package OR try to load it as an external?

[thechriskent]

Not sure about everything you're doing, but that last part for typings can be handled. You should be able to install the package as a dev-dependency (--save-dev). This will allow you to use the typings during development but not include it with your bundle

[zolem]

@thechriskent maybe I am crazy but seems like whenever I do that if I reference the typings at all it will include it in the bundle unless I make it an external dependency. This may only be a problem where libraries and typings are in the same npm package.

To get around this I had to copy the typings out of the library into my src and also generalize calls to methods from the library so the bundling did not throw an error. Seems like no matter what I did there would be errors thrown otherwise.

I did manage to successfully get jquery and devextreme added to my custom externalization but only by losing some typings.

[zolem]

For posterity I went through and got everything loading properly by calling a method that checks if the library is loaded if it is not it will inject a script tag including it into the head of the page. There are issues here such as multiple jquery instances. I am using DevExtreme and it creates plugins for jquery so if my jquery loaded then DX and nothing else it worked fine. Occasionally there was some jquery loading and overwriting the bindings for DevExtreme and causing issues. I assume this is jquery included by some stock webparts or by sharepoint itself but it wasn't referenced as external so it must have been minified inside some kind of code.

Anyway I had to use

window.$j = jQuery.noConflict()

Which made me have to do some additional checking and now I have to make sure the new variable is consistently used so I don't create so many inclusions of jquery.

Right now I feel like this issue makes sharepoint unbearably slow for some people. Essentially any library anyone ever wants to use is included an infinite amount of times including across pages because everytime a webpart loads it loads ALL the external libraries. This seems like just really bad design for performance reasons. I understand conflicts but allowing people to register a library to be included for use would be great!