TypeScript import failed with message "Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../"."

I am trying to test the TypeScript WalletConnect in my .NETCore project, but got a fail message "Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../"." when I add App.js to my _Layout.cshtml.

The compiler has no error message or warning, so I think the packages should have been installed correctly. Even if I try to remove the React related parts, the next one that fails will be @walletconnect/client, with the same error message.

Here is github repo if any help

_Layout.cshtml

...
    <script type="module" src="./tsscripts/App.js"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

App.tsx

import * as React from "react";
import styled from "styled-components";
import WalletConnect from "@walletconnect/client";
import Button from "./components/Button";
import Card from "./components/Card";
...