search

cstefanache / angular2-img-cropper

Angular 2 Image Cropper
MIT License
364 stars 135 forks source link

Doesn't support webpack? How to make it work? #177

Open miliu99 opened 7 years ago

miliu99 commented 7 years ago

I'm using webpack for my project. npm start has no error, but the brower console shows

Uncaught SyntaxError: Unexpected token export
    at Object.<anonymous> (main.js:555)
    at __webpack_require__ (vendor.js:51)
    at eval (eval at <anonymous> (main.js:49), <anonymous>:22:25)
    at Object.<anonymous> (main.js:49)
    at __webpack_require__ (vendor.js:51)
    at eval (eval at <anonymous> (main.js:5), <anonymous>:4:20)
    at Object.<anonymous> (main.js:5)
    at __webpack_require__ (vendor.js:51)
    at webpackJsonpCallback (vendor.js:22)
    at main.js:1

Clicking main.js, it points to: eval("// core\nexport { ImageCropperModule } from './src/imageCropperModule';\nexport { ImageCropperComponent } from './src/imageCropperComponent';\n// extra classes\nexport { ImageCropper } from './src/imageCropper';\nexport { CropperSettings } from './src/cropperSettings';\nexport { CropperDrawSettings } from './src/cropperDrawSettings';\n// models\nexport { Bounds } from './src/model/bounds';\nexport { CropPosition } from './src/model/cropPosition';\n//# sourceMappingURL=index.js.map\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9+L25nMi1pbWctY3JvcHBlci9pbmRleC5qcz9iZmM4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0EsUUFBUSxxQkFBcUI7QUFDN0IsUUFBUSx3QkFBd0I7QUFDaEM7QUFDQSxRQUFRLGVBQWU7QUFDdkIsUUFBUSxrQkFBa0I7QUFDMUIsUUFBUSxzQkFBc0I7QUFDOUI7QUFDQSxRQUFRLFNBQVM7QUFDakIsUUFBUSxlQUFlO0FBQ3ZCIiwiZmlsZSI6IjM4NS5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8vIGNvcmVcbmV4cG9ydCB7IEltYWdlQ3JvcHBlck1vZHVsZSB9IGZyb20gJy4vc3JjL2ltYWdlQ3JvcHBlck1vZHVsZSc7XG5leHBvcnQgeyBJbWFnZUNyb3BwZXJDb21wb25lbnQgfSBmcm9tICcuL3NyYy9pbWFnZUNyb3BwZXJDb21wb25lbnQnO1xuLy8gZXh0cmEgY2xhc3Nlc1xuZXhwb3J0IHsgSW1hZ2VDcm9wcGVyIH0gZnJvbSAnLi9zcmMvaW1hZ2VDcm9wcGVyJztcbmV4cG9ydCB7IENyb3BwZXJTZXR0aW5ncyB9IGZyb20gJy4vc3JjL2Nyb3BwZXJTZXR0aW5ncyc7XG5leHBvcnQgeyBDcm9wcGVyRHJhd1NldHRpbmdzIH0gZnJvbSAnLi9zcmMvY3JvcHBlckRyYXdTZXR0aW5ncyc7XG4vLyBtb2RlbHNcbmV4cG9ydCB7IEJvdW5kcyB9IGZyb20gJy4vc3JjL21vZGVsL2JvdW5kcyc7XG5leHBvcnQgeyBDcm9wUG9zaXRpb24gfSBmcm9tICcuL3NyYy9tb2RlbC9jcm9wUG9zaXRpb24nO1xuLy8jIHNvdXJjZU1hcHBpbmdVUkw9aW5kZXguanMubWFwXG5cblxuLyoqKioqKioqKioqKioqKioqXG4gKiogV0VCUEFDSyBGT09URVJcbiAqKiAuL34vbmcyLWltZy1jcm9wcGVyL2luZGV4LmpzXG4gKiogbW9kdWxlIGlkID0gMzg1XG4gKiogbW9kdWxlIGNodW5rcyA9IDBcbiAqKi8iXSwic291cmNlUm9vdCI6IiJ9");

curtiscovington commented 7 years ago

Same issue. Using webpack and "ng2-img-cropper": "^0.8.6"

cstefanache commented 7 years ago

Hello, I am going to need more info on this. Tried with a fork of: https://github.com/AngularClass/angular2-webpack-starter

and worked perfectly: image

here is a gist: https://gist.github.com/cstefanache/8c5590afedba56d55f84f62bdecba269

crossme commented 7 years ago

Hi.. I have same issue "Unexpected token export" with webpack. This library works perfectly fine with systemJs. Please suggest a possible solution.

Thanks in advance :)

c-geek commented 7 years ago

Try angular2-img-cropper@0.8.1, working for me. 0.8.6 doesn't, probably because of #148.

image

c-geek commented 7 years ago

The error I get with angular2-img-cropper@0.8.6 is Processing of node_modules/ng2-img-cropper/index.js failed. SyntaxError: 'import' and 'export' may only appear at the top level (6:0)

I'm using brunch http://brunch.io/.

cstefanache commented 7 years ago

do you have babel-preset-es2015 preset for babel installed?

c-geek commented 7 years ago

Yes I had it, but because of this bug I removed babel to be sure it wasn't involved. And I still had the upper error message.

cstefanache commented 7 years ago

I'll try to do another release in few minutes with another trial

c-geek commented 7 years ago

I will test it for sure.

c-geek commented 7 years ago

OK I was probably wrong about #148, because angular2-img-cropper@0.8.3 is working. But not >= 0.8.4.

cstefanache commented 7 years ago

I am going to try to publish it with commonjs as module and see if it works edit: problem is that if I am going to introduce .ts files again people will start complaining from the other side!

cstefanache commented 7 years ago

can you give it a try? 0.8.8 published with tree-shaking & all

c-geek commented 7 years ago

Perfect with 0.8.8 :+1:

cstefanache commented 7 years ago

Will close if the rest of the people will agree with you. Thank you for your help

c-geek commented 7 years ago

Thank you a lot for angular2-img-cropper, you saved me a lot of work!

cstefanache commented 7 years ago

Hehe, glad to help. I am going to add more features soon - the irony is that I am not using Angular2 - just needed a cropper for a test of mine