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

nhn / tui.image-editor

🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.

http://ui.toast.com/tui-image-editor

MIT License

6.94k stars 1.28k forks source link

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

Open iomaak opened 5 years ago

iomaak commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

@omaak it seems that the latest version is broken (3.6.1). https://github.com/jwashke/toast-ui-image-editor-angular-wrapper/commit/73fcee9da63157ae3dbaf72223eb67b656c1b095. 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 commented 5 years ago

@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 commented 5 years ago

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

mrbatista commented 5 years ago

@junghwan-park issue resolved with the latest release.

arimus commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

@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.