TypeScript项目从react-scripts迁移至Parcel后访问返回404问题求助

问题原因与解决方案 #

1. 入口文件配置错误 #

你当前Parcel启动命令直接指定./src/index.tsx作为入口，自动生成的默认HTML缺少React挂载必需的#root节点，也无法加载你自定义的静态资源，是触发404的核心原因。
修改package.json中的scripts配置，将项目原有的public/index.html作为入口（Parcel会自动解析HTML中关联的tsx、样式等资源），同时适配react-router的BrowserHistory路由规则，添加--history-api-fallback参数：

"scripts": {
  "start": "cross-env NODE_ENV=local parcel ./public/index.html -p 3000 --history-api-fallback",
  "build": "parcel build ./public/index.html"
}

注意确认public/index.html中存在<div id="root"></div>节点，且引用tsx的路径正确，示例：

<script type="module" src="../src/index.tsx"></script>

2. 清除无效依赖与缓存 #

你项目中安装的css-loader、file-loader、ts-loader均为webpack生态的编译工具，Parcel不需要这类依赖，残留可能引发编译冲突，先卸载：

# npm执行
npm uninstall css-loader file-loader ts-loader
# yarn执行
yarn remove css-loader file-loader ts-loader

删除Parcel缓存与旧构建产物，避免旧配置残留影响：

rm -rf .parcel-cache dist

你tsconfig.json中的outDir配置不会生效，Parcel会自行管理构建产物输出路径，无需额外调整。

3. 验证运行 #

重新执行启动命令即可正常访问：

npm run start

如果是生产构建后部署出现404，构建时添加对应部署路径的--public-url参数即可，比如部署在二级路径/my-app下：

"build": "parcel build ./public/index.html --public-url /my-app"

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