How to properly import in next app #13

sagarkhadka · 2022-09-11T06:50:33Z

I have done 'npm install mouse-follower --save' on my next app. How do I correctly import it. I managed to import somehow in _app.tsx but every time page refresh the line 'const cursor = new MouseFollower();' throws an server error and crasheh the web page. But if I commented it and uncomment it then it works fine. But after this if the page refresh it again shows the same error.

Drafteed · 2022-09-13T14:15:04Z

Please show your code with import statement.

sagarkhadka · 2022-09-15T07:54:23Z

I downloaded the file and copied all files from js and scss folder and imported them like this in _app.tsx

import Cursor from '../../public/assets/mouse/js/cursor'

function MyApp({ Component, pageProps }: AppProps) {
  const cursor = new Cursor()

  return (
    <>
      {/* <NavLink /> */}
      <Component {...pageProps} />
    </>
  )
}

This works fine and shows mouse follower as well but after making some changes in the components it crashes with this error

Drafteed · 2022-09-15T14:07:20Z

You are using an older version of library from another repo. Please read the instructions carefully, you do not need to download anything manually.

sagarkhadka · 2022-09-16T06:57:53Z

First I tried the same way shown in the instruction and got the same error above. After this I downloaded the file and still got the same result.

1realjulius · 2022-10-16T18:19:50Z

Do you have any instructions to add this to a next js app

Giuseppetm · 2022-10-17T19:17:12Z

This library manipulates document, and document is not available until client render.
With a useEffect on your index.js file (or _app.js if you are using custom structure) you solve this problem.

import MouseFollower from "mouse-follower";
import gsap from "gsap";

MouseFollower.registerGSAP(gsap);

export default function MyApp({ Component, pageProps }) {
    useEffect(() => {
        const cursor = new MouseFollower();
    })

    return (
        <>
            <Head>
            </Head>

            <Component {...pageProps} />
        </>
    )
}

sagarkhadka · 2022-10-18T06:52:57Z

This works without any error thank you very much for the tip.
As you suggested, I import mouse-follower in _app.tsx. It does not show any error like previous. If I want to use different features like sticky or magnetic on different component how can i do it ?

Giuseppetm · 2022-10-18T11:21:22Z

This works without any error thank you very much for the tip. As you suggested, I import mouse-follower in _app.tsx. It does not show any error like previous. If I want to use different features like sticky or magnetic on different component how can i do it ?

It's explained in the library documentation.
Sticky effect is here.

<div data-cursor-stick>Hover me to stick cursor!</div>

If it doesn't work because of React try this:
<div data-cursor-stick="#stick-me">Hover <div id="stick-me">me</div> to stick cursor!</div>

sagarkhadka · 2022-10-19T07:45:18Z

Thank You very much for the tip.

I think I found some bug. Or it might be just me who doesn't know how to use properly.

<div data-cursor-text="MY WORK" className={style.imageContainer}>

Here I am trying to achieve something like this

But, I am getting following result.

Giuseppetm · 2022-10-19T08:29:57Z

What's that class you are using? If you need to style something try to do it inside of the div.
Also make sure that the color of the text is not the same as the one of the cursor.

<div data-cursor-text="MY WORK">
      <div className={style.imageContainer}> .. </>
</div>

sagarkhadka · 2022-10-20T06:26:45Z

This is what I am getting.

FalconTechNepal.__.Leading.IT.company.in.Nepal.-.Brave.2022-10-20.12-07-07.mp4

And this is the code in the component

<section className={style.works}>
  <div className={`${style.cardBox} row row-cols-2`}>
    {work.map((ourWork, index) => (
      <div
        key={index}
        className={index % 2 === 0 ? `${style.box1}` : `${style.box2}`}>
        <div
          data-cursor='-color-red -lg'
          data-cursor-text='MY WORK'>
          <div className={style.imageContainer}>
            <Image
              src={ourWork}
              width={900}
              height={1000}
              objectFit='cover'
              alt=''
            />
          </div>
        </div>
      </div>
    ))}
  </div>
</section>

Giuseppetm · 2022-10-20T07:13:41Z

This issue is probably related to the fact you are using a map function with each element having the same data-cursor.
Try to use it on a single item (without map), if it works it means this is the problem. There probably is some documentation about having the cursor available for multiple items.

sagarkhadka · 2022-10-20T08:51:33Z

I don't think map function is a problem here. As you mentioned I tried this on another element which is not mapped and still the situation is same. Here is the screenshot

