Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Next.js includes useSyncExternalStore shim even with React 18

See original GitHub issue

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:28:41 PST 2021; root:xnu-8019.61.5~1/RELEASE_ARM64_T6000
Binaries:
  Node: 16.14.2
  npm: 8.5.0
  Yarn: 1.22.15
  pnpm: 6.11.0
Relevant packages:
  next: 12.1.7-canary.11
  react: 0.0.0-experimental-82c64e1a4-20220520
  react-dom: 0.0.0-experimental-82c64e1a4-20220520

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

This brings in an external package: https://github.com/vercel/next.js/blob/26459ef097b0dc9bae43d414a36e3c1eaa30aac1/packages/next/shared/lib/loadable.js#L25

However, React 18 already supports useSyncExternalStore directly.

Expected Behavior

Don’t bundle the shim when the user is on React 18+.

To Reproduce

Create a new Next.js project.

Issue Analytics

State:
Created a year ago
Reactions:2
Comments:11 (7 by maintainers)

Top GitHub Comments

2reactions

huozhicommented, May 27, 2022

We add chunk preloading support for next/dynamic with suspense: true in v12.1.7-canary.19

0reactions

github-actions[bot]commented, Jun 27, 2022

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.

Top Results From Across the Web

React 18: Overview - Next.js

Next.js 13 requires using React 18, unlocking: Streaming SSR; React Server Components; Edge and Node.js Runtimes; New APIs like startTransition and more.

useSyncExternalStore - The underrated React API

You might have heard of useSyncExternalStore(), a new React 18 hook to subscribe to external data sources. It is often used internally by ......

Hooks API Reference - React

They let you use state and other React features without writing a class. This page describes the APIs for the built-in Hooks in...

Uncaught TypeError: dispatcher.useSyncExternalStore is not ...

This happens because react-redux is not supported yet with React 18 (React and React Native). Downgrade react-redux to the previous version ...

Meet the new hook useSyncExternalStore, introduced in ...

The most significant update of React 18 comes with concurrent ... shim import {useSyncExternalStore} from 'use-sync-external-store/shim'; ...