React-router导致无法读取未定义的属性'listen'

Question

I faced strange js exception when rendered webpack build with react-router on the server side:

Cannot read property 'listen' of undefined

How can I solve it?

Answer 1

browserHistory is the code resulted by createRouterHistory , which returns undefined if DOM is not defined. That's why you are having this error.

Solution is to import useRouterHistory and replace it somehow with createMemoryHistory , which intention is to be used for server side rendering. Implementation for webpack:

# application.js
import { Router, useRouterHistory } from "react-router"
import { createHistory } from "history"

const browserHistory = useRouterHistory(createHistory)({ queryKey: false })

<Router history={history}>
  ...bla-bla
</Router>

# webpack.config.server.js - sends this code to react server
new webpack.NormalModuleReplacementPlugin(
  /createBrowserHistory/,
  require.resolve("./node_modules/react-router/lib/createMemoryHistory.js")
)