Vite+React导入独立仓库组件时出现default导出缺失错误求助

我用Vite+React技术栈，把一个多项目复用的自定义React组件迁移到独立仓库，通过package.json导入到当前项目。组件里依赖了react-range-slider-input，迁移前功能正常，迁移后出现错误：

请求的模块'/courses/college-readiness/04_CC_EX/interrupts/exercise1/node_modules/react-range-slider-input/dist/index.js?v=9e698801'未提供名为'default'的导出

用npm link指向组件本地副本时能正常运行，只有通过仓库导入组件时才报错。我怀疑和Vite对CommonJS的支持有关，但不确定怎么修。项目和组件的package.json都设置了type: "module"，但错误还是存在。本地环境里react-range-slider-input能正常用默认导出，这点我不太确定。

组件中导入依赖的代码：

import RangeSlider from 'react-range-slider-input';

组件的package.json：

{
  "name": "nwm-common-react",
  "version": "1.0.1",
  "description": "",
  "main": "index.js",
  "private": true,
  "type": "module",
  "dependencies": {
    "dompurify": "^3.2.6",
    "prop-types": "^15.8.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-range-slider-input": "^3.2.1"
  }
}

项目的package.json：

{
  "name": "continueoverlay",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "nwm-common-react": "git+https://gitlab.com/mycompany/nwm-common-react.git#main"
  },
  "devDependencies": {
    "@eslint/js": "^9.21.0",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
    "vite": "^6.2.0",
    "vite-plugin-static-copy": "^2.3.1"
  }
}

1. 修正依赖导入方式 #

react-range-slider-input的ES模块可能并非默认导出，而是具名导出。修改组件中的导入代码：

import { RangeSlider } from 'react-range-slider-input';

如果不确定导出类型，也可以用兼容写法：

import * as RangeSliderModule from 'react-range-slider-input';
const RangeSlider = RangeSliderModule.default || RangeSliderModule.RangeSlider;

2. 优化组件包的package.json配置 #

• 明确指定ES模块入口，在组件的package.json中添加module字段：

  "module": "index.js", // 若有编译后的ES模块文件，替换为对应路径
  

• 确保组件包被编译为ES模块格式（比如用Rollup或Vite打包时，设置输出格式为esm）。

3. 调整Vite依赖预构建配置 #

Vite对git导入的包预构建逻辑可能有差异，在项目的vite.config.js中添加配置强制预构建相关依赖：

export default defineConfig({
  optimizeDeps: {
    include: ['react-range-slider-input', 'nwm-common-react'],
    esbuildOptions: {
      format: 'esm'
    }
  }
});

4. 强制指向ES模块版本 #

如果react-range-slider-input本身提供了ES模块版本，在项目的vite.config.js中添加别名：

export default defineConfig({
  resolve: {
    alias: {
      'react-range-slider-input': 'react-range-slider-input/dist/index.esm.js'
    }
  }
});

5. 重新安装依赖 #

尝试清理项目依赖后重新安装，确保嵌套依赖被正确处理：

rm -rf node_modules package-lock.json
npm install

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