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?
let a = 2;
let b:number = 3;
import Person = require ('./mods/module-1');
export class Person {
constructor(){
console.log('Person Class');
}
}
export default Person;
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": true,
"outDir": "scripts/"
},
"exclude": [
"node_modules"
]
}
This question is related to
typescript
module
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', <==== DELETE THIS LINE
path: path.join(__dirname, 'build'),
filename: "[name].bundle.js"
}
};
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} ]]
}
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"
]
}
}
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;
}
{
"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"]
}
}
Few other Solutions for this issue
<script>var exports = {};</script>
my solution is a sum up of everything above with little tricks I added, basically I added this to my html code
<script>var exports = {"__esModule": true};</script>
<script src="js/file.js"></script>
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.
This is fixed by setting the module
compiler option to es6
:
{
"compilerOptions": {
"module": "es6",
"target": "es5",
}
}
I solved the issue by removing "type": "module"
field from package.json
.
npm install @babel/plugin-transform-modules-commonjs
and add to to .babelrc plugins resolved my question.
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/[email protected]/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/[email protected]/dist/umd/popper.min.js
.
To solve this issue, put these two lines in your index.html page.
<script>var exports = {"__esModule": true};</script>
<script type="text/javascript" src="/main.js">
Make sure to check your main.js file path.
for me, removing "esModuleInterop": true
from tsconfig.json did the trick.
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.
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:
<script src="~/scripts/js/[GENERATED_FILE].Index.js" asp-append-version="true"></script>
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
.
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.
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'
],
}
Source: Stackoverflow.com