Understanding esModuleInterop in tsconfig file

Question

I was checking out someone  tsconfig file and there I spotted --esModuleInterop This is his  tsconfig file      quot compilerOptions quot          quot moduleResolution quot    quot node quot        quot target quot    quot es6 quot        quot module quot    quot commonjs quot        quot lib quot     quot esnext quot         quot strict quot   true       quot sourceMap quot   true       quot declaration quot   true       quot esModuleInterop quot   true       quot allowSyntheticDefaultImports quot   true       quot experimentalDecorators quot   true       quot emitDecoratorMetadata quot   true       quot declarationDir quot    quot   dist quot        quot outDir quot    quot   dist quot        quot typeRoots quot     quot node modules  types quot           quot include quot     quot src      ts quot       quot exclude quot     quot node modues quot      Here  My primary question is what is     quot esModuleInterop quot   true  and  quot allowSyntheticDefaultImports quot   true   I know they are sort of dependent on the   quot module quot    quot commonjs quot     Can someone try to explain it in the best human language possible  The official docs for allowSyntheticDefaultImports states  Allow default imports from modules with no default export  This does not affect code emit  just typechecking   What does that mean  If there isn t any export default then I think the only use case of the import default would be to initialize something  Like a singleton  The following question answer does not make sense as well Is there a way to use --esModuleInterop in tsconfig as opposed to it being a flag  And --esModuleInterop definition on the compiler page  Emit   importStar and   importDefault helpers for runtime babel ecosystem compatibility and enable --allowSyntheticDefaultImports for typesystem compatibility   Also seemed difficult for me to understand comprehend

User · Answer

in your tsconfig you have to add   quot esModuleInterop quot   true - it should help

User · Answer

esModuleInterop generates the helpers outlined in the docs  Looking at the generated code  we can see exactly what these do     ts  import React from  react    js  var   importDefault    this  amp  amp  this   importDefault     function  mod        return  mod  amp  amp  mod   esModule    mod      default   mod       Object defineProperty exports     esModule     value  true     var react 1     importDefault require  react         importDefault  If the module is not an es module then what is returned by require becomes the default  This means that if you use default import on a commonjs module  the whole module is actually the default     importStar is best described in this PR       TypeScript treats a namespace import  i e  import   as foo from  foo   as equivalent to const foo   require  foo    Things are simple here  but they don t work out if the primary object being imported is a primitive or a value with call construct signatures    ECMAScript basically says a namespace record is a plain object       Babel first requires in the module  and checks for a property named   esModule  If   esModule is set to true  then the behavior is the same as that of TypeScript  but otherwise  it synthesizes a namespace record where          All properties are plucked off of the require d module and made available as named imports    The originally require d module is made available as a default import       So we get this       ts import   as React from  react      emitted js var   importStar    this  amp  amp  this   importStar     function  mod        if  mod  amp  amp  mod   esModule  return mod      var result           if  mod    null  for  var k in mod  if  Object hasOwnProperty call mod  k   result k    mod k       result  default     mod      return result     Object defineProperty exports     esModule     value  true     var React     importStar require  react       allowSyntheticDefaultImports is the companion to all of this  setting this to false will not change the emitted helpers  both of them will still look the same   But it will raise a typescript error if you are using default import for a commonjs module  So this import React from  react  will raise the error Module       node modules  types react index   has no default export  if allowSyntheticDefaultImports is false

User · Answer

Problem statement Problem occurs when we want to import CommonJS module into ES6 module codebase  Before these flags we had to import CommonJS modules with star    as something  import     node modules moment index js exports   moment     index ts file in our app import   as moment from  moment  moment       not compliant with es6 module spec     transpiled js  simplified   const moment   require  quot moment quot    moment     We can see that   was somehow equivalent to exports variable  It worked fine  but it wasn t compliant with es6 modules spec  In spec  the namespace record in star import  moment in our case  can be only a plain object  not callable  moment   is not allowed   Solution With flag esModuleInterop we can import CommonJS modules in compliance with es6 modules spec  Now our import code looks like this     index ts file in our app import moment from  moment  moment       compliant with es6 module spec     transpiled js with esModuleInterop  simplified   const moment     importDefault require  moment     moment default     It works and it s perfectly valid with es6 modules spec  because moment is not namespace from star import  it s default import  But how does it work  As you can see  because we did a default import  we called the default property on a moment object  But we didn t declare a default property on the exports object in the moment library  The key is the   importDefault function  It assigns module  exports  to the default property for CommonJS modules  var   importDefault    this  amp  amp  this   importDefault     function  mod        return  mod  amp  amp  mod   esModule    mod      quot default quot   mod        As you can see  we import es6 modules as they are  but CommonJS modules are wrapped into an object with the default key  This makes it possible to import defaults on CommonJS modules    importStar does the similar job - it returns untouched esModules  but translates CommonJS modules into modules with a default property     index ts file in our app import   as moment from  moment      transpiled js with esModuleInterop  simplified   const moment     importStar require  quot moment quot        note that  quot moment quot  is now uncallable - ts will report error   var   importStar    this  amp  amp  this   importStar     function  mod        if  mod  amp  amp  mod   esModule  return mod      var result           if  mod    null  for  var k in mod  if  Object hasOwnProperty call mod  k   result k    mod k       result  quot default quot     mod      return result      Synthetic imports And what about allowSyntheticDefaultImports - what is it for  Now the docs should be clear  Allow default imports from modules with no default export  This does not affect code emit  just typechecking  In moment typings we don t have specified default export  and we shouldn t have  because it s available only with flag esModuleInterop on  So allowSyntheticDefaultImports will not report an error if we want to import default from a third-party module which doesn t have a default export

[typescript] Understanding esModuleInterop in tsconfig file

Examples related to typescript