An unexpected error has occurred. Invariant Violation: You should not use <Link> outside a <Router>

[cifilaci]

Overview of the issue

After generating a monolith with React frontend the frontend does not work!

Details
Invariant Violation: You should not use outside a

in Link
in Route (created by NavLink)
in NavLink (created by DropdownItem)
in DropdownItem
in div (created by DropdownMenu)
in DropdownMenu (created by NavDropdown)
in li (created by Manager)
in Manager (created by Dropdown)
in Dropdown (created by UncontrolledDropdown)
in UncontrolledDropdown (created by NavDropdown)
in NavDropdown (created by AccountMenu)
in AccountMenu (created by Header)
in ul (created by Nav)
in Nav (created by Header)
in div (created by Transition)
in Transition (created by Collapse)
in Collapse (created by Header)
in nav (created by Navbar)
in Navbar (created by Header)
in div (created by Header)
in Header (created by App)
in ErrorBoundary (created by App)
in div (created by App)
in Router (created by HashRouter)
in HashRouter (created by App)
in App (created by Connect(App))
in Connect(App)
in div
in Provider
in AppContainer
in ErrorBoundary

Reproduce the error

Generate a React monolith!

JHipster Version(s)

5.8.1

JHipster configuration

JHipster Version(s)

app@0.0.0 /home/jhipster/app
`-- generator-jhipster@5.8.1

JHipster configuration, a .yo-rc.json file generated in the root folder

.yo-rc.json file

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "com.mycompany.myapp"
    },
    "jhipsterVersion": "5.8.1",
    "applicationType": "monolith",
    "baseName": "app",
    "packageName": "com.mycompany.myapp",
    "packageFolder": "com/mycompany/myapp",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "cacheProvider": "no",
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "postgresql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "maven",
    "enableSwaggerCodegen": false,
    "jwtSecretKey": "bXktc2VjcmV0LXRva2VuLXRvLWNoYW5nZS1pbi1wcm9kdWN0aW9uLWFuZC10by1rZWVwLWluLWEtc2VjdXJlLXBsYWNl",
    "clientFramework": "react",
    "useSass": false,
    "clientPackageManager": "npm",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "entitySuffix": "",
    "dtoSuffix": "DTO",
    "otherModules": [],
    "enableTranslation": false
  }
}

JDL for the Entity configuration(s) entityName.json files generated in the .jhipster directory

JDL entity definitions

Environment and Tools

openjdk version "1.8.0_191"
OpenJDK Runtime Environment (build 1.8.0_191-8u191-b12-0ubuntu0.18.04.1-b12)
OpenJDK 64-Bit Server VM (build 25.191-b12, mixed mode)

git version 2.17.1

node: v10.15.0

npm: 6.7.0

yeoman: 2.0.5

yarn: 1.13.0

INFO! Congratulations, JHipster execution is complete!

Browsers and Operating System

Windows, Linux

[ruddell]

Also affects master. I'm guessing it's a transitive dependency somewhere in the node modules.

Looks like it's remix-run/react-router#6630

[stefanchiriac]

I ran in to the same problem and is working properly using yarn instead of npm

[finxster]

@ruddell any ETA to release a new version with this fix?! Thanks!

[ruddell]

It shouldn't be needed because react-router fixed the issue. I just tested a React app with v5.8.2 and could access the frontend.

If you still run into it, you can add "react-router": "4.3.1", to the package.json. You might still have the incorrect react-router versions in your package-lock.json.

[finxster]

I just created an app with react, but I couldn't access with this error (with v5.8.2). Maybe something is wrong in my environment?

Anyway, adding the "react-router": "4.3.1" manually solved the issue, but I was looking forward to creating an app without any manual step. Thanks!