Typescript ReferenceError exports is not defined

Question

Trying to implement a module following the official handbook  I get this error message      Uncaught ReferenceError  exports is not defined      at app js 2   But nowhere in my code do I ever use the name exports   How can I fix this     Files  app ts  let a   2  let b number   3   import Person   require     mods module-1      module-1 t   export class Person     constructor        console log  Person Class          export default Person    tsconfig json        compilerOptions              module    commonjs            target    es5            noImplicitAny   false           sourceMap   true           outDir    scripts               exclude              node modules

User · Answer

If you are just using interfaces for types, leave out the export keyword and ts can pick up on the types without needing to import. They key is you cannot use import/export anywhere.

export interface Person {
   name: string;
   age: number;
}

into

interface Person {
   name: string;
   age: number;
}

User · Answer

Note  This might not be applicable for OP s answer  but I was getting this error  and this how I solved it    So the problem that I was facing was that I was getting this error when I retrieved a  js  library from a particular CDN    The only wrong thing that I was doing was importing from the CDN s cjs directory like so  https   cdn jsdelivr net npm  popperjs core 2 4 0 dist cjs popper min js  Notice the dist cjs part  That s where the problem was    I went back to the CDN  jsdelivr  in my case and navigated to find  the umd folder  And I could find another set of popper min js which was the correct file to import  https   cdn jsdelivr net npm  popperjs core 2 4 0 dist umd popper min js

User · Answer

my solution is a sum up of everything above with little tricks I added  basically I added this to my html code   lt script gt var exports       esModule   true   lt  script gt   lt script src  js file js  gt  lt  script gt    this even allows you to use import instead of require if you re using electron or something  and it works fine with typescript 3 5 1  target  es3 -  esnext

User · Answer

Simply add libraryTarget   umd   like so  const webpackConfig       output        libraryTarget   umd     Fix   Uncaught ReferenceError  exports is not defined           module exports   webpackConfig     Export all custom Webpack configs

User · Answer

I had the same problem and solved it adding  es5  library to tsconfig json like this          compilerOptions              target    es5     defines what sort of code ts generates  es5 because it s what most browsers currently UNDERSTANDS           module    commonjs            moduleResolution    node            sourceMap   true           emitDecoratorMetadata   true    for angular to be able to use metadata we specify in our components           experimentalDecorators   true    angular needs decorators like  Component   Injectable  etc           removeComments   false           noImplicitAny   false           lib                  es2016                dom                es5

User · Answer

compileOnSave   false       compilerOptions            baseUrl                outDir      dist          sourceMap   true         declaration   false         module    esnext          moduleResolution    node          emitDecoratorMetadata   true         experimentalDecorators   true         target    es5          typeRoots     node modules  types           lib     es2018    dom

User · Answer

I had the same issue  but my setup required a different solution  I m using the create-react-app-rewired package with a config-overrides js file  Previously  I was using the addBabelPresets import  in the override   method  from customize-cra and decided to abstract those presets to a separate file  Coincidentally  this solved my problem  I added useBabelRc   to the override   method in config-overrides js and created a babel config js file with the following  module exports         presets              babel preset-react             babel preset-env

User · Answer

for me  removing  esModuleInterop   true from tsconfig json did the trick

User · Answer

For people still having this issue  if your compiler target is set to ES6 you need to tell babel to skip module transformation  To do so add this to your  babelrc file       presets       env     modules   false

User · Answer

Try what  iFreilicht suggested above  If that didn t work after you ve installed webpack and all  you may have just copied a webpack configuration from somewhere online and configured there that you want the output to support CommonJS by mistake  Make sure this isn t the case in webpack config js   module exports       mode  process env NODE ENV     development     entry         index     src js index ts                     output        libraryTarget   commonjs            lt      DELETE THIS LINE     path  path join   dirname   build        filename    name  bundle js

User · Answer

EDIT  This answer might not work depending if you re not targeting es5 anymore  I ll try to make the answer more complete  Original Answer If CommonJS isn t installed  which defines exports   you have to remove this line from your tsconfig json    quot module quot    quot commonjs quot    As per the comments  this alone may not work with later versions of tsc  If that is the case  you can install a module loader like CommonJS  SystemJS or RequireJS and then specify that  Note  Look at your main js file that tsc generated  You will find this at the very top  Object defineProperty exports   quot   esModule quot     value  true      It is the root of the error message  and after removing  quot module quot    quot commonjs quot    it will vanish

User · Answer

npm install  babel plugin-transform-modules-commonjs   and add to to  babelrc plugins resolved my question

User · Answer

I solved the issue by removing  type    module  field from package json

User · Answer

To solve this issue  put these two lines in your index html page   lt script gt var exports     quot   esModule quot   true   lt  script gt   lt script type  quot text javascript quot  src  quot  main js quot  gt   Make sure to check your main js file path

User · Answer

This is fixed by setting the module compiler option to es6        compilerOptions               module    es6        target    es5

User · Answer

For some ASP NET projects import and export may not be used at all in your Typescripts   The question s error showed up when I attempted to do so and I only discovered later that I just needed to add the generated JS script to the View like so    lt script src    scripts js  GENERATED FILE  Index js  asp-append-version  true  gt  lt  script gt

User · Answer

Few other Solutions for this issue   Add the following line before other references to Javascript   This is a nice little hack        lt script gt var exports       lt  script gt     This issue occurs with the latest version of TypeScript  this error can be eliminated by referring to typescript version  2 1 6

User · Answer

I had this same error too  In my case it was because we had an old-fashioned import statement in our TypeScript AngularJS project like this   import   IAttributes  IScope   from  angular     which was compiled to JavaScript like this    use strict   Object defineProperty exports     esModule     value  true       This was needed back in the old days because we then used IAttributes in the code and TypeScript wouldn t have known what to do with it otherwise  But after removing the import statement  and converting IAttributes to ng IAttributes those two JavaScript lines disappeared - and so did the error message

User · Answer

Had the same issue and fixed it by changing the JS packages loading order   Check the order in which the packages you need are being called and load them in an appropriate order   In my specific case  not using module bundler  I needed to load Redux  then Redux Thunk  then React Redux  Loading React Redux before Redux Thunk would give me exports is not defined

[typescript] Typescript ReferenceError: exports is not defined

Examples related to typescript

Examples related to module