Fixed "Expected jsx identifier" error on TypeScript generics & angle …

…bracket type assertions in .ts files (#30619)

* Fixed "Expected jsx identifier" error on TypeScript generics & angle bracket type assertions

* Ignore error from node-notifier on M1

* Add tests

Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/next/build/webpack/loaders/next-swc-loader.js

@@ -33,7 +33,7 @@ const nextDistPath =
   /(next[\\/]dist[\\/]shared[\\/]lib)|(next[\\/]dist[\\/]client)|(next[\\/]dist[\\/]pages)/
 
 function getSWCOptions({
-  isTypeScript,
+  filename,
   isServer,
   development,
   isPageFile,
@@ -42,11 +42,15 @@ function getSWCOptions({
   hasReactRefresh,
   isCommonJS,
 }) {
+  const isTSFile = filename.endsWith('.ts')
+  const isTypeScript = isTSFile || filename.endsWith('.tsx')
+
   const jsc = {
     parser: {
       syntax: isTypeScript ? 'typescript' : 'ecmascript',
       dynamicImport: true,
-      [isTypeScript ? 'tsx' : 'jsx']: true,
+      // Exclude regular TypeScript files from React transformation to prevent e.g. generic parameters and angle-bracket type assertion from being interpreted as JSX tags.
+      [isTypeScript ? 'tsx' : 'jsx']: isTSFile ? false : true,
     },
 
     transform: {
@@ -119,8 +123,6 @@ async function loaderTransform(parentTrace, source, inputSourceMap) {
   // Make the loader async
   const filename = this.resourcePath
 
-  const isTypeScript = filename.endsWith('.ts') || filename.endsWith('.tsx')
-
   let loaderOptions = getOptions(this) || {}
 
   const { isServer, pagesDir, hasReactRefresh } = loaderOptions
@@ -131,7 +133,7 @@ async function loaderTransform(parentTrace, source, inputSourceMap) {
 
   const swcOptions = getSWCOptions({
     pagesDir,
-    isTypeScript,
+    filename,
     isServer: isServer,
     isPageFile,
     development: this.mode === 'development',

packages/next/taskfile.js

@@ -1172,9 +1172,13 @@ export async function release(task) {
 
 // notification helper
 function notify(msg) {
-  return notifier.notify({
-    title: '▲ Next',
-    message: msg,
-    icon: false,
-  })
+  try {
+    notifier.notify({
+      title: '▲ Next',
+      message: msg,
+      icon: false,
+    })
+  } catch (err) {
+    // notifier can fail on M1 machines
+  }
 }

test/integration/typescript/components/angle-bracket-type-assertions.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line
+const myVar = <any>'test'
+
+export default myVar

test/integration/typescript/components/generics.ts

@@ -0,0 +1,10 @@
+class MyClass<T> {
+  value: T
+  constructor(value: T) {
+    this.value = value
+  }
+}
+
+const instance = new MyClass<string>('Hello World from Generic')
+
+export default instance.value

test/integration/typescript/pages/angle-bracket-type-assertions.tsx

@@ -0,0 +1,3 @@
+import value from '../components/angle-bracket-type-assertions'
+
+export default () => <div id="value">{value}</div>

test/integration/typescript/pages/generics.tsx

@@ -0,0 +1,3 @@
+import value from '../components/generics'
+
+export default () => <div id="value">{value}</div>

test/integration/typescript/test/index.test.js

@@ -49,6 +49,16 @@ describe('TypeScript Features', () => {
       expect($('#cookies').text()).toBe('{}')
     })
 
+    it('should render the generics page', async () => {
+      const $ = await get$('/generics')
+      expect($('#value').text()).toBe('Hello World from Generic')
+    })
+
+    it('should render the angle bracket type assertions page', async () => {
+      const $ = await get$('/angle-bracket-type-assertions')
+      expect($('#value').text()).toBe('test')
+    })
+
     it('should resolve files in correct order', async () => {
       const $ = await get$('/hello')
       expect($('#imported-value').text()).toBe('OK')