Fix image related link prop warning with react 18 beta

package.json

@@ -36,6 +36,7 @@
     "lint-staged": "lint-staged",
     "next-with-deps": "./scripts/next-with-deps.sh",
     "next": "node --trace-deprecation --enable-source-maps packages/next/dist/bin/next",
+    "next-react-18": "node --trace-deprecation --enable-source-maps -r ./test/integration/react-18/test/require-hook.js packages/next/dist/bin/next",
     "next-no-sourcemaps": "node --trace-deprecation packages/next/dist/bin/next",
     "clean-trace-jaeger": "rm -rf test/integration/basic/.next && TRACE_TARGET=JAEGER node --trace-deprecation --enable-source-maps packages/next/dist/bin/next build test/integration/basic",
     "debug": "node --inspect packages/next/dist/bin/next",
@@ -138,9 +139,9 @@
     "pretty-ms": "7.0.0",
     "random-seed": "0.3.0",
     "react": "17.0.2",
-    "react-18": "npm:[email protected]alpha-13455d26d-20211104",
+    "react-18": "npm:[email protected]beta-0cc724c77-20211125",
     "react-dom": "17.0.2",
-    "react-dom-18": "npm:[email protected]alpha-13455d26d-20211104",
+    "react-dom-18": "npm:[email protected]beta-0cc724c77-20211125",
     "react-ssr-prepass": "1.0.8",
     "release": "6.3.0",
     "request-promise-core": "1.1.2",

packages/next/client/image.tsx

@@ -642,6 +642,18 @@ export default function Image({
     }
   }
 
+  let imageSrcSetPropName = 'imageSrcSet'
+  let imageSizesPropName = 'imageSizes'
+  if (!process.env.__NEXT_REACT_ROOT) {
+    imageSrcSetPropName = imageSrcSetPropName.toLowerCase()
+    imageSizesPropName = imageSizesPropName.toLowerCase()
+  }
+  const linkProps = {
+    // Note: imagesrcset and imagesizes are not in the link element type with react 17.
+    [imageSrcSetPropName]: imgAttributes.srcSet,
+    [imageSizesPropName]: imgAttributes.sizes,
+  }
+
   return (
     <span style={wrapperStyle}>
       {hasSizer ? (
@@ -716,11 +728,8 @@ export default function Image({
             rel="preload"
             as="image"
             href={imgAttributes.srcSet ? undefined : imgAttributes.src}
-            // @ts-ignore: imagesrcset is not yet in the link element type.
-            imagesrcset={imgAttributes.srcSet}
-            // @ts-ignore: imagesizes is not yet in the link element type.
-            imagesizes={imgAttributes.sizes}
-          ></link>
+            {...linkProps}
+          />
         </Head>
       ) : null}
     </span>

test/integration/document-functional-render-prop/app/next.config.js

@@ -1,19 +1,7 @@
-module.exports = {
+const withReact18 = require('../../react-18/test/with-react-18')
+
+module.exports = withReact18({
   experimental: {
-    reactRoot: true,
     concurrentFeatures: true,
   },
-  webpack(config) {
-    const { alias } = config.resolve
-    // FIXME: resolving react/jsx-runtime https://github.com/facebook/react/issues/20235
-    alias['react/jsx-dev-runtime'] = 'react/jsx-dev-runtime.js'
-    alias['react/jsx-runtime'] = 'react/jsx-runtime.js'
-
-    // Use react 18
-    alias['react'] = 'react-18'
-    alias['react-dom'] = 'react-dom-18'
-    alias['react-dom/server'] = 'react-dom-18/server'
-
-    return config
-  },
-}
+})

test/integration/react-18/app/next.config.js

@@ -1,19 +1,14 @@
-module.exports = {
+const withReact18 = require('../test/with-react-18')
+
+module.exports = withReact18({
   experimental: {
     reactRoot: true,
     // concurrentFeatures: true,
   },
-  webpack(config) {
-    const { alias } = config.resolve
-    // FIXME: resolving react/jsx-runtime https://github.com/facebook/react/issues/20235
-    alias['react/jsx-dev-runtime'] = 'react/jsx-dev-runtime.js'
-    alias['react/jsx-runtime'] = 'react/jsx-runtime.js'
-
-    // Use react 18
-    alias['react'] = 'react-18'
-    alias['react-dom'] = 'react-dom-18'
-    alias['react-dom/server'] = 'react-dom-18/server'
-
-    return config
+  images: {
+    deviceSizes: [480, 1024, 1600, 2000],
+    imageSizes: [16, 32, 48, 64],
+    path: 'https://example.com/myaccount/',
+    loader: 'imgix',
   },
-}
+})

test/integration/react-18/app/pages/index.js

@@ -1,4 +1,5 @@
 import ReactDOM from 'react-dom'
+import Image from 'next/image'
 
 export default function Index() {
   if (typeof window !== 'undefined') {
@@ -7,6 +8,14 @@ export default function Index() {
   return (
     <div>
       <p id="react-dom-version">{ReactDOM.version}</p>
+      <Image
+        id="priority-image"
+        priority
+        host="secondary"
+        src="withpriority2.png"
+        width={300}
+        height={400}
+      />
     </div>
   )
 }

test/integration/react-18/test/basics.js

@@ -5,6 +5,12 @@ import cheerio from 'cheerio'
 import { fetchViaHTTP, renderViaHTTP } from 'next-test-utils'
 
 export default (context) => {
+  it('no warnings for image related link props', async () => {
+    await renderViaHTTP(context.appPort, '/')
+    expect(context.stderr).not.toContain('Warning: Invalid DOM property')
+    expect(context.stderr).not.toContain('Warning: React does not recognize')
+  })
+
   it('hydrates correctly for normal page', async () => {
     const browser = await webdriver(context.appPort, '/')
     expect(await browser.eval('window.didHydrate')).toBe(true)

test/integration/react-18/test/index.test.js

@@ -58,13 +58,13 @@ async function getDevOutput(dir) {
 }
 
 describe('React 18 Support', () => {
-  describe('no warns with stable supported version of react-dom', () => {
+  describe('Use legacy render', () => {
     beforeAll(async () => {
       await fs.remove(join(appDir, 'node_modules'))
-      nextConfig.replace('reactRoot: true', '// reactRoot: true')
+      nextConfig.replace('reactRoot: true', 'reactRoot: false')
     })
     afterAll(() => {
-      nextConfig.replace('// reactRoot: true', 'reactRoot: true')
+      nextConfig.replace('reactRoot: false', 'reactRoot: true')
     })
 
     test('supported version of react in dev', async () => {
@@ -91,7 +91,7 @@ describe('React 18 Support', () => {
     })
   })
 
-  describe('warns with stable supported version of react-dom', () => {
+  describe('Use react-dom 18 prerelease', () => {
     beforeAll(async () => {
       const reactDomPkgPath = join(
         appDir,
@@ -208,14 +208,21 @@ function runTest(mode, name, fn) {
   describe(`${name} (${mode})`, () => {
     beforeAll(async () => {
       context.appPort = await findPort()
+      context.stderr = ''
       if (mode === 'dev') {
         context.server = await launchApp(context.appDir, context.appPort, {
           nodeArgs,
+          onStderr(msg) {
+            context.stderr += msg
+          },
         })
       } else {
         await nextBuild(context.appDir, [], { nodeArgs })
         context.server = await nextStart(context.appDir, context.appPort, {
           nodeArgs,
+          onStderr(msg) {
+            context.stderr += msg
+          },
         })
       }
     })

test/integration/react-18/test/with-react-18.js

@@ -0,0 +1,20 @@
+module.exports = function withReact18(config) {
+  if (typeof config.experimental.reactRoot === 'undefined') {
+    config.experimental.reactRoot = true
+  }
+
+  config.webpack = (webpackConfig) => {
+    const { alias } = webpackConfig.resolve
+    // FIXME: resolving react/jsx-runtime https://github.com/facebook/react/issues/20235
+    alias['react/jsx-dev-runtime'] = 'react/jsx-dev-runtime.js'
+    alias['react/jsx-runtime'] = 'react/jsx-runtime.js'
+
+    // Use react 18
+    alias['react'] = 'react-18'
+    alias['react-dom'] = 'react-dom-18'
+    alias['react-dom/server'] = 'react-dom-18/server'
+
+    return webpackConfig
+  }
+  return config
+}

test/integration/react-streaming-and-server-components/app/next.config.js

@@ -1,20 +1,10 @@
-module.exports = {
+const withReact18 = require('../../react-18/test/with-react-18')
+
+module.exports = withReact18({
   pageExtensions: ['js', 'ts', 'jsx'], // .tsx won't be treat as page,
   experimental: {
     reactRoot: true,
     concurrentFeatures: true,
     serverComponents: true,
   },
-  webpack(config) {
-    const { alias } = config.resolve
-    alias['react/jsx-dev-runtime'] = 'react-18/jsx-dev-runtime.js'
-    alias['react/jsx-runtime'] = 'react-18/jsx-runtime.js'
-
-    // Use react 18
-    alias['react'] = 'react-18'
-    alias['react-dom'] = 'react-dom-18'
-    alias['react-dom/server'] = 'react-dom-18/server'
-
-    return config
-  },
-}
+})

test/integration/react-streaming-and-server-components/unsupported-native-module/next.config.js

@@ -1,19 +1,9 @@
-module.exports = {
+const withReact18 = require('../../react-18/test/with-react-18')
+
+module.exports = withReact18({
   experimental: {
     reactRoot: true,
     concurrentFeatures: true,
     serverComponents: true,
   },
-  webpack(config) {
-    const { alias } = config.resolve
-    alias['react/jsx-dev-runtime'] = 'react-18/jsx-dev-runtime.js'
-    alias['react/jsx-runtime'] = 'react-18/jsx-runtime.js'
-
-    // Use react 18
-    alias['react'] = 'react-18'
-    alias['react-dom'] = 'react-dom-18'
-    alias['react-dom/server'] = 'react-dom-18/server'
-
-    return config
-  },
-}
+})

yarn.lock

@@ -16514,22 +16514,22 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-"react-18@npm:[email protected]alpha-13455d26d-20211104":
-  version "18.0.0-alpha-13455d26d-20211104"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0-alpha-13455d26d-20211104.tgz#e21dbcf65b72a8ca15c8b078853b4c3eca428d40"
-  integrity sha512-rECM1RFXERi6L1KyvOylhxIzBznD40YB3cT5sFno5hyIpMCfbuKgH9UFchz3eIXUZbSaWDa5ljSH71dvs4tZPg==
+"react-18@npm:[email protected]beta-0cc724c77-20211125":
+  version "18.0.0-beta-0cc724c77-20211125"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0-beta-0cc724c77-20211125.tgz#e0050eb21c398902c5c0f7da9f4b8b52b8effd66"
+  integrity sha512-odsMe3EsqWSZy/ksPiSGuUcs41iAQQGEcws0565jsSQskJMLm7NOZ51AAoClIj8kZI4i3uHe/o22tZff9EsGnA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-"react-dom-18@npm:[email protected]alpha-13455d26d-20211104":
-  version "18.0.0-alpha-13455d26d-20211104"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0-alpha-13455d26d-20211104.tgz#e56be16370bfe2c1c9f68876f251ab995c22b6a6"
-  integrity sha512-LwfWfMoVjc6GCmqvhYeC07Pdn643GYCT0BvIAJWHRIVwdAdaSvSlnVl0iTpWVu4D9KMMEAZf1xSS3m/2NuGJ9w==
+"react-dom-18@npm:[email protected]beta-0cc724c77-20211125":
+  version "18.0.0-beta-0cc724c77-20211125"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0-beta-0cc724c77-20211125.tgz#7f7ac2a37e69c16cb97a42a52ffe24e80ab02027"
+  integrity sha512-SzWHSBjNIzn43jB+IeQhqgQE3zLJTFMv5KzvSFttKC9QSBS11vuYLdELjpiUNAMaAOmY4qmcnLEQvmKNwGK5fQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    scheduler "0.21.0-alpha-13455d26d-20211104"
+    scheduler "0.21.0-beta-0cc724c77-20211125"
 
 [email protected]:
   version "17.0.2"
@@ -17496,10 +17496,10 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-[email protected]alpha-13455d26d-20211104:
-  version "0.21.0-alpha-13455d26d-20211104"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0-alpha-13455d26d-20211104.tgz#e317f99cdc61ec047abb91153b198374f9ae0d20"
-  integrity sha512-unjpzhesSK4cHetlpEKmHolIUMSb6HdRzmYK2fTK8rHd4TfooyzYPgytPClL2dd4r7aItvs7389uWiYZWcTB4A==
+[email protected]beta-0cc724c77-20211125:
+  version "0.21.0-beta-0cc724c77-20211125"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0-beta-0cc724c77-20211125.tgz#2251f681a2e4e24bb0ad42909ce6dae253a39925"
+  integrity sha512-ZqjVAbosIfddFmNMdlJO/F0kr33qdgTGlLFCgIXsNIz/SjNq0Hn+lIaYtaIQPhZRFPwIgYOt+ssui0zZJ58rVg==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -19884,7 +19884,7 @@ watchpack-chokidar2@^2.0.0:
   dependencies:
     chokidar "^2.1.8"
 
-[email protected], watchpack@^2.2.0, watchpack@^2.3.0:
+[email protected], watchpack@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.3.0.tgz#a41bca3da6afaff31e92a433f4c856a0c25ea0c4"
   integrity sha512-MnN0Q1OsvB/GGHETrFeZPQaOelWh/7O+EiFlj8sM9GPjtQkis7k01aAxrg/18kTfoIVcLL+haEVFlXDaSRwKRw==
@@ -19981,7 +19981,7 @@ [email protected]:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-"webpack-sources3@npm:[email protected]", webpack-sources@^3.2.0, webpack-sources@^3.2.2:
+"webpack-sources3@npm:[email protected]", webpack-sources@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.2.tgz#d88e3741833efec57c4c789b6010db9977545260"
   integrity sha512-cp5qdmHnu5T8wRg2G3vZZHoJPN14aqQ89SyQ11NpGH5zEMDCclt49rzo+MaRazk7/UeILhAI+/sEtcM+7Fr0nw==