Uncaught ReferenceError: exports is not defined when importing function - TypeScript

Question

I'm learning TypeScript. I imported the output function from console.ts:

export function output(value: any): void {
  console.log(value);
}

Which compiles to console.js:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var console_1 = require("./console");
console_1.output('Hello');
//# sourceMappingURL=functional.js.map

Importing and usage in destination file:

import {output} from "./console";
output('Hello');

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

I got no compiling error, but not understanding why I got the following error in the browser:

Uncaught ReferenceError: exports is not defined at functional.js:2

Answer 1

I had a similar issue in a Vue.js / TypeScript project. Vue.js project used Webpack under the hood and I've run npm link during an external module development.

Eventually, I've discovered the issue was caused by Webpack trying to follow the symbolic link to the dependency I've linked with npm link command.

The solution was to instruct Webpack to stop following symbolic links.

Relevant Webpack documentation section: resolve.symlinks.

Relevant Vue.js troubleshooting section: Vue.js and npm link.

Answer 2

I had the exact same issue. Telling webpack to stop following the symlink helped, here is the snippet in vue.config.js

chainWebpack: config => {
  config.resolve.symlinks(false);
},