And the code is

<div data-cursor-text='App  Dev'>
    <Image src={laptop} alt='laptop' layout='responsive' />
</div>

Giuseppetm · 2022-10-20T09:07:46Z

Is the style initialized correctly? I had to import index.scss of the library from node_modules
@import "../node_modules/mouse-follower/src/scss/index.scss";

sagarkhadka · 2022-10-20T09:44:05Z

I also imported index.scss in global.scss file
@import "/node_modules/mouse-follower/src/scss/index.scss";

gaurdivit · 2023-01-26T08:28:25Z

@sagarkhadka am unable to understand what to import and where to import...

sagarkhadka · 2023-01-30T05:43:46Z

@gaurdivit In next.js I did following things:

npm install gsap and npm install mouse-follower
In your _app.tsx/.jsx file import following
import MouseFollower from 'mouse-follower' import gsap from 'gsap'
After the import do the following in same file
MouseFollower.registerGSAP(gsap) useEffect(() => { const cursor = new MouseFollower() }, [])
And lastly in your global.css import the scss file for the mouse-follower
@import "/node_modules/mouse-follower/src/scss/index.scss";

After doing all this you should be able to see mouse follower in your web project.

h3ma209 · 2023-02-09T08:18:26Z

hello @sagarkhadka can you explain more about your solution please becuz i did exactly what you said but it doesnt work
it creates another scrollbar but doesnt show anything

sagarkhadka · 2023-02-09T15:31:35Z

@h3ma209 after you mentioned the issue I tried in new fresh next js project and I also got the same issue as you. The mouse follower is not visible and is showing weird behavior like overflowing the page. Since the MouseFollower is using scss in their source file I tried npm i sass and renamed the global.css to global.scss and it is working as expected. So, try installing sass it will work.

h3ma209 · 2023-02-10T18:28:15Z

it works thank you very much

gaurdivit · 2023-02-11T07:08:08Z

@sagarkhadka can I use it in react js?

gaurdivit · 2023-02-11T07:08:30Z

if yes then are the steps same as of next js?

gaurdivit · 2023-02-11T07:12:04Z

Syntax error: /Users/divitgaur/Documents/stuff/Personal/WEB/Projects/myown_portfolio/node_modules/mouse-follower/src/scss/index.scss Unknown word (102:11)
100 | transition:opacity 0.4s, transform 0.3s;
101 |

102 | #{$root}.-text &, #{$root}.-icon & {
| ^
103 | opacity:1;
104 | transform:scale(1);
WARNING in [eslint]
src/App.js
Line 15:11: 'cursor' is assigned a value but never used no-unused-vars

this error is showing @sagarkhadka

sagarkhadka · 2023-02-11T07:35:06Z

In react as well the step is same. I just checked in fresh vite react project it is working fine please check the following steps.

npm i gsap mouse-follower sass
rename your index.css to index.scss and include @import "/node_modules/mouse-follower/src/scss/index.scss";
In your app.js

import gsap from 'gsap'
import MouseFollower from 'mouse-follower'

MouseFollower.registerGSAP(gsap)

useEffect(() => {
  const cursor = new MouseFollower()
}, [])

This should do the thing.

h3ma209 · 2023-02-11T09:47:37Z

@sagarkhadka also please how can i put the image behind the title or text when it hovers
for example cubertos landing section
when i land on website shows the video and puts it behind the title instead of being over the title and hiding it
also how to resize it on hover

gaurdivit · 2023-02-11T15:36:48Z

It's working perfectly fine didn't change my app.css to app.scss
Thanks you so much @sagarkhadka
Wanna connect?

h3ma209 · 2023-02-11T19:52:01Z

@sagarkhadka please can you answer my question

sagarkhadka · 2023-02-12T05:00:32Z

@h3ma209 I haven't used this feature previously so it took time to know the issue. When image is shown on hover the mouse follower uses .-media class so in your scss file you can do .-media { z-index: -99 } which will put the images and videos you use to the back side of your text element. There might be some other ways too but this also works.

To resize you can do transform: scale(1.75) in ::before class of .-media. But, when doing this image is not filling the gap.

h3ma209 · 2023-02-12T10:56:25Z

ok thank you it did work but also i wanted to the title to change color so its visible like
i tried using mix-blend-mode: difference but didn't work

joshAntoniuk · 2023-06-29T19:35:28Z

Is there a way to make this work with tailwind?

