CloudFlare Pages构建React项目失败：@react-spring模块解析错误

项目此前运行正常，今日突然出现以下构建错误：

Compiled with problems:

ERROR in ./node_modules/@react-spring/core/dist/index.mjs 1596:0-45

Module not found: Error: Can't resolve '@react-spring/types/animated' in '/Users/oguzhantufenk/Desktop/Siblings projects/Barbearians-Front-End/node_modules/@react-spring/core/dist'
Did you mean 'animated.js'?
BREAKING CHANGE: The request '@react-spring/types/animated' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains "\"type\": \"module\"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.


ERROR in ./node_modules/@react-spring/core/dist/index.mjs 1597:0-50

Module not found: Error: Can't resolve '@react-spring/types/interpolation' in '/Users/oguzhantufenk/Desktop/Siblings projects/Barbearians-Front-End/node_modules/@react-spring/core/dist'
Did you mean 'interpolation.js'?
BREAKING CHANGE: The request '@react-spring/types/interpolation' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains "\"type\": \"module\"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

项目依赖如下：

"@coinbase/wallet-sdk": "^3.6.0",
"@react-three/fiber": "^8.10.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@web3modal/ethereum": "^2.0.0-rc.1",
"@web3modal/react": "^2.0.0-rc.1",
"axios": "^1.1.3",
"bn.js": "^5.2.1",
"ethers": "^5.7.2",
"framer-motion": "^8.0.2",
"gsap": "file:gsap-bonus.tgz",
"include-media": "^1.4.10",
"radium": "^0.26.2",
"react": "^18.2.0",
"react-countup": "^6.4.0",
"react-dom": "^18.2.0",
"react-fast-marquee": "^1.3.5",
"react-parallax-mouse": "^2.0.1",
"react-player": "^2.11.0",
"react-responsive": "^9.0.2",
"react-router-dom": "^6.6.1",
"react-scripts": "5.0.1",
"react-social-login-buttons": "^3.6.1",
"react-toastify": "^9.1.1",
"sass": "^1.57.1",
"three": "^0.148.0",
"typescript": "^4.9.3",
"use-sound": "^4.0.1",
"wagmi": "^0.10.4",
"web-vitals": "^2.1.4",
"web3": "^1.8.1",
"web3modal": "^1.9.9"

解决建议 #

• 清理并重新安装依赖：删除node_modules文件夹和package-lock.json（或yarn.lock），然后运行npm install（或yarn install），解决子依赖版本不兼容或缓存问题。
• 显式声明@react-spring版本：在package.json的dependencies中添加明确的版本号，确保依赖一致性：

  "@react-spring/core": "^9.7.3",
  "@react-spring/types": "^9.7.3"
  

  添加后重新安装依赖。
• 调整webpack扩展名解析：若使用react-app-rewired或已eject项目，在webpack配置的resolve.extensions中添加.js、.mjs等扩展名：

  resolve: {
    extensions: ['.mjs', '.js', '.jsx', '.json']
  }
  

• 降级react-scripts：react-scripts 5.x对ESM模块解析更严格，尝试降级到4.x版本（如"react-scripts": "4.0.3"），重新安装后测试。

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