绝对路径不适用于创建带有类型记录的react应用程序
绝对路径不适用于创建带有类型记录的react应用程序
提问于 2022-08-16 07:23:51
如果我使用使用类型记录配置的绝对路径，它就不能工作。在tsconfig文件中添加配置后，我可以通过单击组件导航到vscode中的文件。但项目没有运行。如果我的配置有任何问题，请帮助我。
tsconfig.json
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"~/*": ["./*"]
},
"target": "es5",
"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"],
"exclude": ["node_modules", "build"]
}这是我的主要路线文件
import React from 'react';
import { Route, Routes } from 'react-router-dom';
import { Login, Movie } from '~/pages';
const AppRouter: React.FC = (props) => {
return (
<Routes>
<Route path="" element={<Movie />} />
<Route path="login" element={<Login />} />
</Routes>
);
};
export default AppRouter;当我单击组件时，它将成功地转到文件中。但当我负责这个项目的时候。它显示了错误信息
Failed to compile.
Module not found: Error: Can't resolve '~/pages' in '/Volumes/Workplace/ababa_tech_task/frontend/src/routes'
ERROR in ./src/routes/index.tsx 6:0-39
Module not found: Error: Can't resolve '~/pages' in '/Volumes/Workplace/ababa_tech_task/frontend/src/routes'
webpack compiled with 1 error
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
No issues found.它的工作方式就像这个->
...
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"pages": ["src/pages"]
},
}import React from 'react';
import { Route, Routes } from 'react-router-dom';
import { Login, Movie } from 'pages'; // pages instead of ~/pages working
const AppRouter: React.FC = (props) => {
return (
<Routes>
<Route path="" element={<Movie />} />
<Route path="login" element={<Login />} />
</Routes>
);
};
export default AppRouter;但我不想一直这样。因为这会让人困惑。直接模块路径方法来自node_modules，我希望保留~/*，这意味着来自src文件夹
我使用了其他的项目与反应-重新连线-应用程序，这是有效的。但我不想这样做。
回答 2
Stack Overflow用户
发布于 2022-08-16 07:39:23
您必须检查一下您的"type": "module"中是否有package.json，因为这样您就需要编写ext。在导入的每个文件中：
import { Login, Movie } from '~/pages.tsx';如果是这样的话，您可以简单地删除"type": "module"
Stack Overflow用户
发布于 2022-08-22 00:13:42
您使用的是create-react-app，所以您必须遵循它们设置的模式。
create-react-app在他们的文档中解释了如何在类型记录项目中使用绝对进口。
如果您的项目如下所示：
|- project
|- src
|-- components
|-- pages
|- index.ts
|- Login.tsx
|- Movie.tsx您的进口应该如下所示：
import {Login, Movie} from 'paths'页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73370209
复制相关文章
相似问题
腾讯云开发者