sagarkhadka · 2023-07-02T13:53:44Z

Hey @joshAntoniuk, what problem are you facing. I think even when using tailwind css, the process should be same as shown here. I tried on fresh next 13.4.4 with tailwind with the same process it is working. If you want to change the color or something I think you can do it using @apply rule of tailwind this in scss file

.mf-cursor {
  @apply text-emerald-600;

  @media screen and (max-width: 900px) {
    @apply hidden;
  }
}

sagarkhadka closed this as completed Sep 11, 2022

sagarkhadka reopened this Sep 11, 2022

Drafteed added the question Further information is requested label Sep 13, 2022

sagarkhadka closed this as completed Feb 9, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to properly import in next app #13

How to properly import in next app #13

sagarkhadka commented Sep 11, 2022

Drafteed commented Sep 13, 2022

sagarkhadka commented Sep 15, 2022

Drafteed commented Sep 15, 2022

sagarkhadka commented Sep 16, 2022

1realjulius commented Oct 16, 2022

Giuseppetm commented Oct 17, 2022

sagarkhadka commented Oct 18, 2022

Giuseppetm commented Oct 18, 2022

sagarkhadka commented Oct 19, 2022

Giuseppetm commented Oct 19, 2022

sagarkhadka commented Oct 20, 2022 •

edited

Loading

Giuseppetm commented Oct 20, 2022

sagarkhadka commented Oct 20, 2022 •

edited

Loading

Giuseppetm commented Oct 20, 2022

sagarkhadka commented Oct 20, 2022

gaurdivit commented Jan 26, 2023

sagarkhadka commented Jan 30, 2023 •

edited

Loading

h3ma209 commented Feb 9, 2023

sagarkhadka commented Feb 9, 2023

h3ma209 commented Feb 10, 2023

gaurdivit commented Feb 11, 2023

gaurdivit commented Feb 11, 2023

gaurdivit commented Feb 11, 2023

sagarkhadka commented Feb 11, 2023 •

edited

Loading

h3ma209 commented Feb 11, 2023 •

edited

Loading

gaurdivit commented Feb 11, 2023

h3ma209 commented Feb 11, 2023

sagarkhadka commented Feb 12, 2023

h3ma209 commented Feb 12, 2023

joshAntoniuk commented Jun 29, 2023

sagarkhadka commented Jul 2, 2023 •

edited

Loading

How to properly import in next app #13

How to properly import in next app #13

Comments

sagarkhadka commented Sep 11, 2022

Drafteed commented Sep 13, 2022

sagarkhadka commented Sep 15, 2022

Drafteed commented Sep 15, 2022

sagarkhadka commented Sep 16, 2022

1realjulius commented Oct 16, 2022

Giuseppetm commented Oct 17, 2022

sagarkhadka commented Oct 18, 2022

Giuseppetm commented Oct 18, 2022

sagarkhadka commented Oct 19, 2022

Giuseppetm commented Oct 19, 2022

sagarkhadka commented Oct 20, 2022 • edited Loading

Giuseppetm commented Oct 20, 2022

sagarkhadka commented Oct 20, 2022 • edited Loading

Giuseppetm commented Oct 20, 2022

sagarkhadka commented Oct 20, 2022

gaurdivit commented Jan 26, 2023

sagarkhadka commented Jan 30, 2023 • edited Loading

h3ma209 commented Feb 9, 2023

sagarkhadka commented Feb 9, 2023

h3ma209 commented Feb 10, 2023

gaurdivit commented Feb 11, 2023

gaurdivit commented Feb 11, 2023

gaurdivit commented Feb 11, 2023

sagarkhadka commented Feb 11, 2023 • edited Loading

h3ma209 commented Feb 11, 2023 • edited Loading

gaurdivit commented Feb 11, 2023

h3ma209 commented Feb 11, 2023

sagarkhadka commented Feb 12, 2023

h3ma209 commented Feb 12, 2023

joshAntoniuk commented Jun 29, 2023

sagarkhadka commented Jul 2, 2023 • edited Loading

sagarkhadka commented Oct 20, 2022 •

edited

Loading

sagarkhadka commented Oct 20, 2022 •

edited

Loading

sagarkhadka commented Jan 30, 2023 •

edited

Loading

sagarkhadka commented Feb 11, 2023 •

edited

Loading

h3ma209 commented Feb 11, 2023 •

edited

Loading

sagarkhadka commented Jul 2, 2023 •

edited

Loading