import { Hooper, Slide } from 'hooper'; will make an error

[arga1234]

When I want to import this import { Hooper, Slide } from 'hooper';

The vue cli will show this erorr:

error in ./~/hooper/dist/hooper.esm.js

Module parse failed: D:\node\my-project\node_modules\hooper\dist\hooper.esm.js Unexpected token (336:23)
You may need an appropriate loader to handle this file type.
| initDefaults () {
| this.breakpoints = this.settings.breakpoints;
| this.defaults = {...this.$props, ...this.settings};
| this.$settings = this.defaults;
| },

@ .//babel-loader/lib!.//vue-loader/lib/selector.js?type=script&index=0!./src/components/Plan_a_trip_en.vue 156:0-39
@ ./src/components/Plan_a_trip_en.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

Can somebody help me please

[arga1234]

if you found this same problem simply you can open node moduls --> dist --> hopper.esm.js go to the line 366 and change this.defaults = (...this.$props, ...this.settings} to this.defaults = this.$props, this.settings

I am not sure that it is correct, but its work for me

[Mucaccino]

Hi,

I have the same issue using with vue.js then i solve with a similar quote:

import { Hooper, Slide } from 'hooper/dist/hooper';

So, the feature to read ...this.$props, ...this.settings is not supported on buggied browsers, rs.

The solution was use an pre-compiled code instead the npm package source.

[ismail9k]

This fixed in version 0.0.9

[Mucaccino]

Hi @abdelrahman3d , these commited changes babel({ extensions: ['.js', '.vue'] }) will really make import from 'hooper´ to get the final dist files with parsed _objectSpread from babel? If yes, you can discard my pull request #45. Thanks,