search

gipyeong-lee / react-ion-slider

react-ion-slider
1 stars 0 forks source link

next.js #3

Closed gipyeong-lee closed 3 years ago

gipyeong-lee commented 3 years ago

Hiya buddy,

I've been loving using your ion-slider on a page I have but I was wondering if you're ever thinking about porting it over to work on next.js? I've been trying but failing to get it working using your react-ion-slider package but getting issues due to upstream dependencies.

Cheers

gipyeong-lee commented 3 years ago

@Nosnibor35 Hello. if you wanna use react-ion-slider in your next.js application please follow below steps.

  1. implement jquery script in page ( not every where, just react-ion-slider placed ) 
    <Head>
    <title>Create Next App</title>
    <link rel="icon" href="/favicon.ico" />
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossOrigin="anonymous"></script>
</Head>
  2. load component by dynamic ( client rendering ) with {ssr:false} option. cause, if you render this component in server side, node.js don't know about document. so please implement option. {ssr:false} 
    const IonRangeSlider = dynamic(() => import('react-ion-slider'),{ssr: false})
Nosnibor35 commented 3 years ago

@gipyeong-lee ,

Thank you very much for the response. I am going through your steps and when initially installing the react-ion-slider package after installing Next.js with 'create-next-app' I get a message that it could not resolve the dependency. The error I get when installing your package is:

Found: react@17.0.1 node_modules/react react@"17.0.1" from the root project

Could not resolve dependency: peer react@"^15.0.0 || ^16.0.0" from react-ion-slider@1.0.9 node_modules/react-ion-slider react-ion-slider@"*" from the root project

Fix the upstream dependency conflict, or retry this command with --force, or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution.

What is your recommendation on that.

Thanks

Martin

gipyeong-lee commented 3 years ago

@Nosnibor35

I modified peer dependencies like below

"react": "^15.0.0 || ^16.0.0 || ^17.0.0",
"react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0"
Nosnibor35 commented 3 years ago

@gipyeong-lee,

Thanks for updating the package, I re-installed and only got the one error:

npm WARN deprecated core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

I still created the const you mentioned in the previous reply but it crashed with an internal server error and looking at the first line it states

error - ReferenceError: dynamic is not defined

Question, is it OK to use the in a React function or has it been specifically written for a Class?

Cheers

Martin

gipyeong-lee commented 3 years ago

@Nosnibor35 oh, let me check other modules.

Please import module dynamic

import dynamic from 'next/dynamic'

This library written react class.

Nosnibor35 commented 3 years ago

@gipyeong-lee , YOU STAR!!!

Perfect, sorry I should have thought I needed to import dynamic. Just quickly tested it before work and it works great so far so thanks for the immediate support. 👍🏻

gipyeong-lee commented 3 years ago

Thanks :) Now I close issue

Nosnibor35 commented 3 years ago

Perfect, thank you again. I'm looking forward to developing my website now with your sliders 😉

Martin

On Mon, 22 Feb 2021 at 15:27, GiPYeongLee notifications@github.com wrote:

Thanks :) Now I close issue

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gipyeong-lee/react-ion-slider/issues/3#issuecomment-783454493, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB3RKSCBCKSHUN3JBXP5N6TTAJZWNANCNFSM4X6LX7BA .