执行npm run dev时遇TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')错误

问题场景 #

执行npm run dev时触发TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')错误，操作流程为：

npm init @shopify/app@latest
cd your-app
npm run shopify app generate extension

错误日志 #

TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')
    at ensureRootIsScheduled (C:\Users\USER\Desktop\shopify-app\modern-investment-app\node_modules\react-reconciler\cjs\react-reconciler.development.js:17731:35)
    at scheduleUpdateOnFiber (C:\Users\USER\Desktop\shopify-app\modern-investment-app\node_modules\react-reconciler\cjs\react-reconciler.development.js:17636:5)
    at Object.updateContainer (C:\Users\USER\Desktop\shopify-app\modern-investment-app\node_modules\react-reconciler\cjs\react-reconciler.development.js:21022:5)
    at Ink.render (file:///C:/Users/USER/Desktop/shopify-app/modern-investment-app/node_modules/ink/build/ink.js:205:20)
    at render (file:///C:/Users/USER/Desktop/shopify-app/modern-investment-app/node_modules/ink/build/render.js:19:14)
    at renderString (file:///C:/Users/USER/Desktop/shopify-app/modern-investment-app/node_modules/@shopify/cli-kit/dist/private/node/ui.js:38:22)
    at renderOnce (file:///C:/Users/USER/Desktop/shopify-app/modern-investment-app/node_modules/@shopify/cli-kit/dist/private/node/ui.js:7:33)
    at renderFatalError (file:///C:/Users/USER/Desktop/shopify-app/modern-investment-app/node_modules/@shopify/cli-kit/dist/public/node/ui.js:198:12)
    at handler (file:///C:/Users/USER/Desktop/shopify-app/modern-investment-app/node_modules/@shopify/cli-kit/dist/public/node/error.js:113:5)
    at file:///C:/Users/USER/Desktop/shopify-app/modern-investment-app/node_modules/@shopify/cli-kit/dist/public/node/error-handler.js:27:20
C:\Users\USER\Desktop\shopify-app\modern-investment-app\node_modules\react-reconciler\cjs\react-reconciler.development.js:17731
        if ( ReactCurrentActQueue$1.isBatchingLegacy !== null) {
                        ^
TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')
    at ensureRootIsScheduled (C:\Users\USER\Desktop\shopify-app\modern-investment-app\node_modules\react-reconciler\cjs\react-reconciler.development.js:17731:35)
    at scheduleUpdateOnFiber (C:\Users\USER\Desktop\shopify-app\modern-investment-app\node_modules\react-reconciler\cjs\react-reconciler.development.js:17636:5)
    at Object.updateContainer (C:\Users\USER\Desktop\shopify-app\modern-investment-app\node_modules\react-reconciler\cjs\react-reconciler.development.js:21022:5)
    at Ink.unmount (file:///C:/Users/USER/Desktop/shopify-app/modern-investment-app/node_modules/ink/build/ink.js:262:20)
    at EventEmitter.emit (node:events:525:35)
    at EventEmitter.emit (node:domain:489:12)
    at emit (C:\Users\USER\Desktop\shopify-app\modern-investment-app\node_modules\signal-exit\index.js:105:13)
    at process.processEmit [as emit] (C:\Users\USER\Desktop\shopify-app\modern-investment-app\node_modules\signal-exit\index.js:193:7)
    at process.exit (node:internal/process/per_thread:192:15)
    at process.<anonymous> (file:///C:/Users/USER/Desktop/shopify-app/modern-investment-app/node_modules/@shopify/cli/dist/index.js:12:13)
Node.js v18.16.0

修复步骤 #

这个错误源于react-reconciler与React版本不兼容，可按以下方法解决：

• 锁定依赖版本
  在项目根目录的package.json中添加overrides字段，强制指定兼容的React相关版本：

  "overrides": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-reconciler": "^0.29.0"
  }
  

• 重装依赖
  删除现有依赖文件后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

• 重试操作
  重新执行扩展生成和开发服务启动命令：

  npm run shopify app generate extension
  npm run dev
  

• 备选方案：降级Node版本
  若上述方法无效，可尝试将Node.js降级到16.x版本（如16.20.0），部分用户反馈旧版本Node可规避该兼容性问题。

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