Can't find variable Symbol using React Native with TypeScript

Question

I'm using the ES6 Symbol in my React Native project. This works fine for iOS, but on Android I get Can't find variable: Symbol.

I'm using TypeScript, and I've tried various tsconfig.json:

{
  "compilerOptions": {
    "target": "es2015",
    "jsx": "react",
    "lib": ["dom", "es7"],
    "moduleResolution": "node"
  },
}

I've also tried lib: ["dom", "es6"] and ["dom", "es6", "es7"] as well as target: "es5".

How can I get Symbol to be properly handled by TypeScript for React Native on Android?

I think your error is not related to Typescript or transpiling, it's more a native android java issue. — Dyo
– Dyo, Commented Feb 22, 2018 at 16:06
I think there should be a way to get TypeScript to transpile Symbol based on the target — Explosion Pills
– Explosion Pills, Commented Feb 22, 2018 at 16:07

Hunaid Hassan · Accepted Answer · 2018-02-22 16:43:52Z

3

You can use import 'core-js/es6/symbol' without having to add an npm dependency or copy pasting an polyfill

EDIT: I doubt that it is a TS problem. Android JS runtime doesn't have Symbol support. I had this problem in plain JSX too and fixed it using the snippet pasted above.

edited Feb 22, 2018 at 16:43

answered Feb 22, 2018 at 16:41

Hunaid Hassan

7425 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hunaid Hassan Over a year ago

Yes. But it comes with ReactNative or as its dependency maybe. Didn't have to add another dependency myself.

Aluan Haddad Over a year ago

Ah I see. I was going for a general solution. Anyway, your remarks are correct about it not being TS related.

Aluan Haddad · Accepted Answer · 2018-02-22 16:47:24Z

This a TypeScript issue at all.

You are missing a polyfill.

As a transpiler, TypeScript transforms syntactic constructs so as to represent their behavior but it does not provide runtime libraries.

Install an es6-symbol polyfill like this one with your package manager of choice and everything will be well.

Symbol is a library, and outside the scope of transpilation in general, at least from the TypeScript team's perspective.

Part of the motivation for this is that you can choose your own polyfill implementations, giving you flexibility. Another that comes to mind is that a transpiler is often invoked well before it would have sufficient information to know if it could exclude a polyfill.

Note: Your --target is set to es2015 but you are experiencing difficulties on some platforms due to libraries that were specified in es2015 not being provided by the runtime. I strongly advise that you lower use --target es5 for the time being.

One more thing I suggest is being consistent in your config terminology.

"target": "es2015",
"lib": ["dom", "es7"],

is confusing and should be changed to

"target": "es2015",
"lib": ["dom", "es2016"],

for the sake of the reader

Gregory R. · Accepted Answer · 2019-06-13 07:37:41Z

0

You can import these in your root index.js file without installing any dependencies:

import "core-js/stable";
import "regenerator-runtime/runtime";

answered Jun 13, 2019 at 7:37

Gregory R.

1,9751 gold badge22 silver badges34 bronze badges

Collectives™ on Stack Overflow

Can't find variable Symbol using React Native with TypeScript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related