Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to use --esModuleInterop in tsconfig as opposed to it being a flag?

Tags:

typescript

Typescript v 2.7 released really neat flag called --esModuleInterop https://www.typescriptlang.org/docs/handbook/compiler-options.html, I am trying to figure out if there is a way to use it with tsconfig.json as currently it doesn't seem to be documented : http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Unless it somehow works with module?

Main use case I want to achieve is to be able to import things like this

import React from "react"

as opposed to

import * as React from "react"

And do so from my tsconfig if possible

like image 525
Ilja Avatar asked Feb 14 '18 10:02

Ilja


People also ask

Can only be default imported using the esModuleInterop flag Tsconfig?

The error "Module can only be default-imported using esModuleInterop flag" occurs when we try to import a CommonJS module into an ES6 module. To solve the error, set the esModuleInterop option to true in your tsconfig. json file.

Should you use esModuleInterop?

We highly recommend applying it both to new and existing projects. esModuleInterop is also a recommended option to set in tsconfig. json and when one runs tsc --init it gets set to true automatically.

What is esModuleInterop?

esModuleInterop. Enable TypeScript emitted code to work with code emitted by the Babel ecosystem. This flag is introduced in TypeScript 2.7. Prior to 2.7, when importing commonjs module, you have to do either import x = require('x') or import * as x from 'x' .

What is allowSyntheticDefaultImports?

When set to true, allowSyntheticDefaultImports allows you to write an import like: ts. import React from "react"; instead of: ts.


2 Answers

Yes, do "esModuleInterop": true in your tsconfig.json. For every flag option that can be passed to the CLI, the same can usually be done this way in the config file. Doing tsc --init on the command line generates a tsconfig full of comments explaining all of the available options.


EDIT: I've learned that the behavior of esModuleInterop is dependent on what is set to module.

If you have "module": "commonjs", you only need to enable "esModuleInterop": true.

If you have "module": "es2015" or "module": "esnext", you also have to enable "allowSyntheticDefaultImports": true in order to import CommonJS modules (like React) as a default.

like image 151
kingdaro Avatar answered Sep 28 '22 09:09

kingdaro


I have also faced the same issue,

  • This issue is specific to typescript version
  • Perform below steps to remove it ( It worked for me)
  1. In your project, inside package.json file - verify that you have typescript under the dependencies devDependencies{ "typescript": "^2.5.2" }
  2. check the installed version of the typescript on your system by typing tsc -version command in terminal
  • this will show the installed version of typescript at global level
  • o/p version - 2.9.1
  1. Change version number insider package.json file with the version installed on your system.

devDependencies{ "typescript": "^2.9.1" }

Hope this will work!!!!!!!!!!!!

like image 29
atul parate Avatar answered Sep 28 '22 11:09

atul parate