Uncaught Error: Module parse failed: Unexpected token (39:4) File was processed with these loaders: * ./node_modules/source-map-loader/index.js * ./node_modules/eslint-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders.

[codelocksdev]

I am trying to integrate the slider with a JHipster React project and when I try to use the slider in my app I get the following errors in the console:

Uncaught Error: Module parse failed: Unexpected token (39:4)
File was processed with these loaders:
 * ./node_modules/source-map-loader/index.js
 * ./node_modules/eslint-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| 
|   return (
>     <SliderContext.Provider value={contextValue}>
|       <SliderWrapper>
|         <div
    at Object../src/main/webapp/app/modules/slider/NetflixSlider/Slider.js (administration.reducer.ts:175)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Module../src/main/webapp/app/modules/slider/NetflixSlider/index.js (index.js:1)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Module.<anonymous> (app.tsx:1)
    at Module../src/main/webapp/app/app.tsx (app.tsx:114)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)

react_devtools_backend.js:2273 [WDS] Errors while compiling. Reload prevented.
overrideMethod @ react_devtools_backend.js:2273
errors @ client:150
(anonymous) @ socket.js:47
sock.onmessage @ SockJSClient.js:67
EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:279
SockJS._transportMessage @ main.js:277
EventEmitter.emit @ emitter.js:50
WebSocketTransport.ws.onmessage @ websocket.js:35
react_devtools_backend.js:2273 ./src/main/webapp/app/modules/slider/NetflixSlider/Slider.js 39:4
Module parse failed: Unexpected token (39:4)
File was processed with these loaders:
 * ./node_modules/source-map-loader/index.js
 * ./node_modules/eslint-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| 
|   return (
>     <SliderContext.Provider value={contextValue}>
|       <SliderWrapper>
|         <div
overrideMethod @ react_devtools_backend.js:2273
errors @ client:159
(anonymous) @ socket.js:47
sock.onmessage @ SockJSClient.js:67
EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:279
SockJS._transportMessage @ main.js:277
EventEmitter.emit @ emitter.js:50
WebSocketTransport.ws.onmessage @ websocket.js:35
react_devtools_backend.js:2273 ./src/main/webapp/app/modules/slider/NetflixSlider/Item.js 9:2
Module parse failed: Unexpected token (9:2)
File was processed with these loaders:
 * ./node_modules/source-map-loader/index.js
 * ./node_modules/eslint-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| 
| const Item = ({ movie }) => (
>   <SliderContext.Consumer>
|     {({ onSelectSlide, currentSlide, elementRef }) => {
|       const isActive = currentSlide && currentSlide.id === movie.id;

I made sure to include the dependencies from package.json that my project didn't already have, but otherwise I made no changes. I just took the movies const and calling code from the provided app.js and inserted it into my own app.js where I wanted it.

I'm pretty new to react so I'm not sure how to troubleshoot the issue. JHipster uses typescript for react instead of js so I'm wondering if that's the issue, but it was my understanding that you could mix them in this way.

Thanks for this component, btw. It's awesome. Please advise!