[Bug]: Compilation of react app fails with error ERROR in ./node_modules/react-router/dist/index.js 840:33-54

[sudheerhebbale]

What version of React Router are you using?

6.2.2

Steps to Reproduce

This issue has started to occur from today, it was working ok till yesterday.

I develop a react web application (react 17.0.2), using react-router-dom 6.2.2.

package.json is as follows

{
"name": "WebUI_Framework",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.17.3",
"@reduxjs/toolkit": "^1.8.0",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.26.1",
"bootstrap-icons": "^1.9.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"redux": "^4.1.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/cli": "^7.17.6",
"@babel/core": "^7.17.9"
},
"exports": {
".": "./index.js"
}
}

When the development server is started with npm start, the following error is shown

ERROR in ./node_modules/react-router-dom/dist/index.js 266:33-54
export 'startTransition' (imported as 'React') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)
@ ./src/main.js 6:0-61 20:40-50
@ ./src/index.js 3:0-30 5:0-4

Expected Behavior

It is expected to work smoothly

Actual Behavior

The errors get shown

ERROR in ./node_modules/react-router-dom/dist/index.js 266:33-54
export 'startTransition' (imported as 'React') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)
@ ./src/main.js 6:0-61 20:40-50
@ ./src/index.js 3:0-30 5:0-4

[maheshwarimonika]

The issue is with the latest package 6.12.0

[mateosantosdev]

Same error with:
React: 17.0.2
react-router-dom: 6.12.0

[sathish-presidio]

Downgrading the react-router version fixed the issue.

[mateosantosdev]

Downgrading the react-router version fixed the issue.

Yes, it works with:

React: 17.0.2
react-router-dome: 6.11.2

[awanlin]

Just noting that we are running into this in the Backstage project (a framework for building an internal developer portal open sourced by Spotify): backstage/backstage#18155

[brophdawg11]

Huh, this looks to only be an issue in webpack - we're feature detecting for this to be React 17 compatible which works fine in our internal vite example apps.

This seems to be a workaround to fix the webpack compilation issue: #10569

[MezaG]

This worked for me > > Downgrading the react-router version fixed the issue.

Yes, it works with:

React: 17.0.2

react-router-dome: 6.11.2

[Abhi1108]

I was not using "react-router" but using "react-router-dom".
Had to add react-router as dependency.
Both with downgraded version 6.11.2

[github-actions]

🤖 Hello there,

We just published version 6.12.1-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[brophdawg11]

Re-opening until the stable release

[brophdawg11]

👋 Hey folks! Does anyone want to give 6.12.1-pre.0 a shot and confirm that it resolves this compilation issue?

[jqEmprendedorVE]

I test with 6.12.1-pre.0 and work for me

[github-actions]

🤖 Hello there,

We just published version 6.12.1 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[sudheerhebbale]

Tested with the fix and found it working
Thanks

[mateosantosdev]

Its working! thanks :)

[Rugvip]

This has resurfaced in 6.13.0. Likely due to this change? 2f79bce

Could be that the best fix for this at this point is to switch the import back to import React from "react", even though that's not recommended?

[s100]

Honestly this feels to me like an issue with webpack or maybe Babel. I don't see any reason why this approach to feature detection shouldn't work.

[brophdawg11]

@Rugvip Can you provide a reproduction if the issue you are seeing? We've confirmed that react-router-dom@6.13.0 compiles with webpack and React 17: https://codesandbox.io/s/solitary-snow-qvwdmh

[Rugvip]

@brophdawg11 Ah sorry didn't look at the error closely enough, it's not a runtime/webpack issue, it's a TypeScript issue:

node_modules/react-router/dist/lib/polyfills/start-transition.d.ts:2:38 - error TS2339: Property 'startTransition' does not exist on type 'typeof React'.

2 declare const _default: typeof React.startTransition;
                                       ~~~~~~~~~~~~~~~


Found 1 error in node_modules/react-router/dist/lib/polyfills/start-transition.d.ts:2

I believe anyone trying to use react-router with react 17 would run into this issue

[brophdawg11]

Why is your TS setup trying to typecheck library code in node_modules/react-router? I don't see this issue if I create a new app with npx create-react-app cra-app --template typescript and then downgrade it to React 17, install react-router-dom@6.13.0, and render a simple BrowserRouter app

[Rugvip]

@brophdawg11 you'll need to disable skipLibCheck as well, which that cra template sets by default: yarn tsc --skipLibCheck false. Type checking of libraries will help detect incompatibility issues early, which otherwise might only get caught at runtime. Enabling skipLibCheck is not a solution here, many people will want to have that disabled.

[brophdawg11]

OK - that reproduces it for me, but that is indeed a net-new issue since the app compiles and runs fine. It's due to the startTransition detection living in it's own file that now has a .d.ts file of it's own. I'm going to file a new issue for that and we'll get that fixed in the next release.