React项目导入Navbar组件时出现Module not found错误：文件存在但无法解析

云原生阿岚

2026-4-29

Hey Eric, let's work through this frustrating error together—it's a common issue with a few straightforward fixes. Let's break down the possible causes and solutions based on the code and error message you shared:

1. Fix the incorrect React import in `navbar.js`

Looking at your navbar.js code, I spotted a critical typo in the React import:

// Wrong case for the package name
import React from 'React';

npm package names are case-sensitive, and the official React package is lowercase. Change this to:

import React from 'react';

This typo can cause the file to fail to load properly, which might trigger the "module not found" error even if the file exists.

2. Verify exact filename and path matching

Webpack (which React uses under the hood) is case-sensitive when resolving files, even on Windows (which ignores case in file explorer). Double-check:

Is your file named exactly navbar.js (not Navbar.js or navbar.jsx)?
Is it located directly in src/components/? Ensure there are no typos in the folder name (like component instead of components).

If your file is actually Navbar.js, update your import in App.js to match:

import Navbar from './components/Navbar';

3. Try adding the file extension to the import

Sometimes, Webpack's configuration might not automatically resolve .js extensions by default (though Create React App usually does this). Test adding .js to your import path in App.js:

import Navbar from './components/navbar.js';

4. Check for hidden file extensions (Windows only)

If you're on Windows, make sure file extensions are visible. It's possible your file is actually named navbar.js.js (with a hidden second .js extension) which would cause the path to fail. To fix this: