sharp-indigo•13mo ago

I have an error ReferenceError: document is not defined

I am trying to setup refine with REST API as a data provider. And while I am combine my own custom component with refine, I get that error: ReferenceError: document is not defined. How to fix it?

13 Replies

kapa.ai•13mo ago

Hi @mflash.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The error you're encountering seems to be related to a specific issue in your code, which isn't covered in the provided extracts. However, I can guide you on how to set up refine with a REST API as a data provider. To set up refine with a REST API, you need to use the built-in REST data provider. You can import it during the initialization phase of setting up your app. You then need to pass it to the Refine component as a dataProvider. Here's an example:

function App() {  
 return (  
 <Refine  
 dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}  
 .....  
 />  
 );  
}

function App() {  
 return (  
 <Refine  
 dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}  
 .....  
 />  
 );  
}

You can check the data coming from the data provider by navigating to <https://api.fake-rest.refine.dev> in your browser. For this application, you will use the posts route. Make sure to install a JSON formatter so the returned data is formatted and easy to read. [^1^] In some cases, you may need to customize the data provider to work with a REST API that doesn't follow the simple-rest design. You can use the swizzle command to customize the data provider. Here's an example:

import { Refine } from "@refinedev/core";  
import { dataProvider } from "./rest-data-provider";  
const App = () => {  
 return (  
 <Refine  
 dataProvider={dataProvider}  
 /* ... */  
 />  
 );  
};

import { Refine } from "@refinedev/core";  
import { dataProvider } from "./rest-data-provider";  
const App = () => {  
 return (  
 <Refine  
 dataProvider={dataProvider}  
 /* ... */  
 />  
 );  
};

