@types/react-router-dom issue when compiling executor #10238

dmaksimov · 2022-05-10T20:00:12Z

Current Behavior

I'm getting the following error when I attempt to compile an executor.

node_modules/@types/react-router-dom/index.d.ts:13:10 - error TS2305: Module '"react-router"' has no exported member 'match'.

13 import { match } from 'react-router';

NX is installing a dependency for @types/react-router-dom@5.3.3 which is for react-router-dom@5.3 but the installed version of react-router-dom is 6.3.

Expected Behavior

I would expect it to compile without any errors

Steps to Reproduce

Generate a new React app with a router
Create an executor
Compile the executor
You should see an error about types in @types/react-router-dom

I was able to reproduce the error on nx-examples. I opened a PR here: nrwl/nx-examples#200

Failure Logs

node_modules/@types/react-router-dom/index.d.ts:13:10 - error TS2305: Module '"react-router"' has no exported member 'match'.

13 import { match } from 'react-router';
            ~~~~~

node_modules/@types/react-router-dom/index.d.ts:19:5 - error TS2305: Module '"react-router"' has no exported member 'PromptProps'.

19     PromptProps,
       ~~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:20:5 - error TS2305: Module '"react-router"' has no exported member 'Prompt'.

20     Prompt,
       ~~~~~~

node_modules/@types/react-router-dom/index.d.ts:23:5 - error TS2305: Module '"react-router"' has no exported member 'RedirectProps'.

23     RedirectProps,
       ~~~~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:24:5 - error TS2305: Module '"react-router"' has no exported member 'Redirect'.

24     Redirect,
       ~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:25:5 - error TS2305: Module '"react-router"' has no exported member 'RouteChildrenProps'.

25     RouteChildrenProps,
       ~~~~~~~~~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:26:5 - error TS2305: Module '"react-router"' has no exported member 'RouteComponentProps'.

26     RouteComponentProps,
       ~~~~~~~~~~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:31:5 - error TS2305: Module '"react-router"' has no exported member 'StaticRouterProps'.

31     StaticRouterProps,
       ~~~~~~~~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:32:5 - error TS2305: Module '"react-router"' has no exported member 'StaticRouter'.

32     StaticRouter,
       ~~~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:33:5 - error TS2305: Module '"react-router"' has no exported member 'SwitchProps'.

33     SwitchProps,
       ~~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:34:5 - error TS2305: Module '"react-router"' has no exported member 'Switch'.

34     Switch,
       ~~~~~~

node_modules/@types/react-router-dom/index.d.ts:35:5 - error TS2305: Module '"react-router"' has no exported member 'match'.

35     match,
       ~~~~~

node_modules/@types/react-router-dom/index.d.ts:37:5 - error TS2305: Module '"react-router"' has no exported member 'withRouter'.

37     withRouter,
       ~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:38:5 - error TS2305: Module '"react-router"' has no exported member 'RouterChildContext'.

38     RouterChildContext,
       ~~~~~~~~~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:39:5 - error TS2305: Module '"react-router"' has no exported member 'useHistory'.

39     useHistory,
       ~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:42:5 - error TS2305: Module '"react-router"' has no exported member 'useRouteMatch'.

42     useRouteMatch,
       ~~~~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:62:34 - error TS2694: Namespace '"/Users/DMaksimov/Code/packages/nx-examples/node_modules/history/index"' has no exported member 'LocationState'.

62 export interface LinkProps<S = H.LocationState> extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
                                    ~~~~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:64:11 - error TS2694: Namespace '"/Users/DMaksimov/Code/packages/nx-examples/node_modules/history/index"' has no exported member 'LocationDescriptor'.

64     to: H.LocationDescriptor<S> | ((location: H.Location<S>) => H.LocationDescriptor<S>);
             ~~~~~~~~~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:64:47 - error TS2315: Type 'Location' is not generic.

64     to: H.LocationDescriptor<S> | ((location: H.Location<S>) => H.LocationDescriptor<S>);
                                                 ~~~~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:64:67 - error TS2694: Namespace '"/Users/DMaksimov/Code/packages/nx-examples/node_modules/history/index"' has no exported member 'LocationDescriptor'.

64     to: H.LocationDescriptor<S> | ((location: H.Location<S>) => H.LocationDescriptor<S>);
                                                                     ~~~~~~~~~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:68:28 - error TS2694: Namespace '"/Users/DMaksimov/Code/packages/nx-examples/node_modules/history/index"' has no exported member 'LocationState'.

