By default, webpack only resolves .js files. In order for it to correctly resolve .ts files, you also need to add the following to your webpack.config.js:

1

2

3

resolve:{

extensions:['.ts','.js']

}

Outdated webpack version

The following error can happen:

1

2

3

Error:It looks like you're using an old webpack version without hooks support.

If you're using awesome-script-loader with React storybooks

consider upgrading@storybook/react toat least version4.0.0-alpha.3

This one is a bit misleading as I wasn’t using any React or jsx files, but it’s easy to fix. As suggested, updating webpack to version 4.x fixed the problem (I was using webpack 2.3.3).

TypeScript libs

You may have this error:

1

2

ERROR in[at-loader]./js/athenajs/@types/athenajs/index.d.ts:6:40

TS2304:Cannot find name'HTMLElement'.

TypeScript can compile code that will run in a variety of environments: from Node.js, to the browser. By default, TypeScript doesn’t have any DOM-related global names.

In order to do that you have to tell him which lib you want to use using the “lib” configuration entry in your tsconfig.json:

1

2

3

"lib":[

"dom"

]

TypeScript will then load the types description file found here which will make it understand every dom-related global names and that’s one less error!

1

2

ERROR in[at-loader]./js/scenes/scene2.ts:71:27

TS2304:Cannot find name'Math'.

Again, it’s standard ES5 JavaScript that’s not by default included by TypeScript. In order to have TypeScript recognize these ES5 global names you have to tell it to include the “es5″ lib in your tsconfig.json file: