{"action":"created","issue":{"url":"https://api.github.com/repos/supasate/connected-react-router/issues/192","repository_url":"https://api.github.com/repos/supasate/connected-react-router","labels_url":"https://api.github.com/repos/supasate/connected-react-router/issues/192/labels{/name}","comments_url":"https://api.github.com/repos/supasate/connected-react-router/issues/192/comments","events_url":"https://api.github.com/repos/supasate/connected-react-router/issues/192/events","html_url":"https://github.com/supasate/connected-react-router/issues/192","id":384564601,"node_id":"MDU6SXNzdWUzODQ1NjQ2MDE=","number":192,"title":"Using CRR in isomorphic > `Invariant Violation: Browser history needs a DOM`","user":{"login":"hutber","id":1344898,"node_id":"MDQ6VXNlcjEzNDQ4OTg=","avatar_url":"https://avatars0.githubusercontent.com/u/1344898?v=4","gravatar_id":"","url":"https://api.github.com/users/hutber","html_url":"https://github.com/hutber","followers_url":"https://api.github.com/users/hutber/followers","following_url":"https://api.github.com/users/hutber/following{/other_user}","gists_url":"https://api.github.com/users/hutber/gists{/gist_id}","starred_url":"https://api.github.com/users/hutber/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hutber/subscriptions","organizations_url":"https://api.github.com/users/hutber/orgs","repos_url":"https://api.github.com/users/hutber/repos","events_url":"https://api.github.com/users/hutber/events{/privacy}","received_events_url":"https://api.github.com/users/hutber/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-11-27T00:10:57Z","updated_at":"2018-12-06T16:39:46Z","closed_at":null,"author_association":"NONE","body":"I am receiving the error which for all purposes I believe I should not be :)\r\n\r\nv5.0.1\r\n\"react-router-dom\": \"^4.3.1\",\r\n\r\n\r\nThe flow is \r\n\r\n**Client** `history.js` > `client/index.js` > `history = createBrowserHistory` > `<App history={history} />`\r\n\r\n**Server** `history.js` > `server/index.js` > `history = createMemoryHistory` > `<App history={history} />`\r\n\r\nI can confirm that Memory is being used on the server, which it then falls down so we never get to the `BroswerHistory`\r\n\r\n**Error in server.js**\r\n\r\n    Invariant Violation: Browser history needs a DOM\r\n    \r\n      30 | \r\n      31 | \t\t\t// Render the component to a string\r\n    > 32 | \t\t\tconst markup = renderToString(\r\n      33 | \t\t\t\t<Provider store={store}>\r\n      34 | \t\t\t\t\t<App history={history} />\r\n      35 | \t\t\t\t</Provider>\r\n\r\n\r\n#history.js\r\n\r\n    import createBrowserHistory from 'history/createBrowserHistory'\r\n    import createMemoryHistory from 'history/createMemoryHistory'\r\n    \r\n    let history\r\n    let createHistory\r\n    \r\n    if (typeof document !== 'undefined') {\r\n    \tcreateHistory = createBrowserHistory\r\n    } else {\r\n    \tcreateHistory = createMemoryHistory\r\n    }\r\n    history = createHistory()\r\n    \r\n    export default history\r\n\r\nI have checked and made sure that the `<BrowserRouter />` is not the wrong place either.\r\n\r\n#routes.js\r\n    \r\n    const routes = (\r\n    \t<Fragment>\r\n    \t\t<BrowserRouter>\r\n   \t\t\t\t<Switch>\r\n   \t\t\t\t\t<Route component={NoMatch} />\r\n   \t\t\t\t</Switch>\r\n    \t\t</BrowserRouter>\r\n    \t</Fragment>\r\n    )\r\n    \r\n    export default routes\r\n\r\n#server.js\r\n\r\n     import history from '../common/history'\r\n\r\n\t const store = configureStore(preloadedState, history)\r\n\r\n\t// Render the component to a string\r\n\tconst markup = renderToString(\r\n\t\t<Provider store={store}>\r\n\t\t\t<App history={history} />\r\n\t\t</Provider>\r\n\t)\r\n#App.js\r\n\r\n    import React from 'react'\r\n    import PropTypes from 'prop-types'\r\n    import { ConnectedRouter } from 'connected-react-router'\r\n    import routes from '../routes'\r\n    \r\n    const App = ({ history }) => {\r\n    \treturn <ConnectedRouter history={history}>{routes}</ConnectedRouter>\r\n    }\r\n    \r\n    App.propTypes = {\r\n    \thistory: PropTypes.object\r\n    }\r\n    \r\n    export default App\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/supasate/connected-react-router/issues/comments/444939059","html_url":"https://github.com/supasate/connected-react-router/issues/192#issuecomment-444939059","issue_url":"https://api.github.com/repos/supasate/connected-react-router/issues/192","id":444939059,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0NDkzOTA1OQ==","user":{"login":"hutber","id":1344898,"node_id":"MDQ6VXNlcjEzNDQ4OTg=","avatar_url":"https://avatars0.githubusercontent.com/u/1344898?v=4","gravatar_id":"","url":"https://api.github.com/users/hutber","html_url":"https://github.com/hutber","followers_url":"https://api.github.com/users/hutber/followers","following_url":"https://api.github.com/users/hutber/following{/other_user}","gists_url":"https://api.github.com/users/hutber/gists{/gist_id}","starred_url":"https://api.github.com/users/hutber/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hutber/subscriptions","organizations_url":"https://api.github.com/users/hutber/orgs","repos_url":"https://api.github.com/users/hutber/repos","events_url":"https://api.github.com/users/hutber/events{/privacy}","received_events_url":"https://api.github.com/users/hutber/received_events","type":"User","site_admin":false},"created_at":"2018-12-06T16:39:46Z","updated_at":"2018-12-06T16:39:46Z","author_association":"NONE","body":"For peoples information:\r\nThe BrowserRouter component creates a history object of its own, and it's always the HTML5 history API which will not work in a non-DOM environment e.g. the server.\r\n\r\nYou could structure your app to not include the BrowserRouter on the server, or you could replace it with the Router component and pass it your own history object that will use the memory history in non-DOM environments.\r\n\r\nconst routes = (\r\n    <Fragment>\r\n        <Router history={history}>\r\n            <Switch>\r\n                <Route component={NoMatch} />\r\n            </Switch>\r\n        </Router>\r\n    </Fragment>\r\n)"}}
{"actor":{"display_login":"hutber"}}