search

jbetancur / react-data-table-component

A responsive table library with built-in sorting, pagination, selection, expandable rows, and customizable styling.
https://react-data-table-component.netlify.app
Apache License 2.0
2.04k stars 411 forks source link

Next.js 13 and above will not allow this to be used in a React Server Components #1187

Open ADTC opened 9 months ago

ADTC commented 9 months ago

Issue Check list

Describe the bug

The component DataTable will not work inside React Server Components. This is most relevant to newer versions of Next.js, however, it also applies to non-NextJS projects which use this new React feature.

Currently, the workaround is to create a separate client component to host the DataTable component inside it, then use the client component inside the original server component.

To Reproduce

Steps to reproduce the behavior:

  1. Create a Next.js 13 or 14 project and install the package.
  2. Add any basic example of react-data-table-component in a server-rendered page (server component).
  3. Run the project with npm run dev and attempt to load the page in your browser.
  4. See error

Expected behavior

DataTable is automatically a client component.

Actual behavior

Server Error
TypeError: createContext only works in Client Components.
Add the "use client" directive at the top of the file to use it.
Read more: https://nextjs.org/docs/messages/context-in-server-component

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Call Stack
o
node_modules/styled-components/dist/styled-components.esm.js (1:15911)

(rsc)/./node_modules/styled-components/dist/styled-components.esm.js
[...]/.next/server/vendor-chunks/styled-components.js (20:1)

__webpack_require__
[...]/.next/server/webpack-runtime.js (33:42)

eval
webpack-internal:///(rsc)/./node_modules/react-data-table-component/dist/index.es.js (13:75)

(rsc)/./node_modules/react-data-table-component/dist/index.es.js
[...]/.next/server/vendor-chunks/react-data-table-component.js (20:1)

__webpack_require__
[...]/.next/server/webpack-runtime.js (33:42)

eval
webpack-internal:///(rsc)/./app/page.tsx (14:84)

(rsc)/./app/page.tsx
[...]/.next/server/app/page.js (341:1)

Function.__webpack_require__
[...]/.next/server/webpack-runtime.js (33:42)

process.processTicksAndRejections
node:internal/process/task_queues (95:5)

Code Sandbox, Screenshots, or Relevant Code

image

Versions (please complete the following information)

Additional context

I believe adding 'use client' on top of the component source code file will not cause any issues with projects that aren't using React Server Components, as it's a simple string constant which is ignored by systems that aren't designed to understand it.

chuamatt commented 8 months ago

Hi @ADTC, I'm experiencing the same issue now. Could you share more details of how you managed to work around this error? Thanks!

ADTC commented 8 months ago

@chuamatt you can solve this by placing the table inside a client component. If your component is a server component and you need it to stay a server component, just create a separate client component that's a wrapper around the table, then use the wrapper client component inside your server component.