In a Typescript project that I've recently setup, I've gotten Babel to pile my Typescript code. I'm also using @typescript-eslint as my linter. So far, it has been working well until recently when I tried to use Symbol in my code.

For some reason, Typescript (or Babel) is unable to recognise Symbol and is giving me an error that Symbol is not defined.

Here's how my eslintrc looks:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:remended",
    "plugin:@typescript-eslint/remended",
    "prettier/@typescript-eslint",
    "plugin:prettier/remended"
  ],
  "parserOptions": {
      "ecmaVersion": 2018,
      "sourceType": "module"
  },
  "plugins": [
      "@typescript-eslint/eslint-plugin"
  ]
}

And in my babelrc, I've the following:

{
  "presets": [
    [
      "@babel/preset-env"
    ],
    ["@babel/preset-typescript"]
  ],
  "plugins": [
    "@babel/plugin-transform-modules-monjs",
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2
      }
    ]
  ]
}

Why is this happening and how can I fix this issue?

In a Typescript project that I've recently setup, I've gotten Babel to pile my Typescript code. I'm also using @typescript-eslint as my linter. So far, it has been working well until recently when I tried to use Symbol in my code.

For some reason, Typescript (or Babel) is unable to recognise Symbol and is giving me an error that Symbol is not defined.

Here's how my eslintrc looks:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:remended",
    "plugin:@typescript-eslint/remended",
    "prettier/@typescript-eslint",
    "plugin:prettier/remended"
  ],
  "parserOptions": {
      "ecmaVersion": 2018,
      "sourceType": "module"
  },
  "plugins": [
      "@typescript-eslint/eslint-plugin"
  ]
}

And in my babelrc, I've the following:

{
  "presets": [
    [
      "@babel/preset-env"
    ],
    ["@babel/preset-typescript"]
  ],
  "plugins": [
    "@babel/plugin-transform-modules-monjs",
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2
      }
    ]
  ]
}

Why is this happening and how can I fix this issue?

• javascript
• typescript
• webpack
• babeljs
• eslint

• 1 can you also add your configuration stack, especially eslint and babel. As it is your post lacks a lot – Stefano Mtangoo Commented Sep 22, 2019 at 11:21
• @StefanoMtangoo Sure, I've added more information about my eslint and babel configuration. – Carven Commented Sep 22, 2019 at 11:25
• @StefanoMtangoo Yes, I've a .eslintrc file. I've set it to this "ecmaVersion": 2018 – Carven Commented Sep 22, 2019 at 11:59
• I don't see anything wrong in the config so far. So other ECMA2015 features work except Symbol? – Stefano Mtangoo Commented Sep 22, 2019 at 12:04
• @StefanoMtangoo Yes, so far, I don't have any issues until when I tried to use Symbol. – Carven Commented Sep 22, 2019 at 12:05

1 Answer 1

If you set "ecmaVersion": 2018 under "parserOptions", only ES2018 syntax is supported by ESLint. For ES6 globals like Symbol, you want to specify env (enables ES6 syntax supporting automatically, if above was not specified):

.eslintrc.json:

{ "env": { "es6": true } }

Have a look at their docs:

By the same token, supporting ES6 syntax is not the same as supporting new ES6 globals (e.g., new types such as Set). For ES6 syntax, use { "parserOptions": { "ecmaVersion": 6 } }; for new ES6 global variables, use { "env": { "es6": true } }. { "env": { "es6": true } } enables ES6 syntax automatically, but { "parserOptions": { "ecmaVersion": 6 } } does not enable ES6 globals automatically.