React Typescript: Line 0: Parsing error: Cannot read property 'name' of undefined

Question

Today suddenly I started to get build errors on a project built with Typescript. In a file that (or anything it references) hasn't been changed in weeks, I started to get:

./path/to/my/file.ts
  Line 0:  Parsing error: Cannot read property 'name' of undefined

This error first appeared on our CI, could be replicated by manually building on the server, and I could finally reproduce on my own computer (which was running perfectly) after updating all packages. Now, even if I pull the old (building) commit of my project, I can't build it. I've got yarn.lock commited to my repo, but even with the old package.json and yarn.lock (I delete node_modules and do yarn), I can't build.

This error literally started out of blue today.

What could be the reason?

My (possibly relevant) versions:

yarn 1.22.4,
node v13.11.0,
typescript 3.7.5
react 16.12
react-scripts 3.4.0
macOS 10.15 Catalina

I have the same issue, have you found what causes the error? — Kenjoe, Mar 18 '20 at 06:06
@Kenjoe the problem went away by itself now. Probably some misconfiguration of peer dependencies of dependencies. — Can Poyrazoğlu, Mar 24 '20 at 08:26

Can Poyrazoğlu · Accepted Answer · 2020-10-21T00:57:15.500

30

The problem apparently was caused by a misconfiguration of some (peer?) dependencies of a dependency, react-scripts with the TypeScript template. It went away. Make sure you update your dependencies, purge node_modules, even purge package-lock.json or yarn.lock, and try a fresh build again now.

edited Oct 21 '20 at 00:57

answered Mar 24 '20 at 08:29

Can Poyrazoğlu

33,241
48
191
389

2

Weird, upgraded to `3.8.X` to no avail, purged `node_modules` installed again and good to go – devonj Apr 22 '20 at 20:27
1

Updating TS to 3.8.x fixed my eslint issues, but I kept failing the build until I purged node_modules and my *-lock.json files. I also closed and reopened my IDE just to be sure, and now things are working. – George Apr 28 '20 at 14:31
4

In August 2020, I fixed this by rolling back Typescript to `^3.9.5` after an automatic dependabot upgrade to `^4.0.2`. YMMV – Jeff Aug 30 '20 at 21:39
1

If you are experiencing this issue after upgrading to TS 4.0, it is because create-react-app does not yet support TS 4.0 (or more accurately, it's dependencies don't). https://github.com/facebook/create-react-app/issues/9515 You can fix by downgrading TS, using a pre-release build of CRA 4.0, or force-pinning your ts-eslint an and parser dependencies per https://github.com/facebook/create-react-app/issues/9515 – sam256 Sep 22 '20 at 15:32

score 8 · Answer 2 · answered Apr 27 '20 at 19:46

8

I case of an app generated by

npx create-react-app my-app --template typescript

More precisely, create-react-app@3.4.1

The issue was solved by running the following command:

rm yarn-lock && rm -rf node_modules && npm i

After which you may run:

either yarn start or npm start

answered Apr 27 '20 at 19:46

Mateja Petrovic

3,799
4
25
40

Thanks for the call out for `cretae-react-app`. Following this solved my problem. – George Apr 28 '20 at 14:32
Although, I managed to get the app to compile with `yarn` as well after a couple of attempts at removing `yarn.lock` and running `yarn` – Mateja Petrovic Apr 28 '20 at 18:00
Did it for me! Just removed the `node_modules` and then `yarn`, and that was it. – Quentin D Jul 20 '20 at 15:01

score 4 · Answer 3 · edited Mar 18 '20 at 08:01

4

Just update typescript version to 3.8.x : Link

edited Mar 18 '20 at 08:01

answered Mar 18 '20 at 07:02

Phoebus

57
2

10

Nope, didn't solve mine. Updated to even 3.9 nightly but still the same. – Can Poyrazoğlu Mar 20 '20 at 15:33
On 4.0, still experiencing the same problem. – Anchor Aug 25 '20 at 23:53

score 3 · Answer 4 · answered Jun 11 '20 at 08:29

3

In my case, I just had to add an extra newline at the end of the ts file.

export * from './result';
export * from './request';
//new line here

answered Jun 11 '20 at 08:29

Jayantha Lal Sirisena

21,216
11
71
92

score 2 · Answer 5 · answered Aug 02 '20 at 16:54

In my case, the culprit was asset imports of non-existing files, e.g.:

import { ReactComponent as SomeIcon } from '../assets/img/some-icon.svg';

The answers above helped me find the culprit. I ran rm -rf node_modules package-lock.json && npm i && npm start, which caused the real errors to be shown (instead of the unhelpful cryptic "Line 0: Parsing error: Cannot read property 'name' of undefined")

Once I added the missing files, the errors went away.

score 2 · Answer 6 · answered Oct 31 '20 at 21:29

This error occurs because your typescript is not compatible with your typescript-eslint plugins.

You can fix it by upgrading these two dependencies to the latest version.

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^4.6.0",
  "@typescript-eslint/parser": "^4.6.0",
}

score 2 · Answer 7 · answered Jan 15 '21 at 23:22

2

Updating react-scripts worked for me. react-scripts 3.4.0 probably does not support typescript 3.7.5

answered Jan 15 '21 at 23:22

kshksdrt

566
4
9

score 0 · Answer 8 · answered Dec 16 '20 at 01:19

0

In my case, this was because I had TS code under .\src which was referencing TS code under .\tools but I only had src in the include in my tsconfig.json, adding tools fixed the issue

answered Dec 16 '20 at 01:19

UnionP

1,251
13
26

React Typescript: Line 0: Parsing error: Cannot read property 'name' of undefined

8 Answers8

Linked