Next 12 Runtime TypeError: Class constructors cannot be invoked without 'new'

What version of Next.js are you using?

12.0.2

What version of Node.js are you using?

16.13.0

What browser are you using?

Chrome 96

What operating system are you using?

MacOS

How are you deploying your application?

next start

Describe the Bug

While updating my application from next 11 to 12 I ran into a runtime issue which I’m guessing is originating from the switch to SWC (?). I’m extending a Class and instantiating it, leading to a runtime error:

Unhandled Runtime Error
TypeError: Class constructors cannot be invoked without 'new'
pages/index.tsx (7:15) @ new newClient

   5 | import { Client } from '@spree/storefront-api-v2-sdk';
   6 | 
>  7 | class newClient extends Client {
     |               ^
   8 |   constructor(config: any) {
   9 |     super(config);
  10 |   }

Expected Behavior

The application should run / build successfully as it did in Next 11.

To Reproduce

1. Install next 12 / typescript: npx create-next-app@latest --typescript poc
2. Apply patch to reproduce the issue:

   diff --git a/package.json b/package.json
   index 2f98703..e2de6ca 100644
   --- a/package.json
   +++ b/package.json
   @@ -8,6 +8,7 @@
        "lint": "next lint"
      },
      "dependencies": {
   +    "@spree/storefront-api-v2-sdk": "^4.11.0",
        "next": "12.0.2",
        "react": "17.0.2",
        "react-dom": "17.0.2"
   diff --git a/pages/index.tsx b/pages/index.tsx
   index 72a4a59..23e7ec6 100644
   --- a/pages/index.tsx
   +++ b/pages/index.tsx
   @@ -2,6 +2,17 @@ import type { NextPage } from 'next'
    import Head from 'next/head'
    import Image from 'next/image'
    import styles from '../styles/Home.module.css'
   +import { Client } from '@spree/storefront-api-v2-sdk';
   +
   +class newClient extends Client {
   +  constructor(config: any) {
   +    super(config);
   +  }
   +}
   +
   +const v2Client = new newClient({
   +  host: 'https://localhost:3000/',
   +});
   
    const Home: NextPage = () => {
      return (
   

3. install deps: npm install
4. start the development server (npm dev) and visit the site

[timneutkens]

Investigated this and found that the constructor helper in SWC does not account for native classes currently. @kdy1 is going to fix it 👍

[pboyer]

I’m also seeing this. Definitely blocking us from adopting swc.