Could not find a valid element for given id or className.

[nontachaiwebdev]

Hi!!! Hope you guys are doing well.

I have a problem on my setup for this project on the fresh next.js repository.

My stack

"next": "^10.0.7",    
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-email-editor": "^1.1.1"

I'm getting problem when I try to refresh page. And found this problem

react-dom.development.js?61bb:67 Warning: Prop `id` did not match. Server: "editor-7" Client: "editor-1"
    at div
    at div
    at _default (webpack-internal:///./node_modules/react-email-editor/es/index.js:26:5)
    at div
    at HomePage (webpack-internal:///./pages/index.js:18:76)
    at App (webpack-internal:///./node_modules/next/dist/pages/_app.js:76:5)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:149:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:637:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:768:24)
printWarning @ react-dom.development.js?61bb:67
error @ react-dom.development.js?61bb:43
warnForPropDifference @ react-dom.development.js?61bb:8824
diffHydratedProperties @ react-dom.development.js?61bb:9645
hydrateInstance @ react-dom.development.js?61bb:10400
prepareToHydrateHostInstance @ react-dom.development.js?61bb:14616
completeWork @ react-dom.development.js?61bb:19458
completeUnitOfWork @ react-dom.development.js?61bb:22815
performUnitOfWork @ react-dom.development.js?61bb:22787
workLoopSync @ react-dom.development.js?61bb:22707
renderRootSync @ react-dom.development.js?61bb:22670
performSyncWorkOnRoot @ react-dom.development.js?61bb:22293
scheduleUpdateOnFiber @ react-dom.development.js?61bb:21881
updateContainer @ react-dom.development.js?61bb:25482
eval @ react-dom.development.js?61bb:26021
unbatchedUpdates @ react-dom.development.js?61bb:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js?61bb:26020
hydrate @ react-dom.development.js?61bb:26086
renderReactElement @ index.tsx?8abf:521
doRender @ index.tsx?8abf:787
_callee2$ @ index.tsx?8abf:416
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:293
eval @ runtime.js?96cf:118
asyncGeneratorStep @ asyncToGenerator.js?c973:3
_next @ asyncToGenerator.js?c973:25
eval @ asyncToGenerator.js?c973:32
eval @ asyncToGenerator.js?c973:21
_render @ index.js:514
render @ index.js:451
eval @ next-dev.js?53bc:85
eval @ fouc.js?937a:14
requestAnimationFrame (async)
displayContent @ fouc.js?937a:5
eval @ next-dev.js?53bc:84
Promise.then (async)
eval @ next-dev.js?53bc:31
eval @ next-dev.js?53bc:31
./node_modules/next/dist/client/next-dev.js @ main.js?ts=1614933303898:945
__webpack_require__ @ webpack.js?ts=1614933303898:873
checkDeferredModules @ webpack.js?ts=1614933303898:46
webpackJsonpCallback @ webpack.js?ts=1614933303898:33
(anonymous) @ webpack.js?ts=1614933303898:1015
(anonymous) @ webpack.js?ts=1614933303898:1023
Show 2 more frames
embed.js?2:1 Uncaught Error: Could not find a valid element for given id or className.
    at e.value (embed.js?2:1)
    at e.value (embed.js?2:1)
    at new e (embed.js?2:1)
    at a.value (embed.js?2:1)
    at _this.loadEditor (index.js?50c8:42)
    at runCallbacks (loadScript.js?4f5c:27)
    at HTMLScriptElement.embedScript.onload (loadScript.js?4f5c:40)

I found this code on the file.

react-email-editor/src/index.js

Line 11 in d1bdf00

this.editorId = `editor-${++lastEditorId}`;

I'm not sure what is intention to count up the id.

Thankyou for help.

[bemlw]

Same issue here, same setup. Just can't get it working at all. Could not find a valid element for given id or className

[MelihOzyurt]

Hi, is the problem solved?
I am also having the same problem.

"next": "^11.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-email-editor": "^1.3.0",

[kiguri]

I also had a similar error and haven't found an alternative

"next": "^11.0.0", "react": "17.0.2", "react-dom": "17.0.2", "react-email-editor": "^1.3.0"

[kiguri]

I resolved this error by using dynamic import in Next.

Here is my code:

Editor component:

import React, { useRef } from 'react'

import EmailEditor from 'react-email-editor'

export default function Editor(props) {
  const emailEditorRef = useRef(null)

  const exportHtml = () => {
    emailEditorRef.current.editor.exportHtml((data) => {
      const { design, html } = data
      console.log('exportHtml', html)
    })
  }

  const onLoad = () => {}

  return (
    <div>
      <div>
        <button onClick={exportHtml}>Export HTML</button>
      </div>

      <EmailEditor ref={emailEditorRef} onLoad={onLoad} />
    </div>
  )
}

In the page that use Editor component:

import dynamic from 'next/dynamic'

const Editor = dynamic(() => import('@/components/Editor'), { ssr: false })

export default function EmailPage() {
  return  <Editor />
}

[davidaik]

The same thing is happening for me on version 1.6.0. This is happening, I'd say, more than 50% of the time that I load/refresh the page.

[davidaik]

[LinhGithub]

you should add property: editorId - String HTML div id of the container where the editor will be embedded (optional)