[1.3.0 / 1.3.1] TypeScript Cropper.options dragMode breaks at runtime

[peterpeterparker]

I'm submitting a...

[X ] Bug report

Current behavior

With the introduction of typescript in 1.3.0, the Cropper.options dragMode is now defined as a type DragMode. Unfortunately, setting it to the constant value (see code below) will then fail at runtime with following error:

console.js:35 ERROR TypeError: Cannot read property 'Move' of undefined

Expected behavior

No error. A possible solution is maybe to set dragMode as string?

export interface Options {
    ...
    dragMode?: string; // instead of DragMode
    ...
 }

Minimal reproduction of the problem with instructions

 import Cropper from 'cropperjs';
 
 this.cropper = new Cropper(myUrl, {
        viewMode: 2,
        aspectRatio: 1,
        dragMode: Cropper.DragMode.Move, // <-- Here the problem. Enum is not converted and will fail at runtime
        modal: true,
        guides: false,
        highlight: true,
        background: true,
        autoCrop: true,
        autoCropArea: 0.9,
        responsive: true,
        ready: (event: CustomEvent) => {
        }
 });

Environment

Cropper.js version: 1.3.1

Workaround

Right now, I have then declared dragMode like following to bypass the problem

import Cropper from 'cropperjs';
 
 this.cropper = new Cropper(myUrl, {
        ...
        dragMode: <any> 'move',
        ...
        ready: (event: CustomEvent) => {
        }
 });

[leabaertschi]

Same problem here, it seems that the exports are missing in the actual js files, there only the Cropper class is exported

[peterpeterparker]

I googled a bit the subject and I think the problem is somehow related to enum with typescript, webpack, loaders etc.

For example I found such issues about this subject:

typescript: microsoft/TypeScript#16671
ts-loader: TypeStrong/ts-loader#331
awesome-typescript-loader: s-panferov/awesome-typescript-loader#137

don't know if that would then make sense to set back dragMode as string or just don't use enum?

[coloz]

`
[12:31:15] typescript: C:/Users/coloz/Desktop/iotapp/node_modules/cropperjs/types/index.d.ts, line: 3
In ambient enum declarations member initializer must be constant expression.
L2: export enum DragMode {
L3: Crop = 'crop',
L4: Move = 'move',
[12:31:15] typescript: C:/Users/coloz/Desktop/iotapp/node_modules/cropperjs/types/index.d.ts, line: 4
In ambient enum declarations member initializer must be constant expression.
L3: Crop = 'crop',
L4: Move = 'move',
L5: None = 'none',
[12:31:15] typescript: C:/Users/coloz/Desktop/iotapp/node_modules/cropperjs/types/index.d.ts, line: 5
[12:31:15] typescript: C:/Users/coloz/Desktop/iotapp/node_modules/cropperjs/types/index.d.ts, line: 16
[12:31:15] typescript: C:/Users/coloz/Desktop/iotapp/node_modules/cropperjs/types/index.d.ts, line: 17
In ambient enum declarations member initializer must be constant expression.
L4: Move = 'move',
L5: None = 'none',
In ambient enum declarations member initializer must be constant expression.
L15: export enum ImageSmoothingQuality {
L16: Low = 'low',
L17: Medium = 'medium',
In ambient enum declarations member initializer must be constant expression.
L16: Low = 'low',
L17: Medium = 'medium',
[12:31:15] typescript: C:/Users/coloz/Desktop/iotapp/node_modules/cropperjs/types/index.d.ts, line: 18

`
is it same？

[peterpeterparker]

@coloz maybe not the same I think

this issue is related to a runtime problem
your issue is maybe related to typescript validation (check your typescript's version)

[fengyuanchen]

I think it is not an issue of Cropper.js, but your TypeScript config...

[peterpeterparker]

What's your config then if I could ask?

[peterpeterparker]

Just for the record, even with the last commit of @fengyuanchen adding const (see commit 58e3c3c) the issue is still there. Workaround with <any> still valid

[mathewk2017]

even workaround is not working. showing this error
typescript: node_modules/cropperjs/types/index.d.ts, line: 3
In 'const' enum declarations member initializer must be constant expression.

   L2:  export   const  enum  DragMode {
   L3:    Crop = 'crop',
   L4:    Move = 'move',

[18:14:49] typescript: node_modules/cropperjs/types/index.d.ts, line: 4
In 'const' enum declarations member initializer must be constant expression.

   L3:  Crop = 'crop',
   L4:  Move = 'move',
   L5:  None = 'none',

[18:14:49] typescript: node_modules/cropperjs/types/index.d.ts, line: 5
In 'const' enum declarations member initializer must be constant expression.

   L4:    Move = 'move',
   L5:    None = 'none',

[18:14:49] typescript: node_modules/cropperjs/types/index.d.ts, line: 16
In 'const' enum declarations member initializer must be constant expression.

  L15:  export const  enum ImageSmoothingQuality {
  L16:    Low = 'low',
  L17:    Medium = 'medium',

[18:14:49] typescript: node_modules/cropperjs/types/index.d.ts, line: 17
In 'const' enum declarations member initializer must be constant expression.

  L16:  Low = 'low',
  L17:  Medium = 'medium',
  L18:  High = 'high',

[18:14:49] typescript: node_modules/cropperjs/types/index.d.ts, line: 18
In 'const' enum declarations member initializer must be constant expression.

  L17:    Medium = 'medium',
  L18:    High = 'high',

[fengyuanchen]

@mathewk2017 Please try to the latest version (v1.4.0 currently).

[jason-yang]

@fengyuanchen I am seeing this error at runtime.
cropperjs 1.4.1
typescript 2.9.2
webpack 3.5.4

The Error:

Uncaught TypeError: Cannot read property 'Move' of undefined

The code:

import Cropper from 'cropperjs';

const cropper = new Cropper(this.imageRef, {
    dragMode: Cropper.DragMode.Move,
    ...otherOptions
});

Relevant webpack config:

const config = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [{loader: 'babel-loader', options: {...stuff}],
        include: [
            ...otherIncludes,
            /cropperjs\/src/
        ]
      },
      {
        test: /\.tsx?$/,
        use: [{loader: 'awesome-typescript-loader', options: {...stuff}],
        include: [...otherIncludes, /cropperjs\/src/]
      }
    ]
  }
}