[^2^] For more information on how to use data providers in refine, you can refer to the dataProvider prop component documentation (https://refine.dev/docs/api-reference/core/components/refine-config/#dataprovider). [^3^] If you're still encountering the error, it might be helpful to check your custom component's code for any references to the document object that might be causing the issue. [^1^]: (https://refine.dev/blog/refine-vs-redwood-js) [^2^]: (https://refine.dev/docs/packages/documentation/data-providers/simple-rest) [^3^]: (https://refine.dev/docs/tutorial/understanding-dataprovider/index) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@204169884727246849> kapa.ai is still learning and improving, please let us how it did by reacting below

sharp-indigo•13mo ago

This is my app.tsx

import './../public/assets/plugins/bootstrap/css/bootstrap.min.css'
import './../public/assets/css/theme.css'

const API_URL = "http://localhost:8000/api/v1";

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  noLayout?: boolean;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

function MyApp({ Component, pageProps }: AppPropsWithLayout): JSX.Element {
  const renderComponent = () => {
    if (Component.noLayout) {
      return <Component {...pageProps} />;
    }

    return (
      <Layout>
        <Component {...pageProps} />
      </Layout>
    );
  };

  const { t, i18n } = useTranslation();

  const i18nProvider = {
    translate: (key: string, params: object) => t(key, params),
    changeLocale: (lang: string) => i18n.changeLanguage(lang),
    getLocale: () => i18n.language,
  };

  return (
    <BrowserRouter>
      <RefineKbarProvider>
        <Refine
          routerProvider={routerProvider}
          dataProvider={dataProvider(API_URL)}
          authProvider={authProvider}
          i18nProvider={i18nProvider}
          options={{
            syncWithLocation: true,
            warnWhenUnsavedChanges: true,
          }}
          resources={[
            {
              name: "events",
              list: "/events",
              create: "/events/create",
              edit: "/events/edit/:id",
              show: "/events/show/:id",

            },]}
        >
          {renderComponent()}
          <RefineKbar />
          <Routes>

            <Route path="events">
              <Route index element={<HeadlessInferencer />} />

            </Route>
            {/* <Route path="*" element={<h1>ERROR *</h1>} /> */}

          </Routes>

          <UnsavedChangesNotifier />
          <DocumentTitleHandler />
        </Refine>
      </RefineKbarProvider>
    </BrowserRouter>
  );
}

export default appWithTranslation(MyApp);

import './../public/assets/plugins/bootstrap/css/bootstrap.min.css'
import './../public/assets/css/theme.css'

const API_URL = "http://localhost:8000/api/v1";

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  noLayout?: boolean;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

function MyApp({ Component, pageProps }: AppPropsWithLayout): JSX.Element {
  const renderComponent = () => {
    if (Component.noLayout) {
      return <Component {...pageProps} />;
    }

    return (
      <Layout>
        <Component {...pageProps} />
      </Layout>
    );
  };

  const { t, i18n } = useTranslation();

  const i18nProvider = {
    translate: (key: string, params: object) => t(key, params),
    changeLocale: (lang: string) => i18n.changeLanguage(lang),
    getLocale: () => i18n.language,
  };

  return (
    <BrowserRouter>
      <RefineKbarProvider>
        <Refine
          routerProvider={routerProvider}
          dataProvider={dataProvider(API_URL)}
          authProvider={authProvider}
          i18nProvider={i18nProvider}
          options={{
            syncWithLocation: true,
            warnWhenUnsavedChanges: true,
          }}
          resources={[
            {
              name: "events",
              list: "/events",
              create: "/events/create",
              edit: "/events/edit/:id",
              show: "/events/show/:id",

            },]}
        >
          {renderComponent()}
          <RefineKbar />
          <Routes>

            <Route path="events">
              <Route index element={<HeadlessInferencer />} />

            </Route>
            {/* <Route path="*" element={<h1>ERROR *</h1>} /> */}

          </Routes>

          <UnsavedChangesNotifier />
          <DocumentTitleHandler />
        </Refine>
      </RefineKbarProvider>
    </BrowserRouter>
  );
}

export default appWithTranslation(MyApp);

@kapa.ai this is my code

import './../public/assets/plugins/bootstrap/css/bootstrap.min.css'
import './../public/assets/css/theme.css'

const API_URL = "http://localhost:8000/api/v1";

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  noLayout?: boolean;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

function MyApp({ Component, pageProps }: AppPropsWithLayout): JSX.Element {
  const renderComponent = () => {
    if (Component.noLayout) {
      return <Component {...pageProps} />;
    }

    return (
      <Layout>
        <Component {...pageProps} />
      </Layout>
    );
  };

  const { t, i18n } = useTranslation();

  const i18nProvider = {
    translate: (key: string, params: object) => t(key, params),
    changeLocale: (lang: string) => i18n.changeLanguage(lang),
    getLocale: () => i18n.language,
  };

  return (
    <BrowserRouter>
      <RefineKbarProvider>
        <Refine
          routerProvider={routerProvider}
          dataProvider={dataProvider(API_URL)}
          authProvider={authProvider}
          i18nProvider={i18nProvider}
          options={{
            syncWithLocation: true,
            warnWhenUnsavedChanges: true,
          }}
          resources={[
            {
              name: "events",
              list: "/events",
              create: "/events/create",
              edit: "/events/edit/:id",
              show: "/events/show/:id",

            },]}
        >
          {renderComponent()}
          <RefineKbar />
          <Routes>

            <Route path="events">
              <Route index element={<HeadlessInferencer />} />

            </Route>
            {/* <Route path="*" element={<h1>ERROR *</h1>} /> */}

          </Routes>

          <UnsavedChangesNotifier />
          <DocumentTitleHandler />
        </Refine>
      </RefineKbarProvider>
    </BrowserRouter>
  );
}

export default appWithTranslation(MyApp);

import './../public/assets/plugins/bootstrap/css/bootstrap.min.css'
import './../public/assets/css/theme.css'

const API_URL = "http://localhost:8000/api/v1";

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  noLayout?: boolean;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

function MyApp({ Component, pageProps }: AppPropsWithLayout): JSX.Element {
  const renderComponent = () => {
    if (Component.noLayout) {
      return <Component {...pageProps} />;
    }

    return (
      <Layout>
        <Component {...pageProps} />
      </Layout>
    );
  };

  const { t, i18n } = useTranslation();

  const i18nProvider = {
    translate: (key: string, params: object) => t(key, params),
    changeLocale: (lang: string) => i18n.changeLanguage(lang),
    getLocale: () => i18n.language,
  };

  return (
    <BrowserRouter>
      <RefineKbarProvider>
        <Refine
          routerProvider={routerProvider}
          dataProvider={dataProvider(API_URL)}
          authProvider={authProvider}
          i18nProvider={i18nProvider}
          options={{
            syncWithLocation: true,
            warnWhenUnsavedChanges: true,
          }}
          resources={[
            {
              name: "events",
              list: "/events",
              create: "/events/create",
              edit: "/events/edit/:id",
              show: "/events/show/:id",

            },]}
        >
          {renderComponent()}
          <RefineKbar />
          <Routes>

            <Route path="events">
              <Route index element={<HeadlessInferencer />} />

            </Route>
            {/* <Route path="*" element={<h1>ERROR *</h1>} /> */}

          </Routes>

          <UnsavedChangesNotifier />
          <DocumentTitleHandler />
        </Refine>
      </RefineKbarProvider>
    </BrowserRouter>
  );
}

export default appWithTranslation(MyApp);

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- From the provided code, it seems like you're setting up a Next.js application with Refine. You're using a custom layout for your pages and integrating i18n for internationalization. You're also setting up routes for your "events" resource. However, without a specific question or problem, it's hard to provide a targeted answer. If you're encountering any issues or have specific questions about this code, please provide more details. If you're looking for general advice on using Refine, here are some points based on the provided extracts: 1. Refine is a collection of helper hooks, components, and providers. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow[^1^]. 2. Refine provides ready-made integrations for several UI libraries, including Ant Design System[^1^]. You can use these integrations to quickly build your UI. 3. Refine provides several hooks for data manipulation, such as useCreate() and useLog(). These hooks can be used to interact with your API[^2^]. 4. Refine is a headless framework, meaning it does not come with any pre-designed components or UI elements. Instead, it is designed to integrate seamlessly with any custom designs or UI libraries[^4^]. 5. Refine sets the root route to be the list path of the first resource item of the array passed to resources[^5^]. 6. Refine provides a useSelect() hook which is key to fetching data from the backend API[^6^]. For more detailed information on using Refine, you can refer to the official documentation (https://refine.dev/docs). [^1^]: (https://refine.dev/docs) [^2^]: (https://refine.dev/blog/refine-pixels-7) [^4^]: (https://refine.dev/blog/react-draggable-components-with-react-dnd) [^5^]: (https://refine.dev/blog/refine-react-invoice-generator-3) [^6^]: (https://refine.dev/blog/refine-react-invoice-generator-4) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@204169884727246849> kapa.ai is still learning and improving, please let us how it did by reacting below

sharp-indigo•13mo ago

@kapa.ai in that code I have an error: ReferenceError: document is not defined. How to fix it? My code:

import './../public/assets/plugins/bootstrap/css/bootstrap.min.css'
import './../public/assets/css/theme.css'

const API_URL = "http://localhost:8000/api/v1";

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  noLayout?: boolean;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

function MyApp({ Component, pageProps }: AppPropsWithLayout): JSX.Element {
  const renderComponent = () => {
    if (Component.noLayout) {
      return <Component {...pageProps} />;
    }

    return (
      <Layout>
        <Component {...pageProps} />
      </Layout>
    );
  };

  const { t, i18n } = useTranslation();

  const i18nProvider = {
    translate: (key: string, params: object) => t(key, params),
    changeLocale: (lang: string) => i18n.changeLanguage(lang),
    getLocale: () => i18n.language,
  };

  return (
    <BrowserRouter>
      <RefineKbarProvider>
        <Refine
          routerProvider={routerProvider}
          dataProvider={dataProvider(API_URL)}
          authProvider={authProvider}
          i18nProvider={i18nProvider}
          options={{
            syncWithLocation: true,
            warnWhenUnsavedChanges: true,
          }}
          resources={[
            {
              name: "events",
              list: "/events",
              create: "/events/create",
              edit: "/events/edit/:id",
              show: "/events/show/:id",

            },]}
        >
          {renderComponent()}
          <RefineKbar />
          <Routes>

            <Route path="events">
              <Route index element={<HeadlessInferencer />} />

            </Route>

          </Routes>

          <UnsavedChangesNotifier />
          <DocumentTitleHandler />
        </Refine>
      </RefineKbarProvider>
    </BrowserRouter>
  );
}

export default appWithTranslation(MyApp);

import './../public/assets/plugins/bootstrap/css/bootstrap.min.css'
import './../public/assets/css/theme.css'

const API_URL = "http://localhost:8000/api/v1";

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  noLayout?: boolean;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

function MyApp({ Component, pageProps }: AppPropsWithLayout): JSX.Element {
  const renderComponent = () => {
    if (Component.noLayout) {
      return <Component {...pageProps} />;
    }

    return (
      <Layout>
        <Component {...pageProps} />
      </Layout>
    );
  };

  const { t, i18n } = useTranslation();

  const i18nProvider = {
    translate: (key: string, params: object) => t(key, params),
    changeLocale: (lang: string) => i18n.changeLanguage(lang),
    getLocale: () => i18n.language,
  };

  return (
    <BrowserRouter>
      <RefineKbarProvider>
        <Refine
          routerProvider={routerProvider}
          dataProvider={dataProvider(API_URL)}
          authProvider={authProvider}
          i18nProvider={i18nProvider}
          options={{
            syncWithLocation: true,
            warnWhenUnsavedChanges: true,
          }}
          resources={[
            {
              name: "events",
              list: "/events",
              create: "/events/create",
              edit: "/events/edit/:id",
              show: "/events/show/:id",

            },]}
        >
          {renderComponent()}
          <RefineKbar />
          <Routes>

            <Route path="events">
              <Route index element={<HeadlessInferencer />} />

            </Route>

          </Routes>

          <UnsavedChangesNotifier />
          <DocumentTitleHandler />
        </Refine>
      </RefineKbarProvider>
    </BrowserRouter>
  );
}

export default appWithTranslation(MyApp);

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error ReferenceError: document is not defined typically occurs when you're trying to reference the document object in a server-side rendering (SSR) environment like Next.js. The document object is part of the Browser API and is not available on the server. In your case, the error might be caused by the CSS imports at the top of your file:

import './../public/assets/plugins/bootstrap/css/bootstrap.min.css'
import './../public/assets/css/theme.css'

import './../public/assets/plugins/bootstrap/css/bootstrap.min.css'
import './../public/assets/css/theme.css'

These CSS files might contain references to the document object, which would cause the error when Next.js tries to import them on the server. To fix this issue, you can try dynamic imports with Next.js. Dynamic imports will ensure that the CSS files are only imported on the client-side, where the document object is available. Here's how you can do it:

import dynamic from 'next/dynamic';

const DynamicCSS = dynamic(
  () => import('./../public/assets/plugins/bootstrap/css/bootstrap.min.css'),
  { ssr: false }
);

function MyApp({ Component, pageProps }: AppPropsWithLayout): JSX.Element {
  // ...
  return (
    <>
      <DynamicCSS />
      {/* rest of your component */}
    </>
  );
}

import dynamic from 'next/dynamic';

const DynamicCSS = dynamic(
  () => import('./../public/assets/plugins/bootstrap/css/bootstrap.min.css'),
  { ssr: false }
);

function MyApp({ Component, pageProps }: AppPropsWithLayout): JSX.Element {
  // ...
  return (
    <>
      <DynamicCSS />
      {/* rest of your component */}
    </>
  );
}

Do the same for the other CSS file. This should resolve the ReferenceError: document is not defined error. Please note that this is a general solution based on the provided code and the typical causes of this error. If the error persists, it might be caused by something else in your code not shown in the provided extract. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@204169884727246849> kapa.ai is still learning and improving, please let us how it did by reacting below

sharp-indigo•13mo ago

@kapa.ai It doesnt help. I removed CSS files.

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry to hear that the issue persists. The error ReferenceError: document is not defined typically occurs when server-side rendered code references document or another browser-specific global object that isn't available in a Node.js environment. In your case, it's possible that the error is being caused by a part of your code not shown in the provided extract. It could be in one of the components you're using, such as Layout, Refine, RefineKbar, HeadlessInferencer, UnsavedChangesNotifier, or DocumentTitleHandler. If any of these components or any other code executed on the server references document, it would cause the error you're seeing. To fix the issue, you would need to ensure that any references to document are inside a useEffect hook or otherwise only executed on the client side. If you're unable to find the cause of the issue, you might find it helpful to search your entire codebase for references to document to see if any are being executed on the server. If you're still having trouble, please provide more details or consider asking for help on a platform like StackOverflow or the Next.js GitHub Discussions page. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@204169884727246849> kapa.ai is still learning and improving, please let us how it did by reacting below

mute-gold•13mo ago

i suggest you too check your usages of browser API. due to nature of nextjs, in SSR you cannot use browser API. and ofcourse document is not exist. when you find which code is throw this, you can use useEffect or if (typeof window !== "undefined") to solve your problem

sharp-indigo•13mo ago

Finally, I decided start new project and now it is ok 👍