React+Firebase项目npm run build失败，动态import兼容问题求助

问题重现 #

执行npm run build时触发错误：

React, Firebase - The target environment doesn't support dynamic import() syntax not possible to use external type 'module' within a script

核心问题分析 #

你的代码和配置存在两个关键问题：

• 直接通过../../../node_modules/路径导入Firebase模块，绕过了react-scripts的模块解析机制，导致Firebase的ES模块被错误识别，触发动态import兼容性冲突。
• Bootstrap的导入重复且JS导入方式不合理，可能干扰构建流程的模块处理逻辑。

解决方案 #

1. 修正模块导入代码 #

改用包名导入（React项目标准导入方式），替换所有直接指向node_modules的路径：

// React, Bootstrap
import React, { useState, useEffect } from "react";
// 仅保留一次Bootstrap CSS导入，无需直接导入JS（React项目推荐用react-bootstrap组件库或按需引入Bootstrap功能）
import "bootstrap/dist/css/bootstrap.css";

// Firebase SDK 标准导入
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  updateProfile,
  sendEmailVerification,
} from "firebase/auth";
import {
  getDatabase,
  ref,
  set,
} from "firebase/database";

2. 清理package.json冗余配置 #

firebase-tools是CLI工具，无需放在dependencies中，移至devDependencies（或全局安装）：

{
  "name": "geld-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.3.0-alpha3",
    "firebase": "^9.22.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "firebase-tools": "^12.4.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

3. 重新安装依赖并执行构建 #

执行以下命令重置依赖后重新构建：

rm -rf node_modules package-lock.json
npm install
npm run build

额外说明 #

如果上述步骤后仍有问题：

• 检查是否在Firebase初始化代码中手动使用了动态import，react-scripts 5默认支持动态import的转译，若有自定义动态导入逻辑，确保符合webpack 5的模块处理规则。
• 无需修改现有browserslist配置，当前配置已覆盖支持ES模块的主流浏览器。

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