使用Snowpack搭建React项目时提示找不到index.js的问题求助

核心问题点 #

• 脚本路径拼写错误：index.html中引用的.src/index.js是错误路径，正确应为./src/index.jsx
• 缺少JSX编译配置：当前环境未明确配置Snowpack处理JSX文件，导致无法识别.jsx后缀的入口文件

修复步骤 #

1. 修正index.html的脚本引用 #

打开根目录下的index.html，将script标签修改为：

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

说明：.src是无效的相对路径写法，./才是指向当前目录下的子文件夹；同时你的入口文件实际是index.jsx，必须写对文件名后缀。

2. 添加Snowpack JSX处理配置 #

在项目根目录新建snowpack.config.js文件，写入以下配置：

module.exports = {
  mount: {
    src: '/',
  },
  plugins: [
    '@snowpack/plugin-react-refresh',
  ],
};

然后安装对应的React处理插件：

npm install --save-dev @snowpack/plugin-react-refresh

说明：这个插件会让Snowpack自动编译JSX文件，同时支持React组件热刷新，和你之前电脑上的隐式编译效果一致。

3. 适配React 18的API（可选） #

你使用的是React 18，旧的ReactDOM.renderAPI已经被标记为过时，建议更新src/index.jsx代码：

import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<div>Whats good React?</div>);

4. 重启Snowpack服务 #

停止当前运行的Snowpack进程，重新执行：

npm start

额外排查建议 #

• 确认项目路径结构：根目录下必须包含index.html、package.json，以及存放index.jsx的src文件夹
• 清理缓存：如果重启后仍有问题，执行npx snowpack clean清除缓存后再启动服务

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