passive-yellow•4mo ago

Failing to deploy: Cannot find module... or its corresponding type declarations.

Hi everyone, I'm trying to deploy my app and doing a local build works as expected. However, when deploying to Netlify, I'm running into an issue where certain component aren't being found. I've triple checked spelling but no luck.

src/App.tsx(7,24): error TS2307: Cannot find module './components/layout/Header' or its corresponding type declarations.
src/App.tsx(8,23): error TS2307: Cannot find module './components/layout/Title' or its corresponding type declarations.
src/components/layout/Layout.tsx(3,41): error TS2307: Cannot find module './Header' or its corresponding type declarations.
src/components/layout/header.tsx(6,23): error TS2307: Cannot find module './Title' or its corresponding type declarations.
src/components/layout/header.tsx(7,22): error TS2307: Cannot find module '../header/DropMenu' or its corresponding type declarations.
Error: Command "tsc && refine build" exited with 2

src/App.tsx(7,24): error TS2307: Cannot find module './components/layout/Header' or its corresponding type declarations.
src/App.tsx(8,23): error TS2307: Cannot find module './components/layout/Title' or its corresponding type declarations.
src/components/layout/Layout.tsx(3,41): error TS2307: Cannot find module './Header' or its corresponding type declarations.
src/components/layout/header.tsx(6,23): error TS2307: Cannot find module './Title' or its corresponding type declarations.
src/components/layout/header.tsx(7,22): error TS2307: Cannot find module '../header/DropMenu' or its corresponding type declarations.
Error: Command "tsc && refine build" exited with 2

tsconfig.json:

{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@/*": ["./src/*"]
},
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src", "vite.config.ts"],
"references": [
{
"path": "./tsconfig.node.json"
}
]
}

{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@/*": ["./src/*"]
},
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src", "vite.config.ts"],
"references": [
{
"path": "./tsconfig.node.json"
}
]
}

Imports in App.tsx:

import { Layout } from './components/layout/Layout';
import { Header } from './components/layout/Header';
import { Title } from './components/layout/Title';

import { Layout } from './components/layout/Layout';
import { Header } from './components/layout/Header';
import { Title } from './components/layout/Title';

Export in src/components/layout/Header.tsx:

export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = () => {
return (
<>
 { /* CODE HERE */}
</>
);
};

export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = () => {
return (
<>
 { /* CODE HERE */}
</>
);
};

5 Replies

kapa.ai•4mo ago

Hi @James. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the error messages you've shared, it seems like the issue is related to the file paths in your import statements. The error messages indicate that the modules cannot be found at the specified paths. Here are a few things you can check: 1. File and Folder Names: Ensure that the file and folder names match exactly with what you've specified in your import statements. This includes checking for correct case (upper vs lower), spelling, and any special characters. 2. File Extensions: In some cases, you might need to include the file extension in your import statement. For example, if your file is named Header.tsx, you might need to import it like this: import { Header } from './components/layout/Header.tsx'; 3. Relative Paths: Make sure the relative paths in your import statements are correct. For example, if your App.tsx file is in the src directory and your Header.tsx file is in the src/components/layout directory, your import statement in App.tsx should look like this: import { Header } from './components/layout/Header'; 4. Base URL and Paths in tsconfig.json: You've specified a baseUrl and paths in your tsconfig.json. Make sure these are correctly set up and match your project structure. If you've checked all of these and are still encountering the issue, it might be helpful to share more information about your project structure. For example, where is your App.tsx file located relative to your src directory and your Header.tsx file? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below

passive-yellow•4mo ago

@kapa.ai 2. allowImportingTsExtensions isn't enabled so they can't be used. 4. I removed baseUrl and set paths more directly:

"paths": {
"@/*": ["./src/*"],
"assets/*": ["./src/assets/*"],
"casbin/*": ["./src/casbin/*"],
"components/*": ["./src/components/*"],
"contexts/*": ["./src/contexts/*"],
"interfaces/*": ["./src/interfaces/*"],
"pages/*": ["./src/pages/*"],
"providers/*": ["./src/providers/*"],
"utility/*": ["./src/utility/*"],
},

"paths": {
"@/*": ["./src/*"],
"assets/*": ["./src/assets/*"],
"casbin/*": ["./src/casbin/*"],
"components/*": ["./src/components/*"],
"contexts/*": ["./src/contexts/*"],
"interfaces/*": ["./src/interfaces/*"],
"pages/*": ["./src/pages/*"],
"providers/*": ["./src/providers/*"],
"utility/*": ["./src/utility/*"],
},

It didn't seem to make a difference.

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the information you've provided, it seems like the issue might be related to the way your paths are set up in your tsconfig.json. Here are a few things you can try: 1. Check your path aliases: Ensure that the path aliases in your tsconfig.json match your project structure. For example, if you have a file in src/components/layout/Header.tsx, and you're trying to import it with import { Header } from 'components/layout/Header';, then your tsconfig.json should have a path alias like this:

"paths": {
  "components/*": ["./src/components/*"],
  // other aliases...
}

"paths": {
  "components/*": ["./src/components/*"],
  // other aliases...
}

2. Check your import statements: Make sure you're using the correct path aliases in your import statements. For example, if you've set up a path alias for components/*, you should be importing your Header component like this: import { Header } from 'components/layout/Header'; 3. Check your file and folder names: Ensure that the file and folder names in your import statements match exactly with your actual file and folder names. This includes checking for correct case (upper vs lower), spelling, and any special characters. 4. Check your file extensions: If your files have .tsx extensions, you might need to include the extension in your import statement, like this: import { Header } from 'components/layout/Header.tsx'; If you've checked all of these and are still encountering the issue, it might be helpful to share more information about your project structure. For example, where is your App.tsx file located relative to your src directory and your Header.tsx file? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below