History: question about history/createBrowserHistory warning

[wengdiiiy]

After upgrading history version 4.7.2 to 4.9.0, we cannot use history/createBrowserHistory.

4.7.2 --> OK.

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

But, 4.9.0 --> Warning

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

Anything changed internally? I wonder why.
Thank you.

[pshrmn]

4.9 uses Rollup to produce a single module.

[rafael-sousa]

I'm getting the same warning though I'm using the suggested manner.

[wildcart]

I have the same problem and I am not sure how to fix this, like Rafael I am using the suggested import:

import { createBrowserHistory as createHistory } from 'history'
const history: History = createHistory()

This is as far I can tell the officially recommended import. I rename the 'import' because it's the smallest diff, and we are required to change as few lines as possible when creating pull request (I previously had import createHistory from 'history/createBrowserHistory';).

How do I fix the warning reported above and how does the information '4.9 uses Rollup to produce a single module' help in the regard? I may be missing the obvious here.

I forgot to mention that I am getting a second warning:

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

However, I never include the 'hash' history function.

Thanks for considering.

[mjackson]

That warning is being generated by code somewhere in your codebase that is doing require('history/createHashHistory'). Specifically, it is loading this file which emits that warning in a CommonJS environment.

It may not be you making the require, but one of your dependencies or some other code you're using that is doing it. You can try adding a breakpoint to your code to see where the require is coming from.

[tkorona-OH]

The warning may also be caused due to how you are importing the method createBrowserHistory. We were receiving the warning message for this but we do not have require('history/createBrowserHistory') specifically coded anywhere in our code base. We use the following import:

import createHistory from 'history/createBrowserHistory'

changing to the following eliminated the warning:

import { createBrowserHistory } from 'history'

[makhnatkin]

That warning is being generated by code somewhere in your codebase that is doing require('history/createHashHistory'). Specifically, it is loading this file which emits that warning in a CommonJS environment.

It may not be you making the require, but one of your dependencies or some other code you're using that is doing it. You can try adding a breakpoint to your code to see where the require is coming from.

Hello!
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'

[khaziwallis]

i was having same issue, while trying to unit testing routing file. was getting warning about createHashHistory, createMemoryHistory and createBrowserHistory in different way, where i was using correct way of import.
later i try to upgrade the 'react-router-dom' and its corresponding @types. which worked for me, no more warnings.

[sultanfendonus]

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

// history.js

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

[kriscodes]

The 2 lines of code that match the error are inside:

node_modules/react-router-dom/BrowserRouter.js
node_modules/react-router-dom/HashRouter.js

modify 2 lines of code that match the error.

require("history/createBrowserHistory")
change to
require('history').createBrowserHistory();

same with the HashRouter.js file.

[fitthienngoc]

Find all file js have "history/createBrowserHistory" and replace

createHistory -> createBrowserHistory
history/createBrowserHistory -> history

Detail https://heavenpearlit.blogspot.com/2019/06/fix-please-use-requirehistorycreatebrow.html

[csantiago132]

this works for me

import * as createHistory from "history";

/**
 * Creates a history object that uses the HTML5 history API including
 * pushState, replaceState, and the popstate event.
 *
 */
const history = createHistory.createBrowserHistory();

export default history;

[vndevil]

change -> import createHistory from 'history/createBrowserHistory';
to -> import { createBrowserHistory } from 'history';

Use change -> const history = createHistory();
To -> const history = createBrowserHistory();