Cannot call file using createBrowserHistory history.js

[niklashhh]

Version

History version is 4.9.0

Description

Here is my setup, using webpack with react-router-dom. Trying to create a global file exporting a history object, but it is causing a lot of trouble...

package.json

{
  "name": "frontend",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "history": "^4.10.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.19.0",
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

index.jsx

import React from 'react';
import { render } from 'react-dom';
import App from './containers/App';

render(<App />, document.getElementById('app'));

containers/App.jsx

import React from 'react';
import { Router } from 'react-router-dom';
import history from '../history';

function HomeButton() {
  function handleClick() {
    history.push('/home');
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

const App = () => (
  <Router history={history}>
    <HomeButton />
  </Router>
);

export default App;

history.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

webpack.config.js

const HtmlWebPackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './src/index.jsx',
  resolve: {
    extensions: ['.js', '.jsx'],
    modules: [
      path.join(__dirname, 'src'),
      'node_modules',
    ],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          query: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
            ],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: 'src/public/index.html',
      filename: 'index.html',
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, '../src/public'),
    historyApiFallback: true,
    disableHostCheck: true,
    host: process.env.HOST || '0.0.0.0',
    port: process.env.PORT || 8000,
  },
};

And here's what webpack build output shows:

WARNING in ./src/history.js 2:15-35
"export 'createBrowserHistory' was not found in 'history'
 @ ./src/containers/App.jsx
 @ ./src/index.jsx

WARNING in ./node_modules/react-router-dom/esm/react-router-dom.js 29:20-40
"export 'createBrowserHistory' was not found in 'history'
 @ ./src/containers/App.jsx
 @ ./src/index.jsx

WARNING in ./node_modules/react-router-dom/esm/react-router-dom.js 76:20-37
"export 'createHashHistory' was not found in 'history'
 @ ./src/containers/App.jsx
 @ ./src/index.jsx

WARNING in ./node_modules/react-router-dom/esm/react-router-dom.js 109:34-48
"export 'createLocation' was not found in 'history'
 @ ./src/containers/App.jsx
 @ ./src/index.jsx

WARNING in ./node_modules/react-router/esm/react-router.js 280:19-33
"export 'createLocation' was not found in 'history'
 @ ./node_modules/react-router-dom/esm/react-router-dom.js
 @ ./src/containers/App.jsx
 @ ./src/index.jsx

WARNING in ./node_modules/react-router/esm/react-router.js 295:27-41
"export 'createLocation' was not found in 'history'
 @ ./node_modules/react-router-dom/esm/react-router-dom.js
 @ ./src/containers/App.jsx
 @ ./src/index.jsx

WARNING in ./node_modules/react-router/esm/react-router.js 563:45-59
"export 'createLocation' was not found in 'history'
 @ ./node_modules/react-router-dom/esm/react-router-dom.js
 @ ./src/containers/App.jsx
 @ ./src/index.jsx

WARNING in ./node_modules/react-router/esm/react-router.js 582:40-54
"export 'createLocation' was not found in 'history'
 @ ./node_modules/react-router-dom/esm/react-router-dom.js
 @ ./src/containers/App.jsx
 @ ./src/index.jsx

WARNING in ./node_modules/react-router/esm/react-router.js 134:20-39
"export 'createMemoryHistory' was not found in 'history'
 @ ./node_modules/react-router-dom/esm/react-router-dom.js
 @ ./src/containers/App.jsx
 @ ./src/index.jsx

WARNING in ./node_modules/react-router/esm/react-router.js 503:51-61
"export 'createPath' was not found in 'history'
 @ ./node_modules/react-router-dom/esm/react-router-dom.js
 @ ./src/containers/App.jsx
 @ ./src/index.jsx

WARNING in ./node_modules/react-router/esm/react-router.js 297:13-30
"export 'locationsAreEqual' was not found in 'history'
 @ ./node_modules/react-router-dom/esm/react-router-dom.js
 @ ./src/containers/App.jsx
 @ ./src/index.jsx
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/public/index.html] 293 bytes {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Compiled with warnings.

When opening the web page I get this error (and the history is clearly not working)

TypeError: Object(...) is not a function
    <anonymous> webpack:///./src/history.js?:4

Workaround

But when I rename the history.js file to notHistory.js and rename the import in App.jsx, the history does work and the module exports the history object as expected!

The workaround seems ugly and it indicates that there is probably a mistake in my webpack config, any ideas?

[andares]

I have same problem 😂

[shannonrothe]

Facing the same problem. Is there a fix for this?

[MikeDrewitt]

I'm fighting the same issue right now. I suspect that there's some kind of version mismatch going on, but thus far have been unsuccessful in determining the issue.

[jiangmingwen]

I have same problem 😂 react-router-dom@5.1.2 is uncompatible, trying to install 4.x

[MikeDrewitt]

I'll leave this here since it might help someone else with this issue, although I don't think it was related to this library at all. The issue I was having was my history.js was living in the same directory as my index.js, and for whatever reason webpack was picking up the history file at build time. Moving the createBrowserHistory call to a subdirectory fixed this issue for me.

This was likely caused by my webpack configuration, but I figured I'd leave this info here for the next poor soul should someone else run into this issue. If someone knows how/why this problem was actually happening, I'd love to hear it.

[dance-dance-banana-frenzy]

I just ran into the same problem while trying to upgrade to webpack 5. I thought it was my babel or webpack configuration. I found this bug, renamed it to browserHistory.js, and everything worked. Thank you!