create-react-app error import type * as PrettyFormat from './types' in pretty-format

Question

it's a fresh install of cra with typescript template running on node 13.11.0 it gives me error when try to run npm start

TypeScript error in D:/Projects/personal-site/node_modules/@types/testing-library__react/node_modules/pretty-format/build/index.d.ts(7,13):
'=' expected.  TS1005

     5 |  * LICENSE file in the root directory of this source tree.
     6 |  */
  >  7 | import type * as PrettyFormat from './types';
       |             ^
     8 | /**
     9 |  * Returns a presentation string of your `val` object
    10 |  * @param val any potential JavaScript object```

Answer 1

Update

Thanks for marcelo-waisman's post.

Upgrading Typescript to > 3.8.0 solved this.

If we follow the documentation tightly...

yarn add typescript @types/node @types/react @types/react-dom @types/jest

... we should have installed TypeScript with the latest version, rather than the local-global version which may still below 3.8.0.

---

I found some clues. Maybe it's worth an opening an issue.

It's related to the package pretty-format and its type in create-react-app. We can find the source here: pretty-format/src/index.ts

import style = require('ansi-styles');
import type * as PrettyFormat from './types';

From the commit history, we can see there is a related Pull Request from two days ago, which changed this part from...

import * as PrettyFormat from './types';

... to...

import type * as PrettyFormat from './types';

This seems to be the cause of the error.

Answer 2

Actually this "import type" is a new syntax introduced in Typescript 3.8 https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-exports

The solution is actually very simple (if it's an option for you), just upgrade your typescript to 3.8+