本地npm start提示找不到模块，CodeSandbox却正常运行？

在client目录执行npm start时，本地环境控制台报错：

Uncaught Error: Module not found: Can't resolve './App' and './store' in client/src.

同时界面显示两个错误：

• ERROR in ./src/index.tsx 7:0-24 Module not found: Error: Can't resolve './App.tsx' in '/client/src'
• ERROR in ./src/index.tsx 7:0-24 Module not found: Error: Can't resolve './store.ts' in '/client/src'

但将项目的client目录导入CodeSandbox后可正常运行。

项目client/src/index.tsx代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import persistStore from 'redux-persist/es/persistStore';
import setupStore from './store';

const store = setupStore();
const persistor = persistStore(store);

ReactDOM.render(
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <App />
        </PersistGate>
    </Provider>,
    document.getElementById('root'),
);

已尝试的解决方案：

• 删除node_modules和package-lock.json后执行npm install
• 执行npm cache clean --force和npm cache clear --force
• 确保本地与CodeSandbox依赖包一致
• 确认App组件和store模块存在于src目录
• 检查文件名拼写及扩展名正确
• 确认文件路径正确
• 本地和CodeSandbox均使用Chrome

1. 扩展名解析配置差异 #

CodeSandbox默认的构建工具（webpack/Vite）配置会自动识别.tsx/.ts扩展名，但本地项目的配置可能未开启该功能：

• 检查tsconfig.json，确保包含以下关键配置：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "esModuleInterop": true,
    "resolveJsonModule": true
  }
}

• 若使用webpack，检查webpack.config.js的resolve.extensions是否包含目标扩展名：

module.exports = {
  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js'],
  },
};

• 若使用Vite，确认vite.config.ts的resolve.extensions包含.tsx/.ts：

export default defineConfig({
  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
  },
});

2. 大小写敏感性问题 #

本地若为Windows系统，文件名大小写不敏感；但CodeSandbox运行在Linux环境下，大小写严格匹配。比如本地文件是app.tsx但导入写./App，Windows能识别，但Linux会报错。可再核对本地文件名与导入语句的大小写完全一致。

3. 本地构建缓存未清理 #

虽然清理了npm缓存，但webpack/Vite的本地编译缓存可能残留：

• 关闭开发服务器，删除项目根目录的dist、.cache（或.vite、node_modules/.cache）文件夹，再重启npm start
• 若为Create React App项目，执行npm start -- --reset-cache强制重置缓存

4. 工作目录错误 #

确认执行npm start时，终端的当前工作目录确实是client目录，而非项目根目录。若在上级目录执行命令，会导致路径解析错误。

5. 文件系统权限或隐藏问题 #

检查本地src目录下的App.tsx和store.ts是否被系统隐藏，或存在权限问题：

• Windows系统：右键文件查看属性，取消「只读」勾选，确保文件可见
• Linux/macOS系统：用ls -l命令查看文件权限，确保当前用户有读取权限

内容的提问来源于stack exchange，提问作者ln09nv2