Styled components crashes in app directory "TypeError: React__default.default.createContext is not a function"

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

In my machine:

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.3.0: Wed Jan  5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_X86_64
    Binaries:
      Node: 16.17.0
      npm: 8.19.2
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.0.0
      eslint-config-next: 13.0.0
      react: 18.2.0
      react-dom: 18.2.0

In reproduction project:

    Operating System:
      Platform: linux
      Arch: x64
      Version: Ubuntu 20.04.0 LTS Thu Oct 27 2022 11:40:15 GMT+0200 (Ora legale dell’Europa centrale)
    Binaries:
      Node: 16.14.2
      npm: 7.17.0
      Yarn: 1.22.19
      pnpm: 7.13.6
    Relevant packages:
      next: 13.0.1-canary.0
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Just adding Styled Components in the project and a simple declaration like:

const Abc = styled.div`color: red;`;

crashes the page where the tag is declared. The error is like this:

error - (sc_server)/node_modules/styled-components/dist/styled-components.cjs.js (1:13064) @ eval
error - TypeError: r.createContext is not a function
    at eval (webpack-internal:///(sc_server)/./node_modules/styled-components/dist/styled-components.cjs.js:351:12)
    at (sc_server)/./node_modules/styled-components/dist/styled-components.cjs.js (/home/projects/vercel-next-js-b8qir1/.next/server/app/page.js:532:1)
    at __webpack_require__ (/home/projects/vercel-next-js-b8qir1/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./app/page.tsx:6:75)
    at (sc_server)/./app/page.tsx (/home/projects/vercel-next-js-b8qir1/.next/server/app/page.js:251:1)
    at __webpack_require__ (/home/projects/vercel-next-js-b8qir1/.next/server/webpack-runtime.js:33:42)
    at Object.page (webpack-internal:///(sc_server)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fpage&appPaths=%2Fpage&pagePath=private-next-app-dir%2Fpage.tsx&appDir=%2Fhome%2Fprojects%2Fvercel-next-js-b8qir1%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2Fhome%2Fprojects%2Fvercel-next-js-b8qir1&isDev=true&tsconfigPath=tsconfig.json!:19:110)
    at collectGenerateParams (/home/projects/vercel-next-js-b8qir1/node_modules/next/dist/build/utils.js:710:194)
    at Object.collectGenerateParams (/home/projects/vercel-next-js-b8qir1/node_modules/next/dist/build/utils.js:725:12)
    at async Object.loadStaticPaths (/home/projects/vercel-next-js-b8qir1/node_modules/next/dist/server/dev/static-paths-worker.js:43:32) {
  type: 'TypeError',
  page: '/'
}

This happens with or without following these instructions, with styled-components 5.3.6 as well as 6.0.0-beta.5.

Expected Behavior

The page gets rendered without errors.

Link to reproduction

https://stackblitz.com/edit/vercel-next-js-b8qir1?file=app/page.tsx

To Reproduce

Move pages/index.tsx to app/page.tsx; add experimental:{appDir:true} to next.config.js, then execute:

npm i styled-components

Then add

import styled from 'styled-components';

const Abc = styled.div`color: red;`;

in the app/page.tsx file. Run the project.

[balazsorban44]

As mentioned in https://github.com/vercel/next.js/issues/41958#issuecomment-1293651736, any components relying on createContext must be marked as client components. Closing, as this is the expected behavior in this case. I’ll pass along a note to the team to explore if we can show a more clear error message.

[lukemorales]

Packages that rely on any type of context need to be called on the client. For it to work you’ll need to create separate components or make your app/page.tsx a client component with the declarative use client