Tui.image-editor: Error after installation

[beyondtheobservableuniverse]

Hi
After the npm install --save tui-image-editor The Fabric Js can't found Http and Https modules.

I use: Node js: 8.11.1, NPM 6.1.0, Angular 6.

Installed for Fabric: https://www.npmjs.com/package/@types/fabric

Error code: ERROR in 'node_modules/fabric/dist/fabric.require.js
Module not found: Error: Can't resolve 'http' in 'node_modules\fabric\dist'
ERROR in 'node_modules/fabric/dist/fabric.require.js'
Module not found: Error: Can't resolve 'https' in 'node_modules\fabric\dist'

Import from Node modules: import * as ImageEditor from 'tui-image-editor';

Call the editor: const instance = new ImageEditor(document.querySelector('#tui-image-editor'), { cssMaxWidth: 700, cssMaxHeight: 500, selectionStyle: { cornerSize: 20, rotatingPointOffset: 70 } });
`
Any idea what the problem?

[jlyon]

This solved it for me: https://github.com/nhnent/tui.image-editor/issues/44

Install Fabric Js npm install --no-save --no-optional fabric@~1.6.7

I also had to install cairo to get the fabric installation to work on a mac

brew install cairo

[Krgauravfreelancer]

Is it resolved? I am also getting the same error. Please suggest

[Fridthjof]

Are you all using Angular 6+?

[jufa2401]

I am getting the same error on Angular 7

[jinwoo-kim-nhn]

npm install --no-save --no-optional fabric@~1.6.7

The same fabric as that version must be installed.

[binakot]

Got the next error ERROR in src/app/components/editor/editor.component.ts(2,30): error TS2497: Module '"tui-image-editor"' resolves to a non-module entity and cannot be imported using this construct. on Angular 7.2.0

[junghwan-park]

@binakot
Are you import tui-image-editor with import ImageEditor from 'tui-image-editor';?
tui-image-editor defined CommonJS module.

You should import ImageEditor using import ImageEditor = require('tui-image-editor');.

ref: https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require

[binakot]

I created an empty project and tried to get it works...

macOS Mojave 10.14.3
ng version:

• Angular CLI: 7.3.6
• Node: 11.11.0
• OS: darwin x64
• Angular: 7.2.10

---

1. ng new app
2. cd app
3. npm install --save tui-image-editor
4. added "postInstall": "npm install --no-save --no-optional fabric@^1.6.7" to package.json

app.component.ts:

import { Component, OnInit } from '@angular/core';
import ImageEditor = require('tui-image-editor');

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'app';

  ngOnInit(): void {
    const instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
      cssMaxWidth: 700,
      cssMaxHeight: 500,
      selectionStyle: {
        cornerSize: 20,
        rotatingPointOffset: 70
      }
    });
  }
}

app.component.html:

<div id="tui-image-editor"></div>

Then ng serve got this error:

ERROR in src/app/app.component.ts(2,1): error TS1202: Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.

Also I tried npm install --no-save --no-optional fabric@~1.6.7 and even install brew install cairo. Nothing changed. It doesn't work. I'm new in Angular. Where is my mistake? :(

@junghwan-park any ideas?

[fabri01]

I need to install AJV before type npm install fabric@~1.6.7.
So , before:
npm i ajv

after:
npm install --no-save --no-optional fabric@~1.6.7

[NikhilGangurde]

I created an empty project and tried to get it works...

macOS Mojave 10.14.3
ng version:

* Angular CLI: 7.3.6

* Node: 11.11.0

* OS: darwin x64

* Angular: 7.2.10


1. ng new app

2. cd app

3. npm install --save tui-image-editor

4. added `"postInstall": "npm install --no-save --no-optional fabric@^1.6.7"` to `package.json`

app.component.ts:

import { Component, OnInit } from '@angular/core';
import ImageEditor = require('tui-image-editor');

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'app';

  ngOnInit(): void {
    const instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
      cssMaxWidth: 700,
      cssMaxHeight: 500,
      selectionStyle: {
        cornerSize: 20,
        rotatingPointOffset: 70
      }
    });
  }
}

app.component.html:

<div id="tui-image-editor"></div>

Then ng serve got this error:

ERROR in src/app/app.component.ts(2,1): error TS1202: Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.

Also I tried npm install --no-save --no-optional fabric@~1.6.7 and even install brew install cairo. Nothing changed. It doesn't work. I'm new in Angular. Where is my mistake? :(

@junghwan-park any ideas?

_I solved it by_

changing module in angular.json file by below line
"module": "commonjs",

If you change it following error will be resolved.

ERROR in src/app/app.component.ts(2,1): error TS1202: Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.