Module '"tui-image-editor"' has no default export.

[iomaak]

Version

"ngx-tui-image-editor": "^7.0.2"
"tui-image-editor": "^3.5.2"

Development Environment

"@angular/core": "~7.2.0", window 10 enterprize

Current Behavior

As I have integrated tui editor in my angular application but while building it's giving me an error
Module '"tui-image-editor"' has no default export. In your toast-tui-image-editor.component.d.ts file.

So its integration error or its bug. Help on this.

Expected Behavior

[junghwan-park]

@Omaak
Are you using Typescript? ImageEditor has no default export. If ngx-tui-image-editor using ImageEditor via default exported module, I think you should turn on esModuleInterop to ture in tsconfig.json.

Checkout https://github.com/nhn/tui.image-editor#typescript section.

[iomaak]

I am using angular4 having angular core 7.0.2 and all dependencies are looking good but not able to understand why its giving error to me.

[mrbatista]

@Omaak it seems that the latest version is broken (3.6.1).
jwashke/toast-ui-image-editor-angular-wrapper@73fcee9. When load application I have this error:

tui-image-editor.js:41410 Uncaught TypeError: Cannot read property 'TYPED_ARRAY_SUPPORT' of undefined

Same library with version 3.5.2 works.

@junghwan-park, do you have any idea what the cause may be?

[mrbatista]

@junghwan-park I have investigate and the problem is related to latest update of fabric and how transpiling with webpack. The problem is related when fabric load the buffer library

[junghwan-park]

@mrbatista
I think current webpack external library configure was wrong.
I'll add this issue to next release.

[mrbatista]

@junghwan-park issue resolved with the latest release.

[arimus]

Just a note that this is still an issue in the latest release (3.7.0). And the mentioned solution of enabling esModuleInterop does work, but has some consequences. There are some problems this can cause with other modules. Currently, I'm running into bootstrap popover issues with it enabled. Like hard locking the browser rendering thread at 100% CPU kind of problems.

Any way we can get a typescript-friendly solution which doesn't involve esModuleInterop being required?

[junghwan-park]

@arimus
ImageEditor is exported with commonJS pattern like module.exports = ImageEditor;
Please see src/js/imageEditor.js#L1542.

In TypeScript, you should import ImageEditor module via import ImageEditor = require('tui-image-editor'); syntax if you don't want to using esModuleInterop compiler option.
Please see typescriptlang.org / Modules - export = and import = require() section.

[arimus]

@junghwan-park Unfortunately, using import assignment like that is not an option when you are targeting ECMAScript modules in typescript. That leads to a TS1202 error.

At a minimum it seems that with the latest angular stack, you have to set allowSyntheticDefaultImports to true and use the "import ImageEditor from 'tui-image-editor'" form. I'm trying to get to the root issue with that causing problems in other modules, so we'll see what I find there.

update: looks like allowSyntheticDefaultImports in a clean project allows the use above and there are no oddities with locking up like I observed in a much larger project with many deps. There must be something else causing some of the issues.

[jinwoo-kim-nhn]

There is nothing wrong with the current state.

We will reconsider the default export support for future major updates.

[fernandorochaworld]

The error keeps alive in the Angular version of the editor.

error TS2307: Cannot find module 'toast-ui-image-editor'.
11 import { ToastUiImageEditorModule } from "toast-ui-image-editor";

I always get this error when trying to run the project.

[tuyenttran]

We have tried to integrate with TypeScript in angular.
So in file index.d.ts,

Can we export the namespace
export = tuiImageEditor;

instead of
export = tuiImageEditor.ImageEditor;

This way, we can use all interfaces/types declared in this module by importing in TypeScript like

import * as tuiImageEditor from 'tui-image-editor';

public imageEditor = new tuiImageEditor.ImageEditor(...);
public imageEditorOptions: tuiImageEditor.IOptions;