reactjs - TypeError: ไม่สามารถอ่านคุณสมบัติ 'ReactCurrentDispatcher' ของ undefined

1. เมื่อฉันพยายามอัปเกรดเวอร์ชันของ React, ระบบวินโดวส์เกิดข้อผิดพลาด
2. โครงการนี้ใช้ React, TypeScript และ Firebase สำหรับทำการยืนยันตัวตน
3. ไฟล์ package.json (dependencies, scripts)

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.1.7",
    "firebase": "^8.2.7",
    "form-group": "^3.0.8",
    "react": "^15.3.0",
    "react-dom": "^17.0.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.2",
    "react-tinder-card": "^1.3.1",
    "reactstrap": "^8.8.1",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

คำตอบ #1

ฉันรู้ว่ามันผ่านมาแล้วหนึ่งเดือน แต่ในกรณีที่คุณยังต้องการมัน หรือมีคนอื่นที่มีปัญหาเดียวกัน ฉันได้รับข้อความแสดงข้อผิดพลาดเดียวกันและสามารถแก้ไขได้ด้วยวิธีที่ให้ไว้ในโพสต์นี้

เห็นได้ชัดว่ามันเกี่ยวข้องกับเวอร์ชันของ "react" และ "react-dom" ที่ไม่เหมือนกัน และการรันคำสั่งดังต่อไปนี้ในเทอร์มินัลจะแก้ปัญหาได้: npm rm react react-dom && npm i -s react react-dom

คำตอบ #2

ฉันพยายามแก้ปัญหานี้มาหลายวันและฉันมักเจอกับกระทู้นี้ (และกระทู้บางกระทู้ซ้ำๆ) โดยไม่มีคำตอบที่ครอบคลุม ฉันจะแบ่งปันวิธีแก้ปัญหาที่ใช้ได้กับฉัน และหวังว่านี่จะช่วยประหยัดเวลาให้กับคนอื่นๆ

ฉันกำลังสร้างไลบรารีคอมโพเนนต์ React โดยใช้ Vite (โหมดไลบรารี) และมันทำงานได้ใน React 18 แต่ใน React 19 ฉันได้รับข้อผิดพลาดดังต่อไปนี้: Uncaught TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')

ในฐานะผู้เขียนไลบรารี ผมพื้นฐานแล้วคือส่วนของบุคคลที่สามที่ขัดแย้งกับตัวเอง

สำหรับกลุ่มปัญหานี้ หลายคำตอบจะแนะนำว่ามีความขัดแย้ง/ความไม่ตรงกันระหว่างเวอร์ชันของ react และ react-dom

คุณสามารถตรวจสอบเวอร์ชันของ react และ react-dom ได้โดยการรันคำสั่งดังต่อไปนี้จากไดเรกทอรีที่ตั้งของ package.json ของโปรเจกต์ของคุณ: npm ls react react-dom

ในกรณีของผม เวอร์ชันทั้งหมดตรงกันเนื่องจากโปรเจกต์ของผมไม่ได้รวม react หรือ react-dom ไว้ ซึ่งถูกระบุเป็น peerDependencies ใน package.json ของไลบรารี และทำให้เป็นภายนอกในคอนฟิก Vite ของผม:

// snippet from my vite config. libraries excluded from the build
rollupOptions: {
  external: ['react', 'react-dom'],
  output: {
    globals: {
      'react-dom': 'ReactDom',
      react: 'React',
    },
  },
}

หลายคำตอบอื่นได้กล่าวถึงว่า React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED ซึ่งเป็น API ภายในของ React ที่เป็นส่วนตัวเกี่ยวข้องกับปัญหา ฉันได้ค้นหาชุดแพ็กเกจไลบรารีที่คอมไพล์แล้วและพบสิ่งนี้ใน Javascript

ปัญหาคือ react/jsx-runtime ใช้ React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED และถูกรวมเข้าไปในไลบรารีของฉัน API นี้ไม่เข้ากันกับ React 19 และทำให้เกิดข้อผิดพลาด

ฉันแก้ไขการตั้งค่า Vite ของฉันเพื่อยกเว้นมันและนี่ก็แก้ปัญหาได้

rollupOptions: {
  external: ['react', 'react-dom', 'react/jsx-runtime'],
  output: {
    globals: {
      'react-dom': 'ReactDom',
      react: 'React',
      'react/jsx-runtime': 'ReactJsxRuntime',
    },
  },
}

คุณอาจกำลังใช้ไลบรารีของบุคคลที่สามที่อาศัย API นี้ ซึ่งจะไม่สามารถใช้งานได้ใน React 19 คุณสามารถรัน grep -ir React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED จากโฟลเดอร์รากของโปรเจกต์ของคุณเพื่อดูว่า API นี้ถูกใช้งานโดยบุคคลที่สามหรือไม่

คุณอาจจำเป็นต้องอัปเดตการพึ่งพานั้นหรือแทนที่ด้วยแพ็กเกจที่เข้ากันได้อื่น