64

I'm trying to get started with Typescript for Electron development. After wrestling with getting typing for node and jQuery, I finally got my .ts file error free.

The problem is now that when I run my app, I get this error:

index.js:2 Uncaught ReferenceError: exports is not defined

These are the first two lines in index.js:

"use strict"; Object.defineProperty(exports, "__esModule", { value: true });

I don't know that that line does. Typescript added it when compiling. My app works fine if I remove it.

How do I get rid of this error?

Oh and here's my tsconfig, if that's relevant.

{ "compilerOptions": { "target": "es6", "module": "commonjs", "moduleResolution": "node", "isolatedModules": false, "jsx": "react", "experimentalDecorators": true, "emitDecoratorMetadata": true, "declaration": false, "noImplicitAny": false, "noImplicitUseStrict": false, "removeComments": true, "noLib": false, "preserveConstEnums": true, "suppressImplicitAnyIndexErrors": true }, "exclude": [ "node_modules", "typings/browser", "typings/browser.d.ts" ], "compileOnSave": true, "buildOnSave": false, "atom": { "rewriteTsconfig": false } }
Improve this question
1

12 Answers 12

Reset to default
109

I solved it with a hack in the embedding HTML:

<script> var exports = {}; </script> <script src="index.js"></script>

Basically giving it what it wants, a global exports variable.

With that my TypeScript (2.3.2) generated file (es6) loads.

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

3 Comments

With this i need to remove : <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-xpAHF/b9vvpXnZU4WcZi0f2tOSSjFy6maGgTvDJZojU='), or a nonce ('nonce-...') is required to enable inline execution.
This is not a great solution for security-aware sites, because you do have to reduce your CSP security specification as several have noted. or mess around with nonces @leonheess you could try adding the nonce to the inline script tag and provide the nonce in your CSP directive.
41

I was also facing the same issue and tried changing to different versions of the typescript but did not work.

Finally, I got it - There was a "type": "module" in package.json

, and when I removed it - it worked

Improve this answer

4 Comments

F&^%$#g lengend! This is the only solution that worked for me across about half a dozen GIthub issues and SO threads. And so concise and to the point. Epic.
Where was this spurious "type": "module"? tsconfig.json?
I had type: module in my package.json that was tripping this up. Removing it got it working 👍 (node >16)
This answer needs more upvotes. Even if its not the answer to the question, it is the solution to the question that brings many people to this stackoverflow page.
14

There is an issue with the new version of typescript 2.2.1, try using the older version 2.1.6, that solved the exact same issue which you have for me.

Version 2.2.1 on compiling adds this line Object.defineProperty(exports, "__esModule", { value: true }); while the older 2.1.6 does not.

Improve this answer

8 Comments

This worked! For anyone using Atom and the Typescript package like me; download typescript 2.1.6 via npm (packagename@version). Then go into the source of the package and replace the typescript folder in node_modules with the one you just downloaded.
But why the line leads to the erroneous behaviour?
I'm getting this problem in TypeScript 3.4.5. Is the fix still to downgrade to version 2.1.6?
I'm not even using typescript and I have this issue, should I install typescript 2.1.6 anyways ?
At this time for sure use the latest TypeScript. I would look for a different solution than using a really old TypeScript version.
|
11

I've fixed mine with the following:

tsconfig.json

{ "compilerOptions": { "target": "ESNext", "module": "CommonJS", "lib": [ "DOM", "ES5" ], "esModuleInterop": true } }

Adding the esModuleInterop

Removing the "type": "module" from the package.json

Improve this answer

Comments

8

I had the same issue with a js file generated by the Typescript compiler. Same line :

Object.defineProperty(exports, "__esModule", { value: true });

And same error :

game.js:2 Uncaught ReferenceError: exports is not defined

I was defining a Game class in this file. I solved the issue by adding this at the end of my game.ts file:

export = Game;

With this, the Typescript compiler replaced:

Object.defineProperty(exports, "__esModule", { value: true });

with:

module.exports = Game;

No more error for me after this.

Improve this answer

Comments

3

Change your tsconfig.json module to es2015 and moduleResolution to node.

{ "compilerOptions": { "target": "es5", "module": "es2015", "moduleResolution": "node" } }

Taken from this answer

The exports.__esModule and require('lib') are what happen when we transpile from an ES module to commonjs (with babel or with TypeScript).

Improve this answer

Comments

2

Solution

tsconfig.json

"module": "ESNext", "target": "ESNext",

index.html

<script type="module" src="script.js"></script>
Improve this answer

Comments

1

If your code doesn't require export and it doesn't crash application:

You can try to add a global variable to your code:

window.exports = {};
Improve this answer

Comments

0

I was having the same issue, I just modified the systemjs.config.js file as mentioned below

'npm:': '/node_modules/' -- // Its value was just 'node_modules/' and I added '/' in the beginning

'app': '/src/app' -- // Its value was just 'app' and as my app folder path was different so is changed it accordingly

loader: '/src/systemjs-angular-loader.js' -- // Its value was just 'systemjs-angular-loader.js' and as its location was different in my project so pointed it to the correct path

Improve this answer

Comments

0

This might not work for everyone, but my mistake in the ES module was to refer the import with a .ts

We know in ES module, we are supposed to import local modules with:

import { Car } from "../models/car.js";

For TypeScript, I decided to use:

import { Car } from "../models/car.ts";

This made my code break.

Hence, make sure the import is:

import { Car } from "../models/car";

If it does not work, check your package.json, and make sure that it does not have

"type": "module"

in the surface level. Delete the "type": "module" in your package.json

Then, in my tsconfig.json, make sure you have your targets and modules set to this:

"target" : "es6" "module" : "CommonJS"

TLDR: The sole problem was my import, but if it doesn't work make sure to check your package.json to have no type of module and your tsconfig.json to have their target and module to be set to es6 and CommonJS respectively.

As if anyone has extra explanations to why the import should be like that feel free to add.

Improve this answer

1 Comment

"As if anyone has extra explanations to why the import should be like that feel free to add."—Node.js requires extensions on ESM import specifiers, and by default TypeScript doesn't touch your import specifiers during compilation, so you need to use the output path (with .js) in your source code. TypeScript knows how to map this back to the corresponding .ts file for typing purposes.
0

Took me almost one hour to solve this: In my typescript file I acidently had this import line on top: import { request } from "express";

I didn't use it, it was the only import. After removing the line, the error was gone. Extra information, my package.json doesn't have 'type' line: "type": "module"

Improve this answer

Comments

-6

QuickFix

Change "target": "es6" to "target": "es5" in your tsconfig.json.

Improve this answer

1 Comment

It works it you change the value of "module" to e.g. "es5"

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.