How to fix ''TypeError: System.config is not a function'

Question

I am learning TypeScript and today I installed SystemJS so that I could import some files. First I only imported the main file that needed being run i.e. app.js, in index.html

<script src="node_modules/systemjs/dist/system.js"></script>
<script>
     System.import('app.js');
</script>

But I got this error: https://i.sstatic.net/lz7Hm.png

So I turned my html code into this:

<script src="node_modules/systemjs/dist/system.js"></script>
<script>
    System.config({
        baseURL: '/',
        packages: {
            "/ts": {
                defaultExtension: 'js'
            }
        }
    });
    System.import('app.js');
</script>

Now I am getting this error: https://i.sstatic.net/RS0k7.png

package.json:

{
  "name": "ts",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "jquery": "^3.4.0",
    "systemjs": "^3.1.2",
    "typescript": "^3.4.2"
  },
  "devDependencies": {
    "lite-server": "^2.4.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server"
  },
  "author": "",
  "license": "ISC"
}

app.ts: console.log("Hello")

I am stuck at this point. Any help would be appreciated. Thanks in advance.

Collywobbles

Move the code from the second <script> tag inside the first one. – Universalize

@ritaj The error seems to have vanished. But the console is empty i.e. app.js is not being loaded. – Collywobbles

Im facing the same problem – Ron

@Collywobbles Following Maximilians' course on typescript? – Wisniewski

@neer17 yes. Unfortunately, I couldn't find the solution and had to skip the part – Collywobbles

Doing so prints : GET localhost:7000/node_modules/systemjs/dist/system.js net::ERR_ABORTED 404 (Not Found) in console – Hemialgia

Answer 1

I guess you would have upgraded to the latest system.js by mistake... SystemJS 2.0 does not support System.Config Refer to https://guybedford.com/systemjs-2.0

It is instead done using https://github.com/systemjs/systemjs/blob/2.0.0/docs/package-name-maps.md

If you managed to update the code by now, might as well post the updated sample here for use of everyone.

Tomy

Answer 2

Locate system.js and put System.config() inside it, this would fix the error.

<script src="node_modules/systemjs/dist/system.js">
        System.config({
        baseURL: "/",
        packages: {
          "/": {
            defaultJSExtensions: true
          }
        }
      })
      System.import("app.js")</script>
<script>

Wisniewski

will definitely check this solution out. thanks a lot. – Collywobbles