create-react-app error: import type * as PrettyFormat from './types'

[ibarapascal]

Describe the bug

create-react-app with typescript, yarn start failed

Did you try recovering your dependencies?

NaN

Which terms did you search for in User Guide?

NaN

Environment

NaN

Steps to reproduce

npx create-react-app my-app --template typescript
cd my-app
yarn start

Expected behavior

Start normally

Actual behavior

Reproduced by multiple participants.

TypeScript error in C:/work-place/github/work-repo/my-app/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

---

Related PR:

It related to package pretty-format: pretty-format/src/index.ts

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

From commit history, we can see there is a related Pull Request two days ago, which changed:

From

import * as PrettyFormat from './types';

To

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

Guessing it's related

---

Related S.O. questions

• https://stackoverflow.com/questions/60855938/typescript-error-ts1005-in-create-react-app-typescript-default-files
• https://stackoverflow.com/questions/60856081/create-react-app-with-typescript-template-failed-to-compile

[ibarapascal]

Solution

Set Typescript version > 3.8.0 solved this error.

It's a new syntax of Typescript: type-only-imports-and-export

import type { SomeThing } from "./some-module.js";

Document

create-react-app.dev/docs/adding-typescript

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

Related QA in Stack Overflow:

• create-react-app-error-import-type-as-prettyformat-from-types-in-pretty-format

[mosesoak]

@ibarapascal I'm getting the same error on a fresh CRA install using the typescript template (I tried it twice).

Curious why this issue is being closed, rather than updating the typescript version in CRA to prevent the error for others?

Thanks

[SarthakThakur0097]

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

Set Typescript version > 3.8.0 solved this error.

How does this work, the latest stable release version of TypeScript is 3.7.5?

[riccardogiorato]

Hey @ibarapascal why did you close this issue? I'm having the same problem and your fix:
yarn add typescript @types/node @types/react @types/react-dom @types/jest
was able to solve the crash on compile! You should resume this issue to let the devs fix this issues!

[SarthakThakur0097]

I rarely agree, since it's not my fix, it's been written in the document.
The reason why this occurs is that if you don't run yarn add typescript, the local version (on your machine) of typescript would be used, which may still lower than 3.8.0.
It's not related to CRA in my opinion.
But, since this kind of talk is keeping active, I would like to OPEN it and let others decide.

Only using this comand: yarn add typescript @types/node @types/react @types/react-dom @types/jest didn't resolve my issue. Is there anything we need to change in the package.json?

[ibarapascal]

@SarthakThakur0097 You can manually change the Typescript version in your package.json then run npm install or yarn install again.