ReactJS：正在将 index.js 转换为 index.tsx - 找不到模块：错误：无法解析"./App"

Question

我试图在typescript中添加一些页面，由于我只能在.ts或.tsx文件中导入.ts文件，所以我重命名了"索引.js"至"；索引.tsx"；以及"；js"至"；应用程序tsx"；。

现在我得到以下错误：

ERROR in ./src/index.tsx 7:0-24
Module not found: Error: Can't resolve './App'

索引.tsx

ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);

App.tsx

function App() {
return (
<Provider store={store}>
<div>hi</div>
</Provider>
);
}
export default App;

为什么Index.tsx无法解析App.tsx？我用create-rect应用程序创建了这个项目，我使用的是react 17.0.2。

Answer 1

1:在src目录中创建文件tsconfig.json。

粘贴此代码。

{
"compilerOptions": {
"target": "ES6",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}

2：安装npm I cra模板typescript

3:从"导入应用程序/应用程序tsx'；而不是从"导入应用程序/应用程序'；

Answer 2

这是因为CRA中的webpack配置没有为typeScript设置。

如果你想在你的React项目中使用typeScript，你应该从"；CRA打字模板"！

安装CRA typeScript模板，然后在其中生成代码。

模板npm站点在这里https://www.npmjs.com/package/cra-template-typescript

我希望你能找到答案：D