Warning: Please use `import { NavLink } from "react-router-dom"`

Question

I'm getting this error:

index.js:1437 Warning: Please use `import { NavLink } from "react-router-dom"` instead of `import NavLink from "react-router-dom/es/undefined"`. Support for the latter will be removed in the next major release.

I recently updated my version of react-router and react-router-dom from version ^4.3.1 to version ^5.1.2. The first error after updating the those packages was:

You should not use <Switch> outside a <Router>. After a search, I solved that error in the following way:

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"

import Loadable from 'react-loadable'

import { Container } from 'reactstrap'
import Loading from "../../components/loading"

const Example = Loadable({ loader: () => import('../example/index.js'), loading: Loading })


export default class App extends Component {
  render() {
    return (
      <Router>
        <Container>
          <Header/>
          <main>
            <Switch>
             <Route exact path="/example/:exampleName/example1/:exampleName" component={Example}/>
            </Switch>
          </main>
        </Container>
      </Router>
    )
  }
} 

The next error I'm seeing in the console didn't yield any search results when I Googled it. It is:

index.js:1437 Warning: Please use `import { NavLink } from "react-router-dom"` instead of `import NavLink from "react-router-dom/es/undefined"`. Support for the latter will be removed in the next major release.

I'm seeing this error multiple times for various react-router-dom related components, such as NavLink, Prompt, and other things I'm not even using in my application.

The reason I upgraded the package is because I wanted to use some new features such as the useParams hooks.

My question: what is the best way to solve the errors and be able to use the latest version of react-router-dom in my project?

Answer 1

It turns out browsing the code of both react-router and react-router-dom yields some interesting results:

It looks like the reason the line is being printed is because the modules were deprecated:

react-router-dom]$ cat NavLink.js

"use strict";
require("./warnAboutDeprecatedCJSRequire")("NavLink");
module.exports = require("./index.js").NavLink;

This happens because these were forwarded modules; the module actually printing the error is actually react-router, not react-router-dom:

warnAboutDeprecatedESMImport:

cat react-router/es/warnAboutDeprecatedESMImport.js
"use strict";

// ...

export default function(member) {
  printWarning(
    'Please use `import { %s } from "react-router"` instead of `import %s from "react-router/es/%s"`. ' +
      "Support for the latter will be removed in the next major release.",
    [member, member]
  );
}

So even though you didn't import the modules directly, you imported the modules from a module that imports the modules, so to speak.

According to their code, react-app-dom may have moved Switch:

react-router/es/Switch.js:

    1 "use strict";
    2
    3 import warnAboutDeprecatedESMImport from "./warnAboutDeprecatedESMImport.js";
    4 warnAboutDeprecatedESMImport("Switch");
    5
    6 import { Switch } from "../esm/react-router.js";
    7 export default Switch;

as per their documentation, they mention that there are 2 ways to load react-router-dom, one is the CommonJS way, and another is the ES (ES6?) way, these refer to different ways to run the code (there also appears to be UMD).

Copied from: https://www.npmjs.com/package/react-router-dom

// using ES6 modules
import { BrowserRouter, Route, Link } from "react-router-dom";

// using CommonJS modules
const BrowserRouter = require("react-router-dom").BrowserRouter;
const Route = require("react-router-dom").Route;
const Link = require("react-router-dom").Link;

This is already on their site.

This means, that your code may either be running on CommonJS or on ES6. If you can figure out which mode you are running on, you'll be able to select the correct import statements from above.

The old way of running the code seems documented here: import { BrowserRouter, Route, Switch } from 'react-router-dom';

The only documentation I found on using Switch, Route and these components is here, so I assume you bumped onto the same code:

https://reacttraining.com/react-router/web/api/BrowserRouter

Interestingly, when one follows the steps on that page, everything works like a charm, so I think the problem may be that you have a mix of "new components" or dependencies, with "old" (2016?) dependencies, and as a result, this is causing the problem, the solution may be to just upgrade even more components, instead of upgrading components selectively (which is what I assume you are doing).

Consider these steps:

1. create a new app (in another folder) using create-react-app
2. diff your current package.json vs the newly created package.json
3. figure out which are the differences
4. upgrade additional modules (some times deleting the whole node_modules helps).
5. rebuild and re-test.

Maybe you have an incompatible combination of an old react-router and a new react-router-dom or something like that, and one is using CommonJS but the other one expects ES modules, idk.

I hope this information is useful!.

maybe removing the ^ from the package.json will help too, by being more explicit about the versions (as per):

"

Please try a fresh installation. There was a release (4.4) that caused a number of issues for people; that was unpublished and re-published as React Router v5.0.0. The warning message comes from 4.4/5, but if you're on 4.3.1, you should not see it.

https://github.com/ReactTraining/react-router/issues/6650

How to fix it:

yarn list v1.15.2

warning Filtering by arguments is deprecated. Please use the pattern option instead.

├─ react-router-dom@4.3.1

│ └─ react-router@4.4.0 // it need to be 4.3.1

└─ react-router@4.3.1
Done in 0.98s.