Error: Failed exporting HTML for URL About (src\pages\About.js): Invariant failed

Question

I add Switch router component to my project in order to set default page. When i build it gives the following error:

  Error: Failed exporting HTML for URL About (src\pages\About.js): Invariant failed

  - tiny-invariant.cjs.js:11 invariant
    [byte-artisan]/[tiny-invariant]/dist/tiny-invariant.cjs.js:11:11

  - history.min.js:1 Object.createBrowserHistory
    [byte-artisan]/[history]/cjs/history.min.js:1:3626

  - react-router-dom.min.js:1 new t
    [byte-artisan]/[react-router-dom]/cjs/react-router-dom.min.js:1:1036

  - react-dom-server.node.production.min.js:33 c
    [byte-artisan]/[react-dom]/cjs/react-dom-server.node.production.min.js:33:323

  - react-dom-server.node.production.min.js:36 Sa
    [byte-artisan]/[react-dom]/cjs/react-dom-server.node.production.min.js:36:1

  - react-dom-server.node.production.min.js:41 a.render
    [byte-artisan]/[react-dom]/cjs/react-dom-server.node.production.min.js:41:467

  - react-dom-server.node.production.min.js:41 a.read
    [byte-artisan]/[react-dom]/cjs/react-dom-server.node.production.min.js:41:58

  - react-dom-server.node.production.min.js:53 renderToString
    [byte-artisan]/[react-dom]/cjs/react-dom-server.node.production.min.js:53:83

  - exportRoute.js:127 renderToStringAndExtract
    [byte-artisan]/[react-static]/src/static/exportRoute.js:127:21

  - exportRoute.js:191 renderToStringAndExtract
    [byte-artisan]/[react-static]/src/static/exportRoute.js:191:15

  - runtime.js:62 tryCatch
    [byte-artisan]/[regenerator-runtime]/runtime.js:62:40

  - runtime.js:288 Generator.invoke [as _invoke]
    [byte-artisan]/[regenerator-runtime]/runtime.js:288:22

  - runtime.js:114 Generator.prototype.(anonymous function) [as next]
    [byte-artisan]/[regenerator-runtime]/runtime.js:114:21

  - exportRoute.js:52 asyncGeneratorStep
    [byte-artisan]/[react-static]/lib/static/exportRoute.js:52:103

  - exportRoute.js:54 _next
    [byte-artisan]/[react-static]/lib/static/exportRoute.js:54:194

  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7

This doesn't happen when running the site (npm run start).

More odd, happens only when build the site, for some pages. The pages affected changes every build even if i don't change anything between builds.

Here the router declaration: App.js

import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch,
    Redirect
} from 'react-router-dom'

//pages
import './app.css'
import About from './pages/About'

function page404() {
    return (
        <div>
            <h2>page404</h2>
        </div>
    );
}

function App() {
    return (
        <Router>
            <div>
                <ul className="menu-bar">
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                </ul>
                <Switch>
                    <Route path="/About" component={About} />
                    <Route component={page404} />
                </Switch>
            </div>
        </Router>    
    )
}
export default App

Environment: react-static v6.3.6

score 1 · Accepted Answer · answered Apr 11 '19 at 17:18

remove Router like this

function App() {
    return (
            <div>
                <ul className="menu-bar">
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                </ul>
                <Switch>
                    <Route path="/About" component={About} />
                    <Route component={page404} />
                </Switch>
            </div> 
    )
}
export default App

because react-static-plugin-react-router has already wrappered it with Router

I had the same issue. Is there something in the original error stacktrace that indicated that this is caused by an extra tag? — okhobb, Apr 19 '21 at 07:53

Error: Failed exporting HTML for URL About (src\pages\About.js): Invariant failed

1 Answers1