React require("history").createBrowserHistory` instead of `require("history/createBrowserHistory")

Question

So basically i am having a problem in using the history library in react.

Is it because of the latest version should i try to downgrade the history version but as the error states that Support for the latter will be removed in the next major release. so how should i change and where should i change it?

it says:

Warning: Please use `require("history").createBrowserHistory` instead of `require("history/createBrowserHistory")`. Support for the latter will be removed in the next major release.

AND

Warning: Please use `require("history").createHashHistory` instead of `require("history/createHashHistory")`. Support for the latter will be removed in the next major release.

I am not quite sure how to fix it.

import createHistory from './history'

import { applyMiddleware, compose, createStore } from 'redux'
import { routerMiddleware } from 'connected-react-router'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/es/storage'
import thunk from 'redux-thunk'
import createRootReducer from './reducers'

export const history = createHistory();

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const persistConfig = {
  key: 'root',
  storage
};

const reducers = persistReducer( persistConfig, createRootReducer(history));
const exampleMiddleware =  store => next => action => {
  // if (action.type === 'message'){
  //   do something
  // } else {
  //   next(action);
  // }
}

export default () => {
  const store = createStore(
    reducers,
    composeEnhancers(applyMiddleware(routerMiddleware(history), thunk, exampleMiddleware))
  );
  let persistor = persistStore(store)

  return  { store, persistor }
}

import React, { Component } from 'react';
import { Provider, ReactReduxContext } from 'react-redux';
// import { createStore } from 'redux';
import { ConnectedRouter } from 'connected-react-router'
import { PersistGate } from 'redux-persist/integration/react'

import configureStore, { history } from './configureStore'
import Routers from './Routers';

const { persistor, store } = configureStore();

class App extends Component {
  render() {
    return (

      <Provider store={store} context={ReactReduxContext}>
        <div> SYNTIFY </div>
        <PersistGate loading={null} persistor={persistor}>

          <ConnectedRouter history={history} context={ReactReduxContext}>
            <Routers />
          </ConnectedRouter>

        </PersistGate>
      </Provider>

    );
  }
}

export default App;

history.js

import createHistory from 'history/createBrowserHistory';
export default createHistory;

As it showing error nothing gets rendered.

score 54 · Accepted Answer · answered Apr 12 '19 at 14:38

54

Import creatBrowserHistory with curly brackets. It's exported as a named export.

// history.js

import { createBrowserHistory } from "history";
export default createBrowserHistory();

Then import and use it in index.

// index.js
import history from "./history";
import { Provider } from "react-redux";
import store from "./store/store";

const AppContainer = () => (
    <Router history={history}>
        <Provider store={store}>
             <Route path="/" component={App} />
        </Provider>
    </Router>
);

answered Apr 12 '19 at 14:38

Giwan

1,564
14
17

1

Just a note, mostly it is the issue as mentioned by @Giwan but rarely as it happened in my case, I had passed the component incorrectly in the hi} /> (imported from react-router-dom). Removal of that resolved the issue for me. – Tanishq Vyas Jun 16 '21 at 09:27
Why did you define `Router` before the redux store `Provider`? – vsync Jan 23 '22 at 22:08
@vsync no particular reason. I don't believe the order matters in this case. – Giwan Jan 25 '22 at 18:57

score 17 · Answer 2 · answered Jul 30 '19 at 18:41

17

I've changed this
import createHistory from 'history/createBrowserHistory'

to this import { createBrowserHistory } from 'history'

answered Jul 30 '19 at 18:41

CrsCaballero

2,124
1
24
31

score 3 · Answer 3 · answered May 13 '19 at 08:04

In my code, this error occurs when running a unit test. An enzyme or jest is possible by interpreting the ES6 code differently. Make in the package history export default.

My import code now

import { createBrowserHistory } from 'history'

Here is the full history.js code

import { createBrowserHistory } from 'history';
export default createBrowserHistory();

score 2 · Answer 4 · answered Aug 30 '22 at 10:01

2

Having the solution approved above wasn't enough for me:

import { createBrowserHistory } from "history";
export default createBrowserHistory();

I solved this issue updating react-router and react-router-dom to:

