Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
dmaksimov opened this issue May 10, 2022 · 5 comments
Closed

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

dmaksimov opened this issue May 10, 2022 · 5 comments

Comments

@dmaksimov
Copy link

dmaksimov commented May 10, 2022

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/[email protected] which is for [email protected] 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

  1. Generate a new React app with a router
  2. Create an executor
  3. Compile the executor
  4. 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
@AgentEnder
Copy link
Member

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
Copy link
Author

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
Copy link

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
Copy link
Author

Great, thank you!

@github-actions
Copy link

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 22, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants