I have a small TypeScript helloworld application that uses the aurelia.io framework from a bundle file and configured using SystemJS. When I run my app, the compiled typescript version of my helloworld.ts
throws an error which reads:
TypeError: define is not a function at System.register.execute
(http://localhost:9000/src/helloworld.js!eval:31:13) at t ...
Seems to me like the function define
is in declared by SystemJS, so perhaps this is a configuration issue. The framework seems to load fine, but I find it quite odd that the systemjs function is not recognized.
Here is my project hierarchy and my configuration files. What am I doing wrong?
My folder structure looks like this:
./jspm_packages/...
./scripts/aurelia/aulrelia-bundle.js
./src/main.ts
./src/main.js (compiled ts)
./src/app.ts
./src/app.js (compiled ts)
./src/helloworld.ts
./src/helloworld.js (compiled ts)
./index.html
./config.js
I have installed jspm, and followed the prompts to create a default config.js files. The only option I changed from default was to use babel as the transpiler.
My config.js looks like this:
System.config({
"baseURL": "/",
"transpiler": "babel",
"babelOptions": {
"optional": [
"runtime"
]
},
"paths": {
"*": "*.js",
"github:*": "jspm_packages/github/*.js",
"npm:*": "jspm_packages/npm/*.js"
}
});
System.config({
"map": {
"babel": "npm:[email protected]",
"babel-runtime": "npm:[email protected]",
"core-js": "npm:[email protected]",
"github:jspm/[email protected]": {
"process": "npm:[email protected]"
},
"npm:[email protected]": {
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"fs": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]",
"systemjs-json": "github:systemjs/[email protected]"
}
}
});
My index.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="styles/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles/fontawesome/css/font-awesome.min.css">
<link href="styles/styles.css" rel="stylesheet" />
</head>
<body aurelia-app>
<div class="splash">
<div class="message">Welcome...</div>
</div>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.config({
"paths": {
"*": "*.js"
}
});
//Project uses bundles
System.bundles["scripts/aurelia/aurelia-bundle"]=["aurelia-bootstrapper"];
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
My helloword.ts
looks like this:
import {bindable} from 'aurelia-framework';
export class HelloWorld{
@bindable hello="Hello!";
}
The full error:
TypeError: define is not a function at System.register.execute
(http://localhost:9000/src/helloworld.js!eval:31:13) at t
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:19798) at v
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:20180) at u
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:19856) at s
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:19737) at
http://localhost:9000/jspm_packages/es6-module-loader.js:7:22064 at O
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:7439)
at K
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:7071) at y.7.y.when
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:10745) at v.7.v.run
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:9781) at a.3.a._drain
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:1740)
at 3.a.drain
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:1394) at MutationObserver.b
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:3302)(anonymous function) @ aurelia-bundle.js:16334run @ aurelia-bundle.js:1602(anonymous
function) @ aurelia-bundle.js:1613module.exports @ aurelia-bundle.js:2906queue.(anonymous function) @ aurelia-bundle.js:3416run @ aurelia-bundle.js:3404listner @ aurelia-bundle.js:3408
You should let
jspm
create theconfig.js
file automatically and don't modify it manually. You can then use aurelia-cli to automatically create your bundle based on what packages you've downloaded viajspm
with something like:aureliafile.js
This will automatically modify
config.js
to include the files needed for the bundle and where to find them at runtime when you runaurelia bundle ---force
(the force is to overwrite previous bundle). After that, yourindex.html
will look something like:Index.html