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

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 :/