Next.js: Unsupported: TypeScript 3.8 Syntax: import type

[balupton]

Bug report

Describe the bug

Using the import type syntax from TypeScript 3.8 causes a build failure with next.js

To Reproduce

1. git clone https://github.com/balupton/nextjs-typescript-3.8-syntax (applies this changeset https://github.com/balupton/nextjs-typescript-3.8-syntax/commit/53a7fc6bffa8f030053cd3109ae11715d079f07c to the with-javascript next.js example)
2. cd nextjs-typescript-3.8-syntax
3. yarn install
4. yarn build

yarn run v1.22.4
$ next build
Creating an optimized production build  

Failed to compile.

/Users/balupton/Projects/experiments/nextjs-typescript-3.8-syntax/my-app/pages/index.tsx
ERROR in /Users/balupton/Projects/experiments/nextjs-typescript-3.8-syntax/my-app/pages/index.tsx(3,13):
3:13 '=' expected.
    1 | import Link from "next/link";
    2 | import Layout from "../components/Layout";
  > 3 | import type { AllKeys } from "simplytyped";
      |             ^
    4 | 
    5 | const IndexPage = () => (
    6 |   <Layout title="Home | Next.js + TypeScript Example">


> Build error occurred
Error: > Build failed because of webpack errors
    at build (/Users/balupton/Projects/experiments/nextjs-typescript-3.8-syntax/my-app/node_modules/next/dist/build/index.js:13:900)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Expected behavior

It to work fine

Screenshots

System information

• OS: [e.g. macOS, Windows] Darwin bevrymemacbook.local 19.4.0 Darwin Kernel Version 19.4.0: Wed Mar 4 22:28:40 PST 2020; root:xnu-6153.101.6~15/RELEASE_X86_64 x86_64
• Browser (if applies) [e.g. chrome, safari] n/a
• Version of Next.js: [e.g. 6.0.2] 9.3.5 - https://github.com/balupton/nextjs-typescript-3.8-syntax/blob/master/yarn.lock#L3413-L3414
• Version of Node.js: [e.g. 10.10.0] 13.12.0

Additional context

n/a

[balupton]

Babel has already landed support for this with https://github.com/babel/babel/pull/11171

Work in eslint is ongoing https://github.com/typescript-eslint/typescript-eslint/issues/1436

As next uses babel I would have thought this would have been sorted.

However, it seems that next is pinned to v7.0.0 of babel — https://github.com/zeit/next.js/blob/92dac596304a3a04c97a7ce40eea722880c79e89/package.json#L55 — which isn't https://github.com/babel/babel/releases/tag/v7.9.2 (bugfix on v7.9.0) or https://github.com/babel/babel/releases/tag/v7.9.0 (initial support)

[johnrjj]

https://github.com/zeit/next.js/pull/11840

[Timer]

This has been fixed by us upgrading Babel.

See https://github.com/vercel/next.js/tree/canary/examples/with-typescript-types

[adamsoffer]

Heads up, I'm still unable to use the import type syntax. When I deploy the with-typescript-types I still get that error. cc @Timer

[tamj0rd2]

I still get this error with the latest version of nextjs (9.4.4)

[aasili-shoprunner]

I'm experiencing the same as @tamj0rd2 when using Next.js 9.4.4 and Typescript 3.9.6

[cvolant]

Really strange. I hit the same issue, but... I just cannot figure where it comes from.
I my working repo, it works fine, but on the server it failed. So I git-cloned it locally, and with the same branch, same version, it fails with the above error. I ended up with 3 local repositories: 2 are working, 1 is still failing.
So with the same code from my part, in some repo it fails, but in others (on the same computer!)... it works.
:dizzy_face:

[cvolant]

After some hours (like many hours), I just tried the with-typescript-types exemple in the Next repo. At first I though it worked because yarn next works. But after half a day of further investigations, I came back to the bare example and tried yarn next build, and it failed with the above issue.

Yes, I could have avoided this wasted half a day of investigation if I had read this thread more carefully and noticed the problem was experienced when building, but it was the nth I read :weary:, and since the issue was closed, I didn't gave it enough attention.

@Timer, could you reopen it? Babel upgraded or not, it is not fixed yet.

[Cleberw3b]

up

[Toolo]

I think I found the cause:

Support for import type was introduced in @babel/core: 7.9.0 source

However, @babel/core is pinned to v7.7.7 in https://github.com/vercel/next.js/blob/canary/packages/next/package.json#L63

Probably this version would need to be bumped for it to work

CC @Timer