我一直在学习React中的打字稿,并且不断遇到这些奇怪的导入问题。这与我所有的组件导入有关。
这是一个简单的导入:
import MainNav from "../components/layout/mainNav/MainNavBar";
以及导入内容:
import React from "react";
import classNames from "classnames";
const MainNavBar:React.SFC = () => {
const classes = classNames (
"main-navbar",
"bg-white"
);
return (
<div className={classes}>
<nav>
<li>Item 1</li>
<li>Item 2</li>
</nav>
</div>
);
}
export default MainNavBar;
这是给我的错误图像。我不明白我在问什么。在打字稿之前,我从未遇到过这些问题。与配置文件有关系吗?
我的tsconfig:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}
这是因为macOS默认情况下在其文件系统中使用不区分大小写的文件名。这会混淆TypeScript。在文件名区分大小写的环境中,这将导致致命错误-无法找到该文件。
解决方案是只使用与路径相同的大小写:
import MainNav from "../components/layout/MainNav/MainNavBar";
那确实成功了,但我确实发现这很奇怪……我的“ MainNav”文件夹明确地是“ mainNav”。我提供的字符串与我的结构完全相同。将子文件夹更改为“ MainNav”会引发循环,因为之前的文件夹或之后的任何子文件夹如何?这确实解决了我的问题。
那真的很奇怪,这就是为什么我更喜欢区分大小写的文件系统的原因-那里没有这种混乱。是您创建的项目(包括MainNav文件夹)吗?
正确-我找到了可行的解决方案。我刚刚关闭vscode并重建了我的应用程序,它运行良好!知道这一点将有助于将来的错误!