The netflix-slider from andrzejewsky

Hi, I'm Patryk 👋

Here are some facts about me:

🔭 I’m currently working on Saleor
💬 Ask me about anything related to Typescript or programming in general, engineering management, building products
📫 How to reach me: use my Linkedin
⚡ Fun fact: I love traveling 🌎 and being active (cycling)

🔗 Contact with me

https://www.linkedin.com/in/patryk-andrzejewski/
https://x.com/andrzejewskyy (I'm not active user, but I'll reply)

💡 About me

I'm a software engineer with 10+ years of experience and a tech leader/engineering manager. I love to build tech products and lead teams towards achieving defined goals.

On daily basis, I try to deliver the best engineering solutions I can, making product I work on a better place. Besides coding, I care about entire process of it, including building CI/CD pipelines, proper quality assurance, quality of the code and even reasoning of why we build something (product-wise).

I develop myself also in the area of engineering management, thus I lead teams guiding them through their motivation, awareness of the product, and overall satisfaction.

💻 Specialisation

Everything related to Typescript, including the front-end and the backend. Additionally, I'm able to code in any programming language if that is needed and solve the problem. Apart from programming, I lead and mentor teams acting as engineering manager.

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!

andrzejewsky / netflix-slider Goto Github PK

netflix-slider's Introduction

Hi, I'm Patryk 👋

🔗 Contact with me

💡 About me

💻 Specialisation

netflix-slider's People

Stargazers

Watchers

Forkers

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.

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent