[英]Absolute Path Not working for create react app with typescript
If I use absolute path which configured with typescript it doesn't work.如果我使用配置了 typescript 的绝对路径,它将不起作用。 After adding config in tsconfig file I can navigate to the file in vscode by clicking on component.
在 tsconfig 文件中添加配置后,我可以通过单击组件导航到vscode中的文件。 But Project doesn't run.
但项目没有运行。 Please help me if there any issue with my config.
如果我的配置有任何问题,请帮助我。
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"]
}
Here is my main route file这是我的主要路线文件
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;
When I click on component it goes to the file successfully.当我单击组件时,它会成功转到文件。 But when I run the project.
但是当我运行这个项目时。 It show me error message
它向我显示错误消息
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.
It work like this ->它像这样工作->
...
{
"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;
But I don't want to keep like this.但我不想一直这样。 Because It will confusing.
因为它会混淆。 direct module path means comes from node_modules and I want to keep ~/* which means comes from src folder
直接模块路径意味着来自 node_modules 我想保留 ~/* 这意味着来自 src 文件夹
I used other project with react-rewired-app which worked.我使用了其他带有 react-rewired-app 的项目。 but I don't want to do like this.
但我不想这样做。
You gotta check if there's a "type": "module"
in your package.json, cause then you'll need to write the ext.您必须检查 package.json 中是否有
"type": "module"
,因为那么您需要编写分机。 in every file you import:在您导入的每个文件中:
import { Login, Movie } from '~/pages.tsx';
If that's the case, you can simply remove "type": "module"
如果是这种情况,您可以简单地删除
"type": "module"
You are using create-react-app
so you must follow the pattern set by them.您正在使用
create-react-app
,因此您必须遵循他们设置的模式。
create-react-app
explains in their documentation how to use absolute imports for typescript projects. create-react-app
在他们的文档中解释了如何对 typescript 项目使用绝对导入。
If your project looks something like this:如果您的项目看起来像这样:
|- project
|- src
|-- components
|-- pages
|- index.ts
|- Login.tsx
|- Movie.tsx
your import should look like this:您的导入应如下所示:
import {Login, Movie} from 'paths'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.