I'm starting a new project in which I'd like to have ES6 style modules, however, I can't get it to run in a browser. I'm using Chrome.

I isolated the issue into very few lines of code.

Here are my 2 TypeScript files:

app.ts

import { Component } from './ponent';

var ponent: Component = new Component();

ponent.ts

export class Component {

}

Here's how they pile to JavaScript:

app.js

import { Component } from './ponent';
var ponent = new Component();

ponent.js

export class Component {
}

My index.html only contains a script tag. I tried a few variations, but none of them worked.

index.html #1

<script src="src/app.js" type="module"></script>

The script is not loaded. (No request in network tab)

index.html #2

<script src="src/app.js" type=module></script>

The script is not loaded. (No request in network tab)

index.html #3

<script src="src/app.js"></script>

Uncaught SyntaxError: Unexpected token {

I'm using tsc to transpile TypeScript via Visual Studio Code.

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "presentation": {
                "reveal": "silent"
            }
        }
    ]
}

tsconfig.json

{
  "pilerOptions": {
    "target": "es6",
    "sourceMap": false,
    "removeComments": false,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "preserveConstEnums": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "../src/"
  },
  "exclude": [
    "logs",
    "node_modules"
  ]
}

I'm starting a new project in which I'd like to have ES6 style modules, however, I can't get it to run in a browser. I'm using Chrome.

I isolated the issue into very few lines of code.

Here are my 2 TypeScript files:

app.ts

import { Component } from './ponent';

var ponent: Component = new Component();

ponent.ts

export class Component {

}

Here's how they pile to JavaScript:

app.js

import { Component } from './ponent';
var ponent = new Component();

ponent.js

export class Component {
}

My index.html only contains a script tag. I tried a few variations, but none of them worked.

index.html #1

<script src="src/app.js" type="module"></script>

The script is not loaded. (No request in network tab)

index.html #2

<script src="src/app.js" type=module></script>

The script is not loaded. (No request in network tab)

index.html #3

<script src="src/app.js"></script>

Uncaught SyntaxError: Unexpected token {

I'm using tsc to transpile TypeScript via Visual Studio Code.

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "presentation": {
                "reveal": "silent"
            }
        }
    ]
}

tsconfig.json

{
  "pilerOptions": {
    "target": "es6",
    "sourceMap": false,
    "removeComments": false,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "preserveConstEnums": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "../src/"
  },
  "exclude": [
    "logs",
    "node_modules"
  ]
}

• javascript
• ecmascript-6
• es6-modules
• es6-module-loader

• It's simple: they don't – Victor Commented Oct 27, 2018 at 16:03
• 1 Are you sure? If so, what am I misunderstanding in here? contentful./blog/2017/04/04/… – Royi Bernthal Commented Oct 27, 2018 at 16:10
• 1 Yes you can use modules directly in the latest browsers, without a bundler! You should transpile ts to js files without defining any specific module system. Then you can load modules in the browser with <script type=‘module’ src=‘thing.js’> – Kokodoko Commented Oct 27, 2018 at 16:19
• Ok I'm doing it now and the js looks cleaner, but the script still isn't loaded. I added more info at the bottom of the original question. – Royi Bernthal Commented Oct 27, 2018 at 16:28
• have you tried writing a minimum constructor? TS classes – Luca Borrione Commented Oct 27, 2018 at 18:03

1 Answer 1

To be honest - I think this is a good question because JS is widely use in both server-side and client-side application, which contributes to the already existing confusion among developers

It's clear that your TS code is written as server-side code (probably on Node.js). Trying to run it (as is) on client-side is... well.. tricky. The reason: The syntax you are using in your code suppose to run on server-side (not on client-side). Is there a workaround? Well... yes!

The good news:

JS ES6 does have a native module loader! (check MDN)

The bad ones:

• Syntax is different from Node.js module loader syntax (when exporting a module)
• Support is very partial (modern browsers only)

Some additional notes:

• The mon syntax of modules loading is associated with a third-party library called require js (https://requirejs/). You can use this library in client side projects but you have to install it and configure it properly (the docs are pretty clear about how to do that)
• You can always use a task runner like grunt (https://gruntjs./) or similar projects to assist you to minify and unify all your code to a single file in production. Why you ask? It will clearly help you ease the load when a client fetch you website (less files are better in terms of network traffic)

As you see, there is no quick or simple answer to your question.. but it may be a good starting point to improve your knowledge and building better modern web apps.

UPDATE

As requested, I created a little sandbox demo that shows how to use ES6 native module (https://codesandbox.io/s/oj2rwm9v35)

index.html

<html>
<body>
    <div id="app"></div>
    <script type="module" src="src/primary.js"></script>
</body>
</html>

primary.js

import test from "./test";

test();

test.js

export default function test() {
  document.querySelector("#app").textContent = "Hello JS module!";
}