React.Component is not defined

[cyberalien]

Verify canary release

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

Provide environment information

Operating System: Platform: darwin Arch: x64 Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:17:10 PDT 2022; root:xnu-8020.140.49~2/RELEASE_X86_64 Binaries: Node: 18.12.1 npm: 9.1.2 Yarn: 1.22.19 pnpm: 7.13.4 Relevant packages: next: 13.0.4-canary.3 eslint-config-next: 13.0.3 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)

next dev

Describe the Bug

React.Component is not defined.

When using component that extends React.Component, it is not usable on server and throws error.

After attempting to debug, it appears that React.Component is missing. At top of component:

import React from 'react';
console.log(Object.keys(React));

is missing bunch of keys that should exist in React, including Component.

After debugging more, it looks like import statement imports this file: ./node_modules/next/dist/compiled/react/cjs/react.shared-subset.development.js instead of correct React file, which does not include Component.

Expected Behavior

Expected React.Component to work.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/bfourgeaud/iconify-next13-bug

To Reproduce

1. Install, run next dev
2. Open http://localhost:3000/error page.
3. See error in console.

To debug issue, open ./node_modules/@iconify/react/dist/iconify.mjs, after import React from 'react'; add console.log(Object.keys(React)); and you'll see that Component is missing there.

[balazsorban44]

As per the documentation, class components (extending React.Component) aren't supported in Server Components. You can mark the module that imports such a component with "use client".

[cyberalien]

Adding "use client" results in error about missing "private-next-rsc-mod-ref-proxy" module.

This is in third party component, created for use with React, not specific to NextJS. So now developers can't use third party libraries that use class components?

[balazsorban44]

Could you open a bug report with a (minimal) reproduction for this?

I could not reproduce this here: https://github.com/balazsorban44/nextjs-43051

So now developers can't use third party libraries that use class components?

No, this is only the case for Server Components. Client components (similar to pages/) are expected to continue working as before, even in app/.

[cyberalien]

Could you open a bug report with a (minimal) reproduction for this?

In this demo add "use client" to ./node_modules/@iconify/react/dist/iconify.mjs, which as far as I understand, should mark it as client only

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.