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

[ADTC]

Issue Check list

• [x] Agree to the Code of Conduct
• [x] Read the README
• [x] You are using React 16.8.0+
• [x] You installed styled-components
• [ ] Include relevant code or preferably a code sandbox

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

Versions (please complete the following information)

• React 18.2.0
• Styled Components latest
• OS: macOS latest
• Browser: Chrome latest

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]

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]

@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.