Skip to content

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

Open
@nontachaiwebdev

Description

@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.

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

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

Thankyou for help.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions