While working on a Chrome plugin in VS Code using TypeScript, I encountered an issue with the size of my primary .ts file. To address this, I decided to refactor some code into a separate module called common.ts.
In common.ts, I moved over certain constants and functions like so:
export function doSomething(foo : string): string { ... }
To access these exports from my main .ts file, I used qualified references, for example:
let result = common.doSomething("foo");
Despite being able to import the code successfully with:
import common = require("./common");
Upon launching my extension, however, I encountered the following error:
Uncaught ReferenceError: define is not defined at popup.ts:2
This error seemed to be related to this portion of the generated JavaScript:
define(["require", "exports", "./common"], function (require, exports, common) {
In my tsconfig.json, my settings are currently as follows:
{
"compilerOptions": {
"target": "es6",
"module": "amd",
"sourceMap": true
}
}
I even attempted switching to the "commonjs" module, but encountered a similar issue with "exports" not being defined:
Object.defineProperty(exports, "__esModule", { value: true });
Venturing into the "system" module resulted in the same problem, where "System" was not recognized:
System.register(["./common"], function (exports_1, context_1) {
Exploring the "es2015" module led me to import using
import * as common from "./common";Uncaught SyntaxError: Unexpected token *
I also experimented with changing the target in tsconfig.json and using different patterns for importing like
import { doSomething } from "./common"What steps should I take to properly configure tsconfig.json, structure the module (note that I do not use the module or namespace keywords in common.ts), and correctly import the module so I can streamline my code and utilize it in a browser?