Error "Please upgrade react-dom package" occured (react & Typescript & vite)

Error "Please upgrade react-dom package" occured (react & Typescript & vite)

Posted by: ta-sato on 30 August 2023, 5:38 pm EST

• 

  ta-sato

  • Post Options:
  • Link
    Copy

  Posted 30 August 2023, 5:38 pm EST - Updated 30 August 2023, 5:46 pm EST

  I’m developing web app with wijmo(version 5.20221.857) using react, Typescript and vite environment.

  When I ran app by “vite preview”, “Please upgrade react-dom package” message was shown in chrome’s console log.
  
  It seems that wijmo is requiring “react-dom/client” module in bundled javascript.

  

  831×552 25.1 KB

  If anyone knows how to fix this problem, please give me some advice.
  
  Thank you in advance.

  My tsconfig.json and tsconfig.node.json is below.
  
  If more information is needed, I can attach whole project.

  {
    "compilerOptions": {
      "target": "ES2020",
      "useDefineForClassFields": true,
      "lib": ["ES2020", "DOM", "DOM.Iterable"],
      "module": "ESNext",
      "skipLibCheck": true,
      "types": ["vitest/globals"],
  
      /* Bundler mode */
      "moduleResolution": "bundler",
      "allowImportingTsExtensions": true,
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react-jsx",
  
      /* Linting */
      "strict": true,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "noFallthroughCasesInSwitch": true
    },
    "include": [
      "src",
      "specs/add.test.tsx",
      "specs/HelloWorld.test.tsx",
      "specs/SampleRedux.test.tsx"
    ],
    "references": [{ "path": "./tsconfig.node.json" }]
  }

  {
    "compilerOptions": {
      "composite": true,
      "skipLibCheck": true,
      "module": "ESNext",
      "moduleResolution": "bundler",
      "allowSyntheticDefaultImports": true
    },
    "include": ["vite.config.ts"]
  }

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 31 August 2023, 3:54 pm EST

  Hello,

  We apologize but we are unable to replicate the issue at our end, could you please refer to the below sample used to replicate the issue and let us know if any changes are required to replicate the issue at our end?

  If you are facing the issue only in your application and not in the below-shared sample, it might be possible that the issue is caused due to some other factors in your application therefore I would request you to please share a small sample replicating the issue so that we can find the root cause of the issue and assist you accordingly.

  Sample link: https://stackblitz.com/edit/vite-react-ts-h7rrgc?file=src%2FApp.tsx

  Regards

• 

  ta-sato

  • Post Options:
  • Link
    Copy

  Posted 31 August 2023, 8:19 pm EST

  Thank you for your advice.
  
  I’ll try to run given sample app in my environment and share the result on this thread.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 3 September 2023, 2:08 pm EST

  Sure, please take your time. Let us know if you find anything that needs to be addressed by us, we will be happy to help.

  Regards