1. 首页
  2. 问答
  3. [vercel/next.js]违反不变性：无法找到 ID 为 XX 的元素

[vercel/next.js]违反不变性：无法找到 ID 为 XX 的元素

2024-05-15 825 views
0

尝试在 AWS EC2 上运行 next.js 时，出现以下错误

Invariant Violation: Unable to find element with ID 109.
    at invariant (https://server.com/_next/-/commons.js:127:319)
    at precacheChildNodes (https://server.com/_next/-/commons.js:153:42)
    at getNodeFromInstance (https://server.com/_next/-/commons.js:162:41)
    at ReactDOMComponent.trapBubbledEventsLocal (https://server.com/_next/-/commons.js:10891:14)
    at CallbackQueue.notifyAll (https://server.com/_next/-/commons.js:1094:22)
    at ReactReconcileTransaction.close (https://server.com/_next/-/commons.js:14780:26)
    at ReactReconcileTransaction.closeAll (https://server.com/_next/-/commons.js:357:888)
    at ReactReconcileTransaction.perform (https://server.com/_next/-/commons.js:356:621)
    at batchedMountComponentIntoNode (https://server.com/_next/-/commons.js:2006:15)
    at ReactDefaultBatchingStrategyTransaction.perform (https://server.com/_next/-/commons.js:35
更多信息
  • 运行本地服务器时不会发生这种情况
  • 总是在直接请求页面而不是通过 AJAX 请求时发生
  • 可以通过挂载后渲染一些组件来解决
例如。下一个/头 
      {
        this.state.mounted &&
        <Head>
          <title>{this.props.title} | Website</title>
          <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        </Head>
      }
重现步骤：

只需创建一个页面next/Head

其他
  • Cloudflare NGINX 作为反向代理
  • Next.js 2.0.0-beta.17
  • Node.js v7.3.0

shaykyasin

回答

5

@arunoda 这怎么是一个问题而不是一个错误？仅创建一个带有 a 的页面next/Head就会导致弹出错误。

shaykyasin

2

@shaykyasin 我无法重现这个。这似乎与您构建应用程序的方式有关。我们需要一种重现方法来将其标记为错误。您能给我们发送一个示例仓库吗？

arunoda

8

我遇到了同样的问题。就像@shaykyasin 一样，运行本地服务器时不会发生这种情况。但是，当通过 AJAX 请求页面时，我也看到了问题。

aesopwolf

8

@arunoda 我今天遇到了这个问题。这是我的仓库：git@gitlab.com:holechihieu/pp.git

hieuhlc

8

在这里遇到同样的问题。

matzero

2

切换到 https 后会出现此错误。

MaxSvargal

9

@arunoda 这是data-reactid正在开发的内容：

图像

lorensr

1

我的问题是由于 HTML 无效 - 通过在<tbody>我的内部添加一个修复<table>

lorensr

8

我也遇到了这个错误，但我能够通过这样做以某种方式删除它：

无法找到： 屏幕截图 2017-06-10 12 53 00 pm

完全可以找到： 屏幕截图 2017-06-10 12 52 00 pm

？‍♂️

JulianKnodt

2

仅当我从服务器渲染组件时，我才收到此错误。就我而言，这是因为我忘记将“jsx”添加到样式标签之一。

AlvaroBernalG

8

由于样式标签，我也可能会遇到此错误。我省略了 jsx 属性，因为我想使用其他文件或变量中的 css。直到今天一切正常。我正在寻找修复。 @AlvaroBernalG 您对这些样式标签有什么建议吗？

kunokdev

3

让我们关闭它，因为它不可重现。如果可以重现，将重新打开。

timneutkens

4

@kunokdev 对延迟表示歉意。我目前正在做的是拥有一个 theme.js 文件，在其中我基本上导出所有与主题相关的单独样式（颜色、字体系列、字体大小、阴影），以及一个包含我附加到的所有全局类的变量我的布局组件使用全局属性。我的每个组件都有自己的特定样式，这些样式是使用范围样式标签定义的。但话又说回来，我不确定这是否是最有效的方法。我目前正在通过一个宠物项目学习。

AlvaroBernalG

5

我在服务器渲染时通过将 li 作为另一个 li 的后代而导致了此错误。如果您在开发中出现此警告，则在尝试服务器渲染时将会出现此错误。

StevePavlin

4

就我而言，<noscript>是导致此错误的原因。为了避免这种情况，我不得不使用dangerouslySetInnerHTML：

...
const staticMarkup = ReactDOMServer.renderToStaticMarkup(markup)

return <noscript dangerouslySetInnerHTML={{ __html: staticMarkup }} />

（上述解决方案在https://github.com/zeit/next.js/pull/2767/files中找到）

caspg

6

我遇到此错误，并且仅发生在已部署的产品应用程序上，但不会出现在本地（甚至是警告）

deejayxd07

7

对我来说，出现这个问题是因为我通过 React 和第 3 方库渲染子项

<Mapbox>{mapLoaded ? children : null}</Mapbox>

地图代码仅加载客户端，并且需要容器 div 引用，以便它可以<canvas>在页面加载后注入其元素。

通过将子级移动到为画布保留的 div 之外，React 能够渲染自己的子级，而不会被通过第 3 方注入的节点中断

<div>
  <Mapbox /> {/* <- this element reserverd for canvas / element injection not handled by react */}
  {mapLoaded ? children : null}
</div>

如果您使用执行 dom 注入的第 3 方库，则始终在其外部渲染 React 子项会更安全。

lfender6445

1

似乎只有当我热链接到图像时才会发生。评论掉了图片，就走了。现在图像正在从 /static/ 提供，所以我们将看看它是否返回。

YoungElPaso

8

就我而言，我使用了嵌套的 html p (p in p) 标签，并且在 webpack 开发服务器中工作时没有错误，当我构建项目并在 express 和 ssr （服务器端渲染）中运行代码时，会记录此错误。即使在此组件中禁用 ssr，问题也没有解决。只需更改父标签即可<section>解决问题。

ahmdilloo

 相关问题