Search code examples
javascripttypescriptsystemjs

How to solve 'Unhandled Promise Rejection: Error: Unable to resolve bare specifier "app.js" from http://localhost:3000/'

I have been studying typescript. I am encountering the below error while studying node modules.

enter image description here

Clicking on the anonymous function take me to the below code.

enter image description here

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="author" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Learning TypeScript</title>
    <script src="node_modules/systemjs/dist/system.js"></script>
</head>

<body>
    <script>
        System.import('app.js')
    </script>
</body>

</html>

Here is the link to my demo project

Solution

  • If you are using newest version of SystemJS. You have to make some change:

    • index.html: use System.import('./app.js') instead of System.import('app.js') // hmm

    • tsconfig.json: use "module": "system" instead of "module": "commonjs".

    • app.ts: use import { PI, calculateCircumference } from "./maths/circle.js"; instead of import { PI, calculateCircumference } from "./maths/circle"; // hmm

    (I can not find a way to config baseUrl or defaultExtension)

    Run tsc command to rebuild app.js file before you reload html page on browser.