diff --git a/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js b/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js
index 7091db0525b9f..275dd5223db2d 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js
@@ -152,7 +152,12 @@ function getDocumentFromRoot(root: HoistableRoot): Document {
// ReactDOM.Preload
// --------------------------------------
type PreloadAs = ResourceType;
-type PreloadOptions = {as: PreloadAs, crossOrigin?: string, integrity?: string};
+type PreloadOptions = {
+ as: PreloadAs,
+ crossOrigin?: string,
+ integrity?: string,
+ type?: string,
+};
function preload(href: string, options: PreloadOptions) {
if (__DEV__) {
validatePreloadArguments(href, options);
@@ -208,6 +213,7 @@ function preloadPropsFromPreloadOptions(
as,
crossOrigin: as === 'font' ? '' : options.crossOrigin,
integrity: options.integrity,
+ type: options.type,
};
}
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
index 782818ba2837c..dd86417329a56 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
@@ -4203,7 +4203,7 @@ type PreloadOptions = {
as: PreloadAs,
crossOrigin?: string,
integrity?: string,
- media?: string,
+ type?: string,
};
export function preload(href: string, options: PreloadOptions) {
if (!currentResources) {
@@ -4568,6 +4568,7 @@ function preloadPropsFromPreloadOptions(
href,
crossOrigin: as === 'font' ? '' : options.crossOrigin,
integrity: options.integrity,
+ type: options.type,
};
}
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index 5f59f81731eb4..9144d392c56cf 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -2267,7 +2267,7 @@ body {
// @gate enableFloat
it('always enforces crossOrigin "anonymous" for font preloads', async () => {
function App() {
- ReactDOM.preload('foo', {as: 'font'});
+ ReactDOM.preload('foo', {as: 'font', type: 'font/woff2'});
ReactDOM.preload('bar', {as: 'font', crossOrigin: 'foo'});
ReactDOM.preload('baz', {as: 'font', crossOrigin: 'use-credentials'});
ReactDOM.preload('qux', {as: 'font', crossOrigin: 'anonymous'});
@@ -2285,7 +2285,13 @@ body {
expect(getMeaningfulChildren(document)).toEqual(
-
+
@@ -2347,6 +2353,7 @@ body {
function ClientApp() {
ReactDOM.preload('foo', {as: 'style'});
+ ReactDOM.preload('font', {as: 'font', type: 'font/woff2'});
React.useInsertionEffect(() => ReactDOM.preload('bar', {as: 'script'}));
React.useLayoutEffect(() => ReactDOM.preload('baz', {as: 'font'}));
React.useEffect(() => ReactDOM.preload('qux', {as: 'style'}));
@@ -2366,6 +2373,13 @@ body {
+