reactjs - 反应解决错误：未捕获的类型错误：无法解析模块说明符“反应”

Question

我对 typescript 很陌生，最近尝试使用 ts 构建一些反应页面，但是在试图让它全部工作时遇到了很多问题。

我目前正在尝试将反应（使用打字稿）集成到现有的 asp.net 核心应用程序中，并使用 npm 导入模块。但是尝试加载页面时收到未捕获的类型错误：

未捕获的类型错误：无法解析模块说明符“react”。相对引用必须以“/”、“./”或“../”开头。

我的猜测是“node_modules”库在运行时无法访问，需要以某种方式位于 wwwroot 文件夹中（但我可能错了）。目前 node_modules 文件夹与 wwwroot 文件夹处于同一目录级别。

我的 tsconfig.json：

{
    "compilerOptions": {
        "target": "ES6",
        "lib": ["ES6", "dom"],
        "moduleResolution": "Node",
        "outDir": "../wwwroot/js/",
        "jsx": "react"
    }
}

npm 包：

├── @types/bootstrap@5.0.17
├── @types/jquery@3.5.6
├── @types/node@16.4.3
├── @types/react-dom@17.0.9
├── @types/react@17.0.15
├── commonjs@0.0.1
├── react-dom@17.0.2
├── react@17.0.2
└── typescript@4.3.5

剃刀页面：

@page
@using System.Data
@using Microsoft.AspNetCore.Html
@model TestSite.Form
@{
  ViewData["Title"] = " Form";
}

<div>
  <div id='FormContent'></div>
  <script type="module" src="/js/Builder/Form.js"></script>
</div>

表格.tsx：

import * as React from 'react';
import { render } from 'react-dom';

class Form extends React.Component
{

    constructor()
    {
        super();
    }

    render()
    {
        return (
            <div>
                <b>Test</b>
            </div>
        )
    }
}

render(
    <Form />,
    document.getElementById('FormContent')
);

关于这个有什么想法吗？

提前谢谢了！:)

标签： reactjstypescriptasp.net-corenpm