Module not found: Error: Can't resolve ... when using external JS library

Question

I'm trying to use a WYSIWYG editor ( TUI Editor ) in my Angular2+ application. They don't provide an Angular wrapper so I've decided to create my own (based on this wrapper ).

Due to some issues using npm install I saved their script file ( https://cdnjs.cloudflare.com/ajax/libs/tui-editor/1.4.0/tui-editor-Editor-full.js ) in a folder.

I've created a service to create an instance of the editor and it works fine:

import {ElementRef, Injectable} from '@angular/core';
import Editor from '../js/tui-editor-Editor-full';

@Injectable({
  providedIn: 'root'
})
export class TuiService {

  editor: any;

  createEditor(options: object, element: ElementRef): any {
    if (options) {
      this.editor = new TuiEditor(Object.assign({
          el: element.nativeElement
        },
        options));
    }
    return this.editor;
  }
  ...
}

Now I wan't to add one of their extension (the table one: https://github.com/nhn/tui.editor/blob/master/docs/using-extensions.md ) but I face some issues.

When I add the extension script the same way as I added the editor script file

import '../js/tui-editor-extTable';

I got these errors when building my app

WARNING in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'tui-editor' in 'C:\workspace\src\js'

WARNING in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'tui-editor/dist/tui-editor-Viewer' in 'C:\workspace\src\js'

ERROR in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'jquery' in 'C:\workspace\src\js'
ERROR in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'to-mark' in 'C:\workspace\src\js'
ERROR in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'tui-code-snippet' in 'C:\workspace\src\js'
i ｢wdm｣: Failed to compile.

If you take a look at the tui-editor-Editor-full.js all these dependencies are already included is this file. Why the tui-editor-extTable.js script does not see them ?

How can I use this extension ?

I installed jquery as a dependency of my project but it still seems not being recognized by the tui-editor-extTable.js script.

I tried to reproduce my workspace on stackblitz

Thanks for your help

Answer 1

We used to have the same problem with js libraries in our app. We solved it adding the js library to 'assets' folder, like this:

And after that, we instanciate it like this:

    import 'assets/js/leaflet-tilelayer-wmts-src';
    import 'assets/js/NonTiledLayer.WMS';
    import { environment } from 'environments/environment';
    import * as E from 'esri-leaflet';
    import * as L from 'leaflet';

    export const baseMaps_dev = {
        OSM: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: false,
            detectRetina: true,
            maxNativeZoom: 19,
            maxZoom: 20,
            name: 'OSM',
        }),
        IGN: L.tileLayer.wms('https://www.ign.es/wms-inspire/ign-base?SERVICE=WMS&', {
            format: 'image/png',
            layers: 'IGNBaseTodo',
            maxZoom: 20,
            name: 'IGN',
        }),
        IGNWMTS: L.tileLayer.wmts('https://www.ign.es/wmts/ign-base?', {
            format: 'image/png',
            layer: 'IGNBaseTodo',
            tilematrixSet: 'EPSG:3857',
            maxZoom: 20,
            name: 'IGNWMTS',
        }),
...

Hope this helps

Answer 2

I've finally decided to clone the tui-editor repository to create my own tui-Editor js file using a custom webpack config.

It includes:

• all the dependencies used in the project (jquery, highlightjs...)
• the table extension

So I only need to import this file in my code.

It's not the best solution and it not responds to the primary question but it works :/