68 export function Link<S = H.LocationState>(
                              ~~~~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:72:29 - error TS2694: Namespace '"/Users/DMaksimov/Code/packages/nx-examples/node_modules/history/index"' has no exported member 'LocationState'.

72 export interface Link<S = H.LocationState>
                               ~~~~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:77:37 - error TS2694: Namespace '"/Users/DMaksimov/Code/packages/nx-examples/node_modules/history/index"' has no exported member 'LocationState'.

77 export interface NavLinkProps<S = H.LocationState> extends Omit<LinkProps<S>, "className" | "style"> {
                                       ~~~~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:82:103 - error TS2315: Type 'Location' is not generic.

82     isActive?<Params extends { [K in keyof Params]?: string }>(match: match<Params> | null, location: H.Location<S>): boolean;
                                                                                                         ~~~~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:83:16 - error TS2315: Type 'Location' is not generic.

83     location?: H.Location<S> | undefined;
                  ~~~~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:91:31 - error TS2694: Namespace '"/Users/DMaksimov/Code/packages/nx-examples/node_modules/history/index"' has no exported member 'LocationState'.

91 export function NavLink<S = H.LocationState>(
                                 ~~~~~~~~~~~~~

node_modules/@types/react-router-dom/index.d.ts:95:32 - error TS2694: Namespace '"/Users/DMaksimov/Code/packages/nx-examples/node_modules/history/index"' has no exported member 'LocationState'.

95 export interface NavLink<S = H.LocationState>
                                  ~~~~~~~~~~~~~

node_modules/@types/react-router/index.d.ts:42:24 - error TS2694: Namespace '"/Users/DMaksimov/Code/packages/nx-examples/node_modules/history/index"' has no exported member 'LocationDescriptor'.

42     initialEntries?: H.LocationDescriptor[] | undefined;
                          ~~~~~~~~~~~~~~~~~~

node_modules/@types/react-router/index.d.ts:57:11 - error TS2694: Namespace '"/Users/DMaksimov/Code/packages/nx-examples/node_modules/history/index"' has no exported member 'LocationDescriptor'.

57     to: H.LocationDescriptor;
             ~~~~~~~~~~~~~~~~~~

node_modules/@types/react-router/index.d.ts:73:11 - error TS2694: Namespace '"/Users/DMaksimov/Code/packages/nx-examples/node_modules/history/index"' has no exported member 'LocationState'.

73     S = H.LocationState
             ~~~~~~~~~~~~~

node_modules/@types/react-router/index.d.ts:75:14 - error TS2315: Type 'History' is not generic.

75     history: H.History<S>;
                ~~~~~~~~~~~~

node_modules/@types/react-router/index.d.ts:76:15 - error TS2315: Type 'Location' is not generic.

76     location: H.Location<S>;
                 ~~~~~~~~~~~~~

node_modules/@types/react-router/index.d.ts:81:97 - error TS2694: Namespace '"/Users/DMaksimov/Code/packages/nx-examples/node_modules/history/index"' has no exported member 'LocationState'.

81 export interface RouteChildrenProps<Params extends { [K in keyof Params]?: string } = {}, S = H.LocationState> {
                                                                                                   ~~~~~~~~~~~~~

node_modules/@types/react-router/index.d.ts:83:15 - error TS2315: Type 'Location' is not generic.

83     location: H.Location<S>;
                 ~~~~~~~~~~~~~

node_modules/@types/react-router/index.d.ts:189:53 - error TS2694: Namespace '"/Users/DMaksimov/Code/packages/nx-examples/node_modules/history/index"' has no exported member 'LocationState'.

189 export function useHistory<HistoryLocationState = H.LocationState>(): H.History<HistoryLocationState>;
                                                        ~~~~~~~~~~~~~

node_modules/@types/react-router/index.d.ts:189:71 - error TS2315: Type 'History' is not generic.

189 export function useHistory<HistoryLocationState = H.LocationState>(): H.History<HistoryLocationState>;
                                                                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@types/react-router/index.d.ts:191:35 - error TS2694: Namespace '"/Users/DMaksimov/Code/packages/nx-examples/node_modules/history/index"' has no exported member 'LocationState'.

191 export function useLocation<S = H.LocationState>(): H.Location<S>;
                                      ~~~~~~~~~~~~~

node_modules/@types/react-router/index.d.ts:191:53 - error TS2315: Type 'Location' is not generic.

191 export function useLocation<S = H.LocationState>(): H.Location<S>;
                                                        ~~~~~~~~~~~~~


Found 38 errors in 2 files.

Errors  Files
    27  node_modules/@types/react-router-dom/index.d.ts:13
    11  node_modules/@types/react-router/index.d.ts:42

Environment

   Node : 14.19.1
   OS   : darwin x64
   yarn : 1.22.18

   nx : 14.0.5
   @nrwl/angular : 14.0.5
   @nrwl/cypress : 14.0.5
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.0.5
   @nrwl/eslint-plugin-nx : 14.0.5
   @nrwl/express : Not Found
   @nrwl/jest : 14.0.5
   @nrwl/js : 14.0.5
   @nrwl/linter : 14.0.5
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : 14.0.1
   @nrwl/nx-plugin : 14.1.4
   @nrwl/react : 14.0.5
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.0.5
   @nrwl/web : 14.0.5
   @nrwl/workspace : 14.0.5
   typescript : 4.6.3
   rxjs : 6.5.5
   ---------------------------------------
   Community plugins:
   	 @ngrx/component-store: 13.0.1
   	 @ngrx/effects: 13.0.1
   	 @ngrx/entity: 13.0.1
   	 @ngrx/router-store: 13.0.1
   	 @ngrx/store: 13.0.1
   	 @ngrx/store-devtools: 13.0.1

The text was updated successfully, but these errors were encountered:

AgentEnder · 2022-05-10T20:33:55Z

Hey @dmaksimov, it may be unrelated, but some of your @nrwl/* packages don't line up with the version of nx you have installed. Aside from @nrwl/nx-cloud, all packages under the nrwl scope should generally be set up with the same version.

Can you correct this and check that the issue still reproduces? An easy way to fix this would be to run nx migrate {v}, where v is the version of nx you have installed. Alternatively, updating to latest with nx migrate latest would also work.

dmaksimov · 2022-05-10T21:25:53Z

Hey @AgentEnder, I tried migrating to the latest version of nx using nx migrate latest and I'm still experiencing the same issue.

This is the updated nx report:

Node : 14.19.1
   OS   : darwin x64
   npm  : 6.14.16

   nx : 14.1.4
   @nrwl/angular : 14.1.4
   @nrwl/cypress : 14.1.4
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.1.4
   @nrwl/eslint-plugin-nx : 14.1.4
   @nrwl/express : Not Found
   @nrwl/jest : 14.1.4
   @nrwl/js : 14.1.4
   @nrwl/linter : 14.1.4
   @nrwl/nest : 14.1.4
   @nrwl/next : Not Found
   @nrwl/node : 14.1.4
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.1.4
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.1.4
   @nrwl/web : 14.1.4
   @nrwl/workspace : 14.1.4
   typescript : 4.3.5
   rxjs : 6.6.7
   ---------------------------------------
   Community plugins:

I tried this on the nx-examples repo which is using nx 14 and had the same issue.

nrwl/nx-examples#200

I also tried creating a brand new workspace using create-nx-workspace@latest and generated a React app with a router and was experiencing the same issue.

If I remove the @types/react-router-dom from my package.json it compiles without any errors. I'm just not sure if it's safe to remove that dependency since it's something that nx added when I created the React app.

dominikspiertz · 2022-05-11T06:20:15Z

You should be safe to remove it. We recently got the update from react-router-dom from v5 to v6. v5 needed additional types, while v6 has included types. The types should be removed by a nx migration for the next release

dmaksimov · 2022-05-11T14:24:48Z

Great, thank you!

github-actions · 2023-03-22T13:09:18Z

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

dmaksimov added the type: bug label May 10, 2022

dmaksimov closed this as completed May 11, 2022

github-actions bot added the outdated label Mar 22, 2023

github-actions bot locked as resolved and limited conversation to collaborators Mar 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@types/react-router-dom issue when compiling executor #10238

@types/react-router-dom issue when compiling executor #10238

dmaksimov commented May 10, 2022 •

edited

AgentEnder commented May 10, 2022

dmaksimov commented May 10, 2022

dominikspiertz commented May 11, 2022

dmaksimov commented May 11, 2022

github-actions bot commented Mar 22, 2023

@types/react-router-dom issue when compiling executor #10238

@types/react-router-dom issue when compiling executor #10238

Comments

dmaksimov commented May 10, 2022 • edited

Current Behavior

Expected Behavior

Steps to Reproduce

Failure Logs

Environment

AgentEnder commented May 10, 2022

dmaksimov commented May 10, 2022

dominikspiertz commented May 11, 2022

dmaksimov commented May 11, 2022

github-actions bot commented Mar 22, 2023

dmaksimov commented May 10, 2022 •

edited