Support for SSR

[MohdAhmad1]

I am using this package with Next.js and I have placed the SmoothProvider component in _app.js

_app.tsx Code

import { ThemeProvider } from "next-themes";
import { SmoothProvider } from "react-smooth-scrolling";

// Header and Footers
import Navbar from "./Navbar";

// types
import type { FC } from "react";
import type { AppProps } from "next/app";

const App: FC = ({ Component, pageProps }: AppProps) => {
  return (
    <main>
      <ThemeProvider attribute="class">
        <SmoothProvider skew>
          <Navbar />
          <Component {...pageProps} />
        </SmoothProvider>
      </ThemeProvider>
    </main>
  );
};

export default App;

The Bug

/mnt/e/web devolopement prac/next_js__prac/photon/node_modules/react-smooth-scrolling/dist/index.js:24
import React, { useEffect, useRef, useCallback } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at new Script (node:vm:100:7)
    at p._moduleCompile (/mnt/e/web devolopement prac/next_js__prac/photon/node_modules/jiti/dist/v8cache.js:2:3154)
    at Module.o._compile (/mnt/e/web devolopement prac/next_js__prac/photon/node_modules/jiti/dist/v8cache.js:2:2705)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at n (/mnt/e/web devolopement prac/next_js__prac/photon/node_modules/jiti/dist/v8cache.js:2:2472)
    at Object.react-smooth-scrolling (/mnt/e/web devolopement prac/next_js__prac/photon/.next/server/pages/_app.js:3252:18)
    at __webpack_require__ (/mnt/e/web devolopement prac/next_js__prac/photon/.next/server/webpack-runtime.js:25:42)

Screenshot

[ptrkvsky]

Did you try to use the dynamic import ? https://nextjs.org/docs/advanced-features/dynamic-import

[m90khan]

The best approach would be to add it as a component with content as children prop. then import it as dynamic. does the trick