@react-three/drei依赖导入错误：webgl-sdf-generator无默认导出

问题重现 #

报错信息：

./node_modules/@react-three/drei/node_modules/troika-three-text/dist/troika-three-text.esm.js
Attempted import error: 'webgl-sdf-generator' does not contain a default export (imported as 'createSDFGenerator').

完整导入追踪：

Import trace for requested module:
./node_modules/@react-three/drei/node_modules/troika-three-text/dist/troika-three-text.esm.js
./node_modules/@react-three/drei/core/Text.js
./node_modules/@react-three/drei/index.js
./app/aboutMe/canvas/Ball.jsx
./app/aboutMe/Tech.tsx
 ⚠ ./node_modules/@react-three/drei/node_modules/troika-three-text/dist/troika-three-text.esm.js
Attempted import error: 'webgl-sdf-generator' does not contain a default export (imported as 'createSDFGenerator').

有效解决方案 #

1. 清理并重新安装依赖

手动修改node_modules里的文件不会生效——troika-three-text调用的是自身嵌套的依赖包，不是根目录下的版本。先彻底清理依赖再重装：

# 删除node_modules和对应锁文件（根据你的包管理器选择）
rm -rf node_modules package-lock.json yarn.lock

# 重新安装依赖
npm install # 或 yarn install

2. 强制指定兼容版本的webgl-sdf-generator

如果重装后问题依旧，说明包管理器拉取的webgl-sdf-generator版本与troika-three-text不兼容，需要强制锁定版本：

• npm用户：
  先安装版本强制工具：

  npm install -D npm-force-resolutions
  

  在package.json中添加以下配置：

  "resolutions": {
    "webgl-sdf-generator": "^1.1.4"
  },
  "scripts": {
    "preinstall": "npx npm-force-resolutions"
  }
  

  最后重新执行npm install。

• Yarn用户：
  直接在package.json中添加：

  "resolutions": {
    "webgl-sdf-generator": "^1.1.4"
  }
  

  然后执行yarn install。

问题原因 #

这个错误是由于troika-three-text（@react-three/drei的依赖）尝试使用默认导入createSDFGenerator，但当前安装的webgl-sdf-generator版本仅提供命名导出，两者导出方式不匹配导致。通过统一依赖版本或强制指定兼容版本，就能解决导入不匹配的问题。

内容的提问来源于stack exchange，提问作者Charlz Ivan John Babida