"react-router": "^5.3.3",
"react-router-dom": "^5.3.3"

answered Aug 30 '22 at 10:01

Ivan Sanchez

546
5
17

Mine was the same, the above fix alone wasn't enough. Mine (for node 16) required: "react-router": "4.3.1", "react-router-dom": "4.3.1", – The Coder Sep 09 '22 at 00:15

score 1 · Answer 5 · answered Aug 05 '19 at 11:24

1

goto node_modules > dva > lib > index.js

index.js

source from: https://www.cnblogs.com/fairylee/p/11198868.html

answered Aug 05 '19 at 11:24

anson

1,436
14
16

score 1 · Answer 6 · answered Sep 01 '20 at 04:26

Using the suggestion I was able to get rid of the error in the console on render.

// NO IMPORT ABOVE  (just set the import directly to a variable)
    const history = require("history").createBrowserHistory()


// then you can 
if( *some-requirement*){
history.push("/desiredRoute")
}. 
// right from your App.js

score 1 · Answer 7 · edited May 06 '21 at 11:19

1

Try this: Install this version of react-router-dom@5.2.0. If there is an error, install webpack@3.1.0.

edited May 06 '21 at 11:19

Michael Rovinsky

6,807
7
15
30

answered May 05 '21 at 21:59

d3zzi5

11
2

score 0 · Answer 8 · answered Apr 02 '19 at 04:44

0

just create new file for history and add

    import createHistory from 'history/createBrowserHistory';
    export default createHistory();

import history from 'the file path created for history it will work'

answered Apr 02 '19 at 04:44

Kishan Jaiswal

644
3
14

Can i just directly import it and use it? updted my answer above pls look – Nick Bb Apr 02 '19 at 05:14
yes you can direclty import it in App component and attach it to ConnectedRouter – Kishan Jaiswal Apr 02 '19 at 05:20
@kishanJiswal Can you see the code above? i updated my configStore.js and it still shows the same error – Nick Bb Apr 02 '19 at 05:22
i will suggest to keep separate file for history and import and use – Kishan Jaiswal Apr 02 '19 at 05:26
@kishanJiswal look at the edit code above. is that what you meant? It didnt work – Nick Bb Apr 02 '19 at 05:35
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/191060/discussion-between-nick-bb-and-kishan-jaiswal). – Nick Bb Apr 02 '19 at 05:42
Did you find a solution to this? I am facing .a similar issue – prgrmr Apr 10 '19 at 17:56

score 0 · Answer 9 · answered Dec 14 '20 at 02:10

This import worked for me var createHistory = require('history').createBrowserHistory; instead of this import import createHistory from 'history/createBrowserHistory'; The history file is given below:

var createHistory = require('history').createBrowserHistory;
export default createHistory();

score 0 · Answer 10 · edited Jan 07 '21 at 09:07

0

Update the React-Router-Dom library

If you're using yarn

write => yarn add React-Router-Dom

it will automatically update to the current version of Router library

Like this

edited Jan 07 '21 at 09:07

mohabbati

1,162
1
13
31

answered Jan 07 '21 at 06:08

Milan Vasoya

9
1

score 0 · Answer 11 · edited Jan 08 '22 at 16:28

0

try this

go to node_modules/history/createBrowserHistory and do as the warning says
delete this ('createBrowserHistory') replace it with this in new line: require("history").createBrowserHistory

then

go to node_modules/history/createHashHistory
delete ('createHashHistory') replace it with this in new line: require("history").createHashHistory

edited Jan 08 '22 at 16:28

Peter Csala

17,736
16
35
75

answered Jan 08 '22 at 10:55

Mohamed Saeed

1
1

score 0 · Answer 12 · answered Apr 13 '22 at 17:12

you need an API migration,

// createBrowserHistory  was createHistory in createBrowserHistory
import { createBrowserHistory as history} from 'history'

import { Provider } from "react-redux";
import store from "./store/store";

const AppContainer = () => (
    <Router history={history}>
        <Provider store={store}>
             <Route path="/" component={App} />
        </Provider>
    </Router>
);

Thx to @CrsCaballero's

React require("history").createBrowserHistory` instead of `require("history/createBrowserHistory")

12 Answers12