I've been learning typescript within react and I keep getting these strange import issues. This is happing with all my component imports.
Here is a simple import:
import MainNav from "../components/layout/mainNav/MainNavBar";
and the contents of the import:
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;
This is a image of the error it gives me. I don't understand what it's asking of me. I've never had these issues until typescript. Is there something to do with the config file?
My 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"
]
}
This is because macOS uses a case-insensitive file names in its file system by default. This confuses TypeScript. In environments with case-sensitive file names this would result in a fatal error - it wouldn't be able to find the file.
The solution would be to just use the same casing as in your path:
import MainNav from "../components/layout/MainNav/MainNavBar";
That did the trick but I do find that very strange ... my 'MainNav' folder IS explicitly 'mainNav'. The string that I supplied is exactly the same casing as my structure. Changing the subfolder to 'MainNav' throws for a loop because what about the previous folders or any sub folders after that? This did solve my problem.
That's really weird, this is why I prefer case-sensitive filesystems - no such confusion there. Was the project created by you (including the MainNav folder)?
correct- I found a solution that worked. I just closed vscode and rebuilt my application and it worked fine! Knowing this though will help in future errors!