build: import useSyncExternalStore from react when using react 18

[huozhi]

Fixes #37197

tested with examples/analyze-bundles/, stripped off 300b of the the use-sync-external-store shim when applied the code change.

Bug

• Related issues linked using fixes #number
• Integration tests added
• Errors have helpful link attached, see contributing.md

[ijjk]

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js build/external-store-bundle	Change
buildDuration	18.1s	18s	-170ms
buildDurationCached	7.1s	7.2s	⚠️ +92ms
nodeModulesSize	494 MB	494 MB	⚠️ +195 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	huozhi/next.js build/external-store-bundle	Change
/ failed reqs	0	0	✓
/ total time (seconds)	4.398	4.435	⚠️ +0.04
/ avg req/sec	568.46	563.73	⚠️ -4.73
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.508	1.529	⚠️ +0.02
/error-in-render avg req/sec	1658.03	1635.04	⚠️ -22.99

Client Bundles (main, webpack)

	vercel/next.js canary	huozhi/next.js build/external-store-bundle	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	29.2 kB	29.2 kB	✓
webpack-HASH.js gzip	1.54 kB	1.54 kB	✓
Overall change	73 kB	73 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	huozhi/next.js build/external-store-bundle	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js build/external-store-bundle	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	308 B	308 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.71 kB	2.71 kB	⚠️ +2 B
head-HASH.js gzip	359 B	359 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.74 kB	5.74 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.65 kB	2.65 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	391 B	391 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16 kB	16 kB	⚠️ +2 B

Client Build Manifests

	vercel/next.js canary	huozhi/next.js build/external-store-bundle	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	huozhi/next.js build/external-store-bundle	Change
index.html gzip	533 B	533 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Diffs

Diff for _buildManifest.js

@@ -8,7 +8,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fcss-436fa6bb26fc4120.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-166cebe56831487c.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-4df33a4fcfd9ed63.js"
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-544bb68363445a0e.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-c1372eeb4916d32c.js"],

Diff for dynamic-HASH.js

@@ -259,7 +259,6 @@
       });
       exports["default"] = void 0;
       var _react = _interopRequireDefault(__webpack_require__(7294));
-      var _shim = __webpack_require__(1688);
       var _loadableContext = __webpack_require__(3644);
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
@@ -268,6 +267,8 @@
               default: obj
             };
       }
+      var useSyncExternalStore = (false ? 0 : __webpack_require__(1688))
+        .useSyncExternalStore;
       var ALL_INITIALIZERS = [];
       var READY_INITIALIZERS = [];
       var initialized = false;
@@ -312,7 +313,7 @@
           var context = _react.default.useContext(
             _loadableContext.LoadableContext
           );
-          var state = (0, _shim).useSyncExternalStore(
+          var state = useSyncExternalStore(
             subscription.subscribe,
             subscription.getCurrentValue,
             subscription.getCurrentValue

---

Default Build with SWC (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js build/external-store-bundle	Change
buildDuration	20.2s	20.8s	⚠️ +649ms
buildDurationCached	7.2s	7.3s	⚠️ +132ms
nodeModulesSize	494 MB	494 MB	⚠️ +195 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	huozhi/next.js build/external-store-bundle	Change
/ failed reqs	0	0	✓
/ total time (seconds)	4.465	4.515	⚠️ +0.05
/ avg req/sec	559.97	553.75	⚠️ -6.22
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.584	1.592	⚠️ +0.01
/error-in-render avg req/sec	1578.08	1569.91	⚠️ -8.17

Client Bundles (main, webpack)

	vercel/next.js canary	huozhi/next.js build/external-store-bundle	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.7 kB	42.7 kB	✓
main-HASH.js gzip	29.7 kB	29.7 kB	✓
webpack-HASH.js gzip	1.54 kB	1.54 kB	✓
Overall change	74 kB	74 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	huozhi/next.js build/external-store-bundle	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js build/external-store-bundle	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	311 B	311 B	✓
css-HASH.js gzip	324 B	324 B	✓
dynamic-HASH.js gzip	2.89 kB	2.9 kB	⚠️ +4 B
head-HASH.js gzip	357 B	357 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.84 kB	5.84 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.78 kB	2.78 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	392 B	392 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.4 kB	16.4 kB	⚠️ +4 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js build/external-store-bundle	Change
_buildManifest.js gzip	457 B	458 B	⚠️ +1 B
Overall change	457 B	458 B	⚠️ +1 B

Rendered Page Sizes

	vercel/next.js canary	huozhi/next.js build/external-store-bundle	Change
index.html gzip	533 B	533 B	✓
link.html gzip	547 B	547 B	✓
withRouter.html gzip	529 B	529 B	✓
Overall change	1.61 kB	1.61 kB	✓

Diffs

Diff for _buildManifest.js

@@ -8,7 +8,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fcss-436fa6bb26fc4120.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-166cebe56831487c.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-4df33a4fcfd9ed63.js"
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-544bb68363445a0e.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-c1372eeb4916d32c.js"],

Diff for dynamic-HASH.js

@@ -259,7 +259,6 @@
       });
       exports["default"] = void 0;
       var _react = _interopRequireDefault(__webpack_require__(7294));
-      var _shim = __webpack_require__(1688);
       var _loadableContext = __webpack_require__(3644);
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
@@ -268,6 +267,8 @@
               default: obj
             };
       }
+      var useSyncExternalStore = (false ? 0 : __webpack_require__(1688))
+        .useSyncExternalStore;
       var ALL_INITIALIZERS = [];
       var READY_INITIALIZERS = [];
       var initialized = false;
@@ -312,7 +313,7 @@
           var context = _react.default.useContext(
             _loadableContext.LoadableContext
           );
-          var state = (0, _shim).useSyncExternalStore(
+          var state = useSyncExternalStore(
             subscription.subscribe,
             subscription.getCurrentValue,
             subscription.getCurrentValue

Commit: fe6229e