andrzejewsky / netflix-slider Goto Github PK
View Code? Open in Web Editor NEWProof of concept Netflix slider
Proof of concept Netflix slider
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.