编译失败：无法解析'./components/counter.jsx'模块求助

Hey there! Let's work through this frustrating module error together—it's one of the most common kinks to iron out in React setups, so we'll cover all the likely fixes step by step.

First, let's recap your situation to make sure I'm on the same page: you're following Mosh's React tutorial, installed all dependencies (Bootstrap, Popper, etc.), deleted package-lock.json, double-checked spelling, but still get the "Module not found" error when compiling. You've shared your Counter component code, which looks solid at a glance.

Let's start with the most common culprits: #

• File path & case sensitivity
  This is the #1 cause of this error. Double-check:

  1. Is there a components folder in the same directory as the file you're importing from? For example, if you're importing into src/App.js, the structure should be src/components/counter.jsx.
  2. Check for case mismatches! macOS/Linux filesystems are case-sensitive—if your file is named Counter.jsx (capital C) but you're importing ./components/counter.jsx (lowercase c), that will break things. Windows is case-insensitive, but the React compiler will still throw an error here.
  3. Make sure the file isn't saved in a nested subfolder by accident (like src/components/old/counter.jsx instead of src/components/counter.jsx).

• File extension issues
  Confirm that your component file is really saved as .jsx, not .js or a hidden extension (like .jsx.txt—sometimes OS settings hide file extensions, so you might not see this). If you're using Create React App, it supports both .js and .jsx, but if you specified .jsx in your import, the file must match.

• Relative path starting point
  Ensure you're importing from the correct starting directory. For example:

  • If your import is in src/index.js, the path ./components/counter.jsx assumes components is inside src.
  • If components is in your project root (outside src), you'd need to use ../components/counter.jsx instead.

• Reinstall dependencies & clear cache
  Even though you deleted package-lock.json, let's try a full reset:

  1. Delete your node_modules folder entirely
  2. Run npm install (or yarn install if you use Yarn)
  3. Restart your development server (npm start)
     Sometimes cached dependencies or incomplete installs can mess with module resolution.

• Check webpack config (if not using Create React App)
  If you set up React manually with webpack, make sure your webpack.config.js includes .jsx in the resolved extensions:

  module.exports = {
    // ... other config
    resolve: {
      extensions: ['.js', '.jsx']
    }
  };
  

  Without this, webpack won't recognize .jsx files unless you specify the full extension every time.

• Use VS Code's auto-complete to verify paths
  In the file where you're importing the Counter component, start typing import Counter from './components/ and let VS Code's auto-complete suggest files. If it doesn't show counter.jsx, that means the file isn't in the expected location—this is a quick way to confirm path issues.

Your Counter component code for reference: #

import React, { Component } from "react";
class Counter extends Component {
  state = {};
  render() {
    return <h1>Hello World</h1>;
  }
}
export default Counter;

Start with the path/case checks first—those fix 90% of these errors. If none of these work, feel free to share a screenshot of your project folder structure (from VS Code's explorer) and the exact import statement you're using, and we can dig deeper!

内容的提问来源于stack exchange，提问作者Alex Akshaj Mody