错误：为 URL About (src\pages\About.js) 导出 HTML 失败：不变量失败

Posted 2023-03-06

【中文标题】错误：为 URL About (src\\pages\\About.js) 导出 HTML 失败：不变量失败

【英文标题】：Error: Failed exporting HTML for URL About (src\pages\About.js): Invariant failed错误：为 URL About (src\pages\About.js) 导出 HTML 失败：不变量失败

【发布时间】：2019-08-07 16:26:09

【问题描述】：

我将Switch 路由器组件添加到我的项目中以设置默认页面。 当我构建它时，会出现以下错误：

  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

运行站点时不会发生这种情况 (npm run start)。

更奇怪的是，仅在构建站点时发生，对于某些页面。即使我在构建之间没有更改任何内容，受影响的页面也会在每个构建中发生变化。

这里是路由器声明： 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

环境：react-static v6.3.6

【参考方案1】：

像这样删除路由器

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

因为 react-static-plugin-react-router 已经用 Router 封装了它

【讨论】：

我遇到了同样的问题。原始错误堆栈跟踪中是否有某些内容表明这是由额外的 标记引起的？