React Social集成Firebase后执行npm start出现Html Webpack Plugin错误求助

Hey，我之前在搭建React+Firebase社交项目的时候也碰到过一模一样的问题！让我帮你拆解下问题根源和修复方法：

这个ReferenceError: features is not defined是Html Webpack Plugin抛出的，核心原因是你的index.html模板里用到了一个叫features的变量，但Webpack在编译HTML的时候找不到这个变量的定义。

大概率是你执行firebase init后，Firebase CLI修改了项目的Webpack/HTML模板相关配置，打断了原本预期的变量注入流程——比如之前可能有自定义逻辑给HtmlWebpackPlugin传了features变量，Firebase初始化后覆盖了这部分配置，导致变量消失了。

我当时是通过下面几个步骤解决的，你可以逐一尝试：

1. 先检查你的index.html代码 #

先打开你的index.html，看看有没有类似这样的模板语法（通常是<% %>包裹的代码）：

<!-- 示例：问题代码片段 -->
<% if (features.includes('firebase-auth')) { %>
  <script src="/auth-init.js"></script>
<% } %>

如果有直接引用features的代码，那这就是问题的源头——现在这个变量没有被HtmlWebpackPlugin传递进来了。

2. 方案一：移除或替换未定义的模板逻辑 #

如果这段依赖features的代码不是必须的，直接删掉或者改成固定代码就行：

<!-- 修复后的代码 -->
<script src="/auth-init.js"></script>

3. 方案二：手动给HtmlWebpackPlugin注入变量 #

如果你确实需要用到features变量，就得在项目的Webpack配置文件里手动配置注入：

• 如果是Create React App项目，你需要用craco或者react-app-rewired来修改配置（因为CRA默认隐藏Webpack配置）
• 配置示例（以craco.config.js为例）：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  webpack: {
    plugins: {
      add: [
        new HtmlWebpackPlugin({
          template: './public/index.html',
          templateParameters: {
            // 这里定义你需要的features变量值，比如包含Firebase的功能模块
            features: ['auth', 'firestore', 'storage']
          }
        })
      ]
    }
  }
};

如果是自定义Webpack项目，直接在webpack.config.js的plugins数组里添加上述配置即可。

4. 方案三：重置Firebase Hosting配置 #

如果是Firebase init时不小心覆盖了HTML模板的相关配置，可以重新初始化Hosting部分，选择不覆盖现有文件：

firebase init hosting

当终端提示File public/index.html already exists. Overwrite?时，输入N回车，这样就能保留你原来的HTML模板和配置逻辑，避免Firebase的默认配置干扰。

完成上面的操作后，重新运行：

npm start

如果浏览器不再弹出features is not defined的错误，说明问题解决啦！

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