Use new JSX transform (#56294)

Co-authored-by: Jimmy Lai <laijimmy0@gmail.com>
Co-authored-by: Jiachi Liu <inbox@huozhi.im>

.eslintrc.json

@@ -113,14 +113,6 @@
         "jsdoc/no-undefined-types": "error"
       }
     },
-    {
-      "files": [
-        "test/**/*",
-        "examples/**/*",
-        "packages/create-next-app/templates/**/*"
-      ],
-      "rules": { "react/react-in-jsx-scope": "off" }
-    },
     {
       "files": ["examples/**/*"],
       "rules": {
@@ -351,7 +343,7 @@
     "react/no-direct-mutation-state": "warn",
     "react/no-is-mounted": "warn",
     "react/no-typos": "error",
-    "react/react-in-jsx-scope": "error",
+    "react/react-in-jsx-scope": "off",
     "react/require-render-return": "error",
     "react/style-prop-object": "warn",
     "react-hooks/rules-of-hooks": "error",

examples/with-stencil/packages/test-component/tsconfig.json

@@ -10,7 +10,7 @@
     "target": "es2017",
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "jsxFactory": "h"
   },
   "include": ["src", "types/jsx.d.ts"],

packages/next/src/build/analysis/get-page-static-info.ts

@@ -484,7 +484,7 @@ export async function getPageStaticInfo(params: {
 
   const fileContent = (await tryToReadFile(pageFilePath, !isDev)) || ''
   if (
-    /runtime|preferredRegion|getStaticProps|getServerSideProps|generateStaticParams|export const/.test(
+    /(?<!(_jsx|jsx-))runtime|preferredRegion|getStaticProps|getServerSideProps|generateStaticParams|export const/.test(
       fileContent
     )
   ) {

packages/next/src/build/swc/options.ts

@@ -111,7 +111,6 @@ function getBaseSWCOptions({
               ? '@emotion/react'
               : 'react'),
           runtime: 'automatic',
-          pragma: 'React.createElement',
           pragmaFrag: 'React.Fragment',
           throwIfNamespace: true,
           development: !!development,

packages/next/taskfile-swc.js

@@ -56,7 +56,7 @@ module.exports = function (task) {
           },
           transform: {
             react: {
-              pragma: 'React.createElement',
+              runtime: 'automatic',
               pragmaFrag: 'React.Fragment',
               throwIfNamespace: true,
               development: false,
@@ -102,7 +102,7 @@ module.exports = function (task) {
           },
           transform: {
             react: {
-              pragma: 'React.createElement',
+              runtime: 'automatic',
               pragmaFrag: 'React.Fragment',
               throwIfNamespace: true,
               development: false,

packages/next/tsconfig.json

@@ -6,7 +6,7 @@
     "target": "ES2017",
     "esModuleInterop": true,
     "moduleResolution": "node",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "stripInternal": true,
     "verbatimModuleSyntax": true
   },

packages/react-dev-overlay/tsconfig.json

@@ -9,7 +9,7 @@
     "downlevelIteration": true,
     "preserveWatchOutput": true,
     "outDir": "dist",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "noFallthroughCasesInSwitch": true,
     "skipLibCheck": true,
     "module": "Node16",

packages/third-parties/tsconfig.json

@@ -4,7 +4,7 @@
     "esModuleInterop": true,
     "target": "es2019",
     "outDir": "dist",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "resolveJsonModule": true,
     "module": "commonjs",
     "rootDir": "src"

tsconfig.json

@@ -4,7 +4,7 @@
     "noEmit": true,
     "allowJs": true,
     "resolveJsonModule": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "module": "esnext",
     "target": "ESNext",
     "esModuleInterop": true,