How to fix Uncaught DOMException: Failed to execute 'pushState' on 'History'

Question

I have this little app that works fine in development mode with webpack-dev-server, but when I use the bundled files from the dist folder generated by the production mode, all I get in the browser is this error:

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///C:/' cannot be created in a document with origin 'null' and URL 'file:///C:/Users/cristi/work/react_test_ground/dist/index.html'.

How can I solve this pushState problem?

Initially I tried to split the code with React.lazy and Suspense, since webpack was throwing this error:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  2c7b7b6becb423b8f2ae.bundle.js (413 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (413 KiB)
      2c7b7b6becb423b8f2ae.bundle.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of
your application.

But the problem persists.

You can see the code and the full repository here: https://github.com/cristiAndreiTarasi/temporary

App.js

import React, { Fragment, Suspense, lazy } from 'react';
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Blog = lazy(() => import('./Blog'));
const Contact = lazy(() => import('./Contact'));

export default () => (
    <BrowserRouter>
        <div>
            <ul>
                <li><Link to='/'>Home</Link></li>
                <li><Link to='/blog'>Blog</Link></li>
                <li><Link to='/contact'>Contact</Link></li>
            </ul>

            <Suspense fallback={<p>Loading...</p>}>
                <Switch>
                    <Route exact path='/' component={Home} />
                    <Route path='/blog' component={Blog} />
                    <Route path='/contact' component={Contact} />
                </Switch>
            </Suspense>
        </div>
    </BrowserRouter>   
);

The format of the other components is this one:

import React from 'react';

export default () => (
    <div>
        <h1>Hello from the Blog</h1>
        <img src='../images/landscape-art_large.jpg' />
    </div>
);

I want to get the same result that I,m getting from the development mode, from the bundled files generated by the production mode.

Jea

Answer 1

You should open your files via an Webserver. Because you cannot change location history on the file:// api.

Weald

I was able to make it work with XAMPP on the localhost, but after I had uploaded the same files on the public_html with FileZilla I get the same problem. Do you have any sugestion about how I could make it work on my portofolio website on the hosting provider's server? I'm with justHost. Thank you. – Jea

Did you open the page via ftp:// protocol? Because you should open the page direktly. HTTP://example.tld – Weald

This works, After serving the build folder from the web server, no errors, and working properly. – Pepper

Answer 2

You can use HashRouter or MemoryRouter instead BrowserRouter.

Just replace this line:

import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';

with:

import { HashRouter, Route, Link, Switch } from 'react-router-dom';

or with:

import { MemoryRouter, Route, Link, Switch } from 'react-router-dom';

Then open your builded index.html file in the browser and everything should work like using localhost / dev server.

Mutt

Answer 3

I had this error (notwithstanding at my react app) because i provided instead of searchParams url, i put the whole url into the history.pushState http://localhost:9090/admin/model-type?PageNumber=2 but search query is expected ?PageNumber=2

history.pushState(
        {[paramKey]: paramValue},
        'page title',
        url
      )

Frigging

This worked for me and makes a lots of sense when you think about it – Mazel

Answer 4

This is 2024, if you have this same issue using nextjs 14. You need to pass the query path not the full url path. In my case, I'm using passing state values

import { usePathname, useRouter } from 'next/navigation';
const router = useRouter();
const pathname = usePathname();
search_term = 'eric'
history.pushState(
        {data: api_resp_data},
        'page title',
        `/your_sub_path?query=${search_term.trim()}`
      )
router.push('/your_sub_path');

Coppery