#Canary version being used for react

1 messages · Page 1 of 1 (latest)

grave hare
#

We have React 18.3.1 installed in our package json, when I view the sites Components with React Dev Tools, I see 18.3.0-canary being used? Why is this

shrewd bronzeBOT
#

Hi @grave hare. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

This is a common situation with Next.js. When you have React 18.3.1 installed in your package.json, but see a React canary version in React Dev Tools, it's because Next.js uses its own bundled version of React internally.

Next.js often includes a specific version of React that it has tested with and optimized for, which may be different from the version specified in your package.json. This is especially true for newer features or when using the App Router.

Several GitHub issues document this behavior:

  1. For testing frameworks, there's a known issue where the React version from package.json doesn't match what Next.js uses internally, causing problems with tests Testing frameworks cannot correctly resolve React

  2. Similar issues appear with React 18.3.1 in other contexts, where downgrading to React 18.2.0 resolves problems React does not recognize the fetchPriority prop

This dual React version situation can sometimes cause compatibility issues with certain libraries or when testing. If you're experiencing problems, you might need to:

  1. Align your React version with what Next.js expects
  2. Use specific configuration for testing environments to ensure they use the same React version as your application

This behavior is by design - Next.js maintains its own React dependencies to ensure compatibility with its features.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@grave hare Kapa.ai is still learning and improving, please let me know how I did by reacting below.

grave hare
#

So theres nothing you can do about it? @shrewd bronze

shrewd bronzeBOT
#

Let me check the knowledge base for you again. Give me one moment! :books:

#

There are a few approaches you can take to address the React version discrepancy in Next.js:

  1. Use React 19 RC with Next.js 15: If you're using Next.js 15 with the App Router, you can align your package.json with the React version Next.js expects by installing the React 19 RC version:
"dependencies": {
  "react": "19.0.0-rc.0",
  "react-dom": "19.0.0-rc.0"
}

This approach was suggested by a Next.js team member in a GitHub issue Failed to load external module.

  1. Use package.json overrides: For npm or yarn, you can use the "overrides" field to ensure all React instances resolve to the same version:
"overrides": {
  "react": "$react",
  "react-dom": "$react-dom"
}

This was suggested as a safer option than using --force when installing packages Unable to install major packages with Next.js 15 and React 19 RC.

  1. Downgrade to Next.js 14: If compatibility is critical and you're experiencing issues, you could consider using Next.js 14 which has more stable React version requirements.

  2. Accept the internal version: If you're not experiencing any issues, you can simply accept that Next.js uses its own internal React version, which is a deliberate design choice to ensure compatibility with Next.js features.

The React version discrepancy is most problematic when testing or when using libraries that have strict React version requirements. In normal application usage, it typically doesn't cause issues.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: