Support new TypeScript satisfies operator.

[alii]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.1.0: Mon Aug 29 20:11:49 PDT 2022; root:xnu-8792.40.74.0.1~20/RELEASE_ARM64_T6000
Binaries:
  Node: 18.9.0
  npm: 8.19.1
  Yarn: 3.2.0
  pnpm: N/A
Relevant packages:
  next: 12.3.2-canary.7
  eslint-config-next: 12.3.1
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When using the new satisfies TypeScript operator, the compiler won't build the app as it doesn't understand the syntax.

Documentation for operator: https://devblogs.microsoft.com/typescript/announcing-typescript-4-9-beta/#the-satisfies-operator

Code:

Result:

Expected Behavior

The build works

Link to reproduction

n/a, you just need to use the satisfies keyword

To Reproduce

1. Write the following code in a Next.js app (or any code that uses satisfies).

export const posts = [
	new ServerlessOAuthPart2(),
	new OpenSource(),
	new Mochip(),
	new ZeroKbBlog(),
	new ServerlessDiscordOAuth(),
	new Goals(),
	new StrictTSConfig(),
] as const satisfies readonly Post[];

2. Run yarn build
3. cry because your build doesn't work and the end of the world nears

[SukkaW]

SWC compiler already supports TS 4.9: swc-project/swc#5938

Waiting for Next.js to bump the version.

[vilkinsons]

Is there an ETA on this given TS 4.9's GA? It's been a couple of weeks.

[frdwhite24]

Any update on an ETA for this? Finally found the perfect use-case for the new satisfies keyword but am blocked by this 😢

[PabloSzx]

Would it be possible to update Next.js 12 to support TypeScript 4.9? We still can't update to Next.js 13 and wont be able to for quite some time

@ijjk

[vilkinsons]

Example of us trying and failing to get this to work. Here’s the specific bit of code:

          case "linkTitle":
            return {
              kind: GridCellKind.Custom,
              readonly: true,
              allowOverlay: false,
              copyData: linkRow.linkTitle,
              data: {
                kind: "link-cell",
                linkRow,
              } satisfies LinkCellProps,
            };

The TS playground suggests satisfies in a nested object is valid, so this should work.

[algomachine007]

Good day, i have the same issue on NEXT 12, would be glad to find a solution

[IntusFacultas]

Plus one unfortunately. 12.2.5

[CodeVachon]

Still an Issue on 12.3.4

[lavelle]

Is there any way to pin a new version of SWC without waiting for next itself to update? I'm guessing not since they have their own SWC package. We are also on 12.3.4 and having this issue. I'm wondering if things like this will start to come to v13 only

[santialbo]

Why was this moved to a discussion? There's nothing to discuss here. Next.js is lagging behind in Typescript support.

[codinsonn]

Tried updating and pinning all my Babel versions to either the latest or ^7.22.5 versions through the "resolutions" field in package.json, but the problem persists. Checking which versions are installed with yarn why {babel module} states there's only one newly updated version for each of the ones I updated, so the resolutions themselves definitely work... just not to resolve the problem 😅

As I've seen that updating the babel versions does work in other, non-next.js projects, I'm inclined to assume that either:

• next.js seems to simply ignore the resolved babel modules (e.g. because it prebuilds it's own compiler somehow?)
• there's more steps to this than just applying the right typescript and babel versions

[piersolenski]

Any updates @balazsorban44?

[f0rmat1k]

You have satisfies in documentation https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths, but it still doesn't work...

[CalebJamesStevens]

12.3.4 still an issue

[lance13c]

satisfies is working in our repo using these configs. Other variables may be needed to get this working, but I believe these are the most impactful. Let me know if any of these configs work for you.

next.config.js

...
experimental: {
  swcPlugins: [['next-superjson-plugin', {}]],
}
...

package.json

...
"next": "13.4.12",
"@swc/core": "^1.3.59",
"next-superjson-plugin": "^0.5.10"
"typescript": "^5.1.6"
...

[luixo]

If it still doesn't work for you with babel - check that you don't have @babel/core lower than 7.20 installed somewhere down your dependency tree (or maybe in your own package.json).

[BitOfUniverse]

In case anyone still having issues and looking for a solution, try to upgrade next.js to the latest minor/patch version of v13:
yarn upgrade [email protected]
it should be enough, if it's not try also upgrade @babel/core
yarn upgrade @babel/[email protected]

[eliezra236]

Still having this issue in 12.3.4
Is there any fix / workaround?

[Alejandro-J-Caputto]

is the only possible solution to upgrade to Nextjs 13?

[Alejandro-J-Caputto]

Ok guys, my collage was able to figure out a workaround.
If you are still running next.js < 13. Try to force the resolution for @next/swc-darwin-arm64:
package.json

  "resolutions": {
    {
    "@next/swc-darwin-arm64": "13.0.7",
    "@next/swc-darwin-x64": "13.0.7",
    "@next/swc-linux-x64-gnu": "13.0.7",
    "@next/swc-linux-x64-musl": "13.0.7"
  }
  },

[tran-simon]

didnt work for us

[RodrigoTomeES]

didnt work for us

You MUST remove the lock file, node_modules and reinstall the dependencies