title: How to fix Uncaught DOMException: Failed to execute 'pushState' on 'History'
body: <p>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:</p>
  
  <pre><code>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'.
  </code></pre>
  
  <p>How can I solve this pushState problem?</p>
  
  <p>Initially I tried to split the code with React.lazy and Suspense, since webpack was throwing this error:</p>
  
  <pre><code>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.
  </code></pre>
  
  <p>But the problem persists.</p>
  
  <p>You can see the code and the full repository here: <a href="https://github.com/cristiAndreiTarasi/temporary" rel="noreferrer">https://github.com/cristiAndreiTarasi/temporary</a></p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Fragment, Suspense, lazy } from 'react';
  import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';
  
  const Home = lazy(() =&gt; import('./Home'));
  const Blog = lazy(() =&gt; import('./Blog'));
  const Contact = lazy(() =&gt; import('./Contact'));
  
  export default () =&gt; (
      &lt;BrowserRouter&gt;
          &lt;div&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;Link to='/'&gt;Home&lt;/Link&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;Link to='/blog'&gt;Blog&lt;/Link&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;Link to='/contact'&gt;Contact&lt;/Link&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;Suspense fallback={&lt;p&gt;Loading...&lt;/p&gt;}&gt;
                  &lt;Switch&gt;
                      &lt;Route exact path='/' component={Home} /&gt;
                      &lt;Route path='/blog' component={Blog} /&gt;
                      &lt;Route path='/contact' component={Contact} /&gt;
                  &lt;/Switch&gt;
              &lt;/Suspense&gt;
          &lt;/div&gt;
      &lt;/BrowserRouter&gt;   
  );
  </code></pre>
  
  <p><strong>The format of the other components is this one:</strong></p>
  
  <pre><code>import React from 'react';
  
  export default () =&gt; (
      &lt;div&gt;
          &lt;h1&gt;Hello from the Blog&lt;/h1&gt;
          &lt;img src='../images/landscape-art_large.jpg' /&gt;
      &lt;/div&gt;
  );
  </code></pre>
  
  <p>I want to get the same result that I,m getting from the development mode, from the bundled files generated by the production mode.</p>