1

Trying to import react-image-crop package using yarn and add it to react boilerplate.

After installing the package getting this error

Module parse failed: /Users/...../frontend/node_modules/react-image-crop/lib/ReactCrop.js Unexpected token (62:25)
You may need an appropriate loader to handle this file type.
| 
| function makeAspectCrop(crop, imageAspect) {
|   const completeCrop = { ...crop };
| 
|   if (crop.width) {
 @ ./app/components/ImageUpload/index.js 23:0-41
 @ ./app/containers/HomePage/index.js
 @ ./app/containers/HomePage/Loadable.js
 @ ./app/containers/App/index.js
 @ ./app/app.js
 @ multi eventsource-polyfill webpa

The boilerplate is using babylons env preset so the spread operator should be available.

Any ideas what may be the cause?

tk421
  • 5,775
  • 6
  • 23
  • 34
mjanisz1
  • 1,478
  • 3
  • 17
  • 43
  • I personally think its gotta be with the loader config in your webpack.config.js file and not with the package itself. Check out some samples and see whether you have a loader to handle ES6 syntaxes. – arunmmanoharan Jan 16 '18 at 19:47
  • @a2441918 im using the https://github.com/react-boilerplate/react-boilerplate – mjanisz1 Jan 16 '18 at 20:16
  • Check this link out. https://stackoverflow.com/questions/33469929/you-may-need-an-appropriate-loader-to-handle-this-file-type-with-webpack-and-b They have the same issue and its with the webpack config. Try adjusting it. – arunmmanoharan Jan 16 '18 at 20:28

1 Answers1

0

Instead of importing directly from react-image-crop I used

import ReactCrop from 'react-image-crop/dist/ReactCrop';

and working like a charm

mjanisz1
  • 1,478
  • 3
  • 17
  • 43