TypeScript exports is not defined
TypescriptModel View-ControllerTypescript Problem Overview
I'm trying to use export and import but it not working I get an error
Here is my code HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
@RenderBody()
<script src="~/scripts/user.js"></script>
<script src="~/scripts/main.js"></script>
</body>
</html>
User.ts :
export class User {
firstName: string;
lastName: string;
}
main.ts
import { User } from "./user";
Here is also screenshot of exception :
Typescript Solutions
Solution 1 - Typescript
You have a couple of options:
Option 1: Use a module loader like Webpack, Browserify, etc.
Option 2: If you just want to compile *.ts to *.js without any module imports or exports, set compilerOptions.module to "none" in your tsconfig.json. Note that you won't be able to export/import modules when you set compilerOptions.module to "none".
Solution 2 - Typescript
try the following changes
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
@RenderBody()
<!-- <script src="~/scripts/user.js"></script> --> <!-- not longer needed -->
<script src="~/scripts/main.js"></script>
</body>
</html>
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"outFile": "~/scripts/main.js",
"lib": [
"dom",
"es2015",
"es5",
"es6"
]
}
}
with this config your output is only one js file what can be uglified wunderfull, containing all referenced files in the main.ts. i just don't know if ~/ works or if you have to set the path relative to the config file, i'm not working with linux.
User.ts
class User {
firstName: string;
lastName: string;
}
Main.ts:
/// <reference path="User.ts" />
// import { User } from "./user"; // not needed if referenced
console.log(new User());
all reference declarations have to be written at the beginning of the file
Solution 3 - Typescript
TypeScript by default uses node module resolution. Node.js / CommonJS uses exports keyword. However, CommonJS doesn't run in browser without a module loader or module bundler. Hence, you need browserify or webpack to get it running in browser.
Check out this link https://www.typescriptlang.org/docs/handbook/gulp.html
You can also set module setting to none in compiler options section in tsconfig.json:
{ "compilerOptions": { "target": "es5", "module": "none" } }
Solution 4 - Typescript
I now use Parcel to do the ugly stuff of transcoding etc. My easiest config is the following:
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"sourceMap": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"lib": [
"es2015",
"es5",
"es6",
"dom"
],
"noUnusedLocals": true,
"module": "commonjs",
"strict": false
},
"include": [ "lib/*", "./main.ts" ]
}
and in your HTML file, instead of importing the '.js', simply import the '.ts', like this:
<script src="main.ts"></script>
then, run Parcel with this command line:
parcel index.html
the Parcel bundler will create a dist directory containing all your needed files (html and transcoded JavaScript) and it will run a local webserver at:
with hot module reloading (in your browser window).
When you finish your work, you just have to deploy the dist directory ;-)
Solution 5 - Typescript
Similar to TypedSource's answer, but if you can't or don't want to output into one js file you can do the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
@RenderBody()
<script src="~/scripts/user.js"></script>
<script src="~/scripts/main.js"></script>
</body>
</html>
User.ts :
class User {
firstName: string;
lastName: string;
}
main.ts
/// <reference path="User.ts" />
// import { User } from "./user"; // not needed if referenced & User.js file is loaded
console.log(new User());
Solution 6 - Typescript
This was my story:
I had the same problem because the browser uses modern export/import statement, while Typescript uses the default commonJS. So, in the tsconfig.json file, set the following changes:
target: "es2015",
module: "es2015",
I think if you use BabolonJS,it may be better to set "moduleResolution" to "node" explicitly, however it may make no difference.
Solution 7 - Typescript
This worked for me:
my-enum.ts
const MyEnum = {
'test': 456,
'Default': 123
}
Component.ts
import * as MyEnum from 'my-enum';