Coder Social home page Coder Social logo

netflix-slider's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

netflix-slider's Issues

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.

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!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.