Next.js Discord

Discord Forum

document is not defined - importing external libraries - Next.js 13

Unanswered
Australian Freshwater Crocodile posted this in #help-forum
Open in Discord
Australian Freshwater CrocodileOP
I'm trying to import a client side library in my project so I made a ClientProvider component... but it still says "document is not defined"...

The library is locomotive scroll: https://github.com/locomotivemtl/locomotive-scroll

layout.tsx:
import ClientProvider from '@/components/ClientProvider'


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body data-scroll-container>
        <ClientProvider>
          {children}
        </ClientProvider>
      </body>
    </html>
  )
}


ClientProvider.tsx
'use client'

import React, { useEffect } from 'react'
import LocomotiveScroll from 'locomotive-scroll';


const ClientProvider = ({
  children,
}: {
  children: React.ReactNode
}) => {

  useEffect(() => {
    const scroll = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),
      smooth: true
    });
  }, [])
  
  return (
    <>
      {children}
    </>
  )
}

export default ClientProvider

8 Replies

Masai Lion
I did something like you but a don't know how to help you.
look at my code and it can maybe help you
provider :
"use client";

import React, {ReactNode} from "react";
import {SessionProvider} from "next-auth/react";

interface Props {
    children: ReactNode
}

const Providers = ({children}: Props) => {
    return (
        <SessionProvider>
            {children}
        </SessionProvider>
    )
}

export default Providers;
layout :
import './globals.scss'
import { Inter } from 'next/font/google'
import Nav from '@/components/Layout/nav'
import Footer from '@/components/Layout/footer'
import Head from 'next/head'
import React from 'react'
import Providers from '@/components/providers/providers'


const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Forten shop',
  description: 'Forten shop',
}

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {

  return (
    
      <html lang="en">
        <Head>
          <link rel='shortcut icon' href="/favicon.ico" />
        </Head>
        <body className={`${inter.className} flex`}>
          <Nav />
          <Providers >
            {children}
          </Providers>
          <Footer />
        </body>
      </html>
    
  )
}
@Australian Freshwater Crocodile
Australian Freshwater CrocodileOP
Thanks for answering! unfortunately that doesn't seem to work... still says the document is undefined...
Masai Lion
sorry
Australian Freshwater CrocodileOP
No problem, thanks for helping anyways!