Add react-special-cursor in Next.js project about react-special-cursor HOT 5 CLOSED

Hi,
I succeeded to add react-special-cursor in my Next.js with next-transpile-modules :

1/ installation

npm i next-transpile-modules

2/ Modify next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  eslint: {
    ignoreDuringBuilds: true,
  },
}

const withTM = require("next-transpile-modules")([
  "react-special-cursor",
]);

module.exports = withTM({
  nextConfig
});

3/ add css in _app.js

import "../styles/globals.scss";
import "../styles/fonts.scss";
import "react-special-cursor/src/Cursor/Cursor.scss"

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

4/ import react-special-cursor in component

from react-special-cursor.

inside the Cursor.js, it is calling the Cursor.scss remove it and check other files also besides that I haven't tested it on server-side rendering libs like nextjs.
if it worked correctly with simple import that's good if not try to import it dynamically on the front I think next has its doc about it

from react-special-cursor.

Thank's for your help !
I will try asap.

from react-special-cursor.

Since it's not an issue, I will close it but fill free to reopen it or ask questions.
Also, were you able to fix the problem and use the cursor?

from react-special-cursor.

The problem now is from using css Module with sass in next.js, so I can't use hoverClasses with className={styles.error}.
https://nextjs.org/docs/basic-features/built-in-css-support

 <Cursor
      hoverClasses={[
        { classNameOfTargetElement: "head", classNameOfStyle: "head-hover" },
...

from react-special-cursor.