React应用引入@coconut-xr/natuerlich报Module not found错误求助

针对你遇到的Module not found: Can't resolve '@coconut-xr/natuerlich/defaults'错误，可按以下步骤排查解决：

• 检查包版本与导出配置
  先确认CRA项目中安装的@coconut-xr/natuerlich版本和Next.js项目中的版本一致——不同版本可能存在导出结构差异。进入项目的node_modules/@coconut-xr/natuerlich目录，打开package.json查看exports字段，确认是否包含./defaults和./react的导出项。如果版本不一致，安装对应版本：

  # 查看Next.js项目中的包版本
  npm list @coconut-xr/natuerlich
  # 在CRA项目中安装匹配版本
  yarn add @coconut-xr/natuerlich@x.x.x
  

• 改用完整路径导入
  若webpack无法解析子路径导入，可直接指定dist目录下的完整路径：

  import { XRCanvas, Hands, Controllers } from '@coconut-xr/natuerlich/dist/defaults';
  import { useXR, NonImmersiveCamera, ImmersiveSessionOrigin } from '@coconut-xr/natuerlich/dist/react';
  

  具体路径可根据node_modules/@coconut-xr/natuerlich下的实际文件结构调整。

• 修改CRA的webpack解析规则
  CRA默认锁定webpack配置，需借助craco修改模块解析逻辑：

  1. 安装依赖：

     yarn add @craco/craco --dev
     

  2. 在项目根目录创建craco.config.js：

     module.exports = {
       webpack: {
         configure: (webpackConfig) => {
           webpackConfig.resolve.alias = {
             ...webpackConfig.resolve.alias,
             '@coconut-xr/natuerlich/defaults': '@coconut-xr/natuerlich/dist/defaults',
             '@coconut-xr/natuerlich/react': '@coconut-xr/natuerlich/dist/react'
           };
           return webpackConfig;
         }
       }
     };
     

  3. 修改package.json中的启动脚本：

     "scripts": {
       "start": "craco start",
       "build": "craco build",
       "test": "craco test"
     }
     

  4. 重启项目即可生效。

• 切换包管理器验证
  临时用npm替换yarn安装依赖，排除yarn的依赖解析异常：

  rm -rf node_modules yarn.lock
  npm install
  npm start
  

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