React+Tailwind项目出现Cannot find module错误怎么修复？能否无npm预览？

一、「Cannot find module」报错排查步骤 #

• 删除项目根目录的node_modules文件夹和package-lock.json（或yarn.lock）文件，重新执行npm install拉取完整依赖
• 检查App.jsx中的导入语句：确认路径拼写、层级是否正确，比如是否漏写相对路径前缀./，或者引用了不存在的文件/包
• 清理npm缓存：执行npm cache clean --force后，重新安装依赖
• 核对package.json中的依赖列表：确认dependencies和devDependencies里的包是否完整，没有被误删
• 重启本地开发服务，必要时重启电脑，排除进程残留导致的异常

二、无需npm预览项目的可行方案 #

方案1：先构建静态文件，再用静态服务器预览（推荐现有项目使用） #

1. 先执行一次npm run build，生成生产环境静态文件（输出在build文件夹）
2. 用以下任意方式打开静态文件：
   • Python内置服务器：执行python -m http.server 3000（Python3）或python -m SimpleHTTPServer 3000（Python2），访问localhost:3000
   • VS Code插件：安装「Live Server」插件，右键build/index.html选择「Open with Live Server」

方案2：CDN引入React和Tailwind（仅适合简单Demo） #

如果完全不想使用npm构建，可直接在HTML中引入CDN资源，把组件代码写在HTML文件内，示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const App = () => {
      return <h1 className="text-2xl font-bold text-blue-600">Hello React + Tailwind</h1>;
    };
    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Berkant Karakayış