diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js index bab0772ca57cd..d75afafcff8e1 100644 --- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js +++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js @@ -1036,19 +1036,6 @@ export function bindInstance( export const supportsHydration = true; -// With Resources, some HostComponent types will never be server rendered and need to be -// inserted without breaking hydration -export function isHydratableType(type: string, props: Props): boolean { - if (enableFloat) { - if (type === 'script') { - const {async, onLoad, onError} = (props: any); - return !(async && (onLoad || onError)); - } - return true; - } else { - return true; - } -} export function isHydratableText(text: string): boolean { return text !== ''; } @@ -1164,21 +1151,22 @@ export function canHydrateInstance( // if we learn it is problematic const srcAttr = element.getAttribute('src'); if ( - srcAttr && - element.hasAttribute('async') && - !element.hasAttribute('itemprop') - ) { - // This is an async script resource - break; - } else if ( srcAttr !== (anyProps.src == null ? null : anyProps.src) || element.getAttribute('type') !== (anyProps.type == null ? null : anyProps.type) || element.getAttribute('crossorigin') !== (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) ) { - // This script is for a different src - break; + // This script is for a different src/type/crossOrigin. It may be a script resource + // or it may just be a mistmatch + if ( + srcAttr && + element.hasAttribute('async') && + !element.hasAttribute('itemprop') + ) { + // This is an async script resource + break; + } } return element; } diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js index 9a05521eac3ed..788b201566aa4 100644 --- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js +++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js @@ -2642,128 +2642,102 @@ function pushScript( noscriptTagInScope: boolean, ): null { if (enableFloat) { + const asyncProp = props.async; if ( + typeof props.src !== 'string' || + !props.src || + !( + asyncProp && + typeof asyncProp !== 'function' && + typeof asyncProp !== 'symbol' + ) || + props.onLoad || + props.onError || insertionMode === SVG_MODE || noscriptTagInScope || - props.itemProp != null || - typeof props.src !== 'string' || - !props.src + props.itemProp != null ) { - // This script will not be a resource nor can it be preloaded, we bailout early - // and emit it in place. + // This script will not be a resource, we bailout early and emit it in place. return pushScriptImpl(target, props); } const src = props.src; const key = getResourceKey('script', src); - if (props.async !== true || props.onLoad || props.onError) { - // we don't want to preload nomodule scripts - if (props.noModule !== true) { - // We can't resourcify scripts with load listeners. To avoid ambiguity with - // other Resourcified async scripts on the server we omit them from the server - // stream and expect them to be inserted during hydration on the client. - // We can still preload them however so the client can start fetching the script - // as soon as possible - let resource = resources.preloadsMap.get(key); - if (!resource) { - resource = { - type: 'preload', - chunks: [], - state: NoState, - props: preloadAsScriptPropsFromProps(props.src, props), - }; - resources.preloadsMap.set(key, resource); - if (__DEV__) { - markAsImplicitResourceDEV(resource, props, resource.props); + // We can make this