Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Next.js - Invariant failed: Hash history needs a DOM (SSR)

See original GitHub issue

API Platform version(s) affected: 2.0.1

Description
When running the app using Next.js (isomorphic framework), it crashes with Invariant failed: Hash history needs a DOM.

How to reproduce
Source code (OSS): https://github.com/UnlyEd/next-right-now-admin/pull/1

Possible Solution
I thought that was related to SSR and tried to render HydraAdmin only on the client but it didn’t work.

Note that using react-admin directly works fine: Source code: https://github.com/UnlyEd/next-right-now-admin/blob/nrn-admin-poc/src/pages/index.tsx Demo: https://next-right-now-admin.now.sh/#/Product

Additional Context

Invariant failed: Hash history needs a DOM
Error: Invariant failed: Hash history needs a DOM
    at invariant (/Users/vadorequest/dev/next-right-now-admin/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:13:11)
    at createHashHistory (/Users/vadorequest/dev/next-right-now-admin/node_modules/history/cjs/history.js:558:16)
    at Object.<anonymous> (/Users/vadorequest/dev/next-right-now-admin/node_modules/@api-platform/admin/lib/AdminGuesser.js:77:55)
    at Module._compile (internal/modules/cjs/loader.js:1151:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Module.require (internal/modules/cjs/loader.js:1040:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/vadorequest/dev/next-right-now-admin/node_modules/@api-platform/admin/lib/index.js:91:45)
    at Module._compile (internal/modules/cjs/loader.js:1151:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Module.require (internal/modules/cjs/loader.js:1040:19)
    at require (internal/modules/cjs/helpers.js:72:18)

Issue Analytics

State:
Created 4 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

alanpoulaincommented, Mar 5, 2020

It’s because of this line: https://github.com/api-platform/admin/blob/4f036e89c2aa64d2e6a67b10acca5fb33a6d16eb/src/AdminGuesser.js#L63

I’m not sure what is the right way to fix it. Maybe by using another history strategy (https://marmelab.com/react-admin/Admin.html#history) when it’s on the server side.

0reactions

Vadorequestcommented, Mar 5, 2020

I’ve found the root cause, the issue was related with how '@api-platform/admin' was imported, it must be imported on the client side only.

See https://github.com/UnlyEd/next-right-now-admin/pull/1/commits/b27b5473e387f0609d33f92bafc03cd08b16d8b7

Demo: https://nrn-admin-api-platform-admin.now.sh/#/

It doesn’t display anything because I haven’t figured out how to provide my GraphQL API credentials (http header token) yet.

Top Results From Across the Web

Invariant failed: Browser history needs a DOM - Stack Overflow

The bare minimum, you have to have the appication running is to add a index. js in pages directory: const Index = ()...

Tag: React Router - somewhat abstract

Error: Invariant failed: Browser history needs a DOM ... React Router provides other router implementations such as HashRouter ... server/index.js.

Browser history needs a DOM in SSR with React-Router

Hello friends, I have a problem with ssr with react -rourter 5. I proceeded according to the document but I do not know...

Migrating from React Router - Next.js

First, uninstall React Router. You'll be migrating to the built-in routing with Next.js. npm uninstall react-router-dom.

[Solved]-Invariant failed: Browser history needs a DOM-Reactjs

In NextJS, you don't have to add the ReactDOM.render part as in normal ReactJS applications. NextJS does this themselves while rendering the application....