Skip to content
This repository has been archived by the owner on Mar 29, 2024. It is now read-only.

My app crash #222

Open
baxa29102001 opened this issue Jun 16, 2021 · 3 comments
Open

My app crash #222

baxa29102001 opened this issue Jun 16, 2021 · 3 comments

Comments

@baxa29102001
Copy link

baxa29102001 commented Jun 16, 2021

Hi I am new for medium draft i have issue getIn of undefined

Warning

react-dom.development.js:67 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

  • Move data fetching code or side effects to componentDidUpdate.
  • If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state
  • Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: Toolbar
printWarning @ react-dom.development.js:67
warn @ react-dom.development.js:34
push../node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:11530
flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:23822
commitRootImpl @ react-dom.development.js:23005
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
hydrate @ react-dom.development.js:26086
renderReactElement @ index.tsx:524
doRender @ index.tsx:793
_callee2$ @ index.tsx:425
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_render @ main.js?ts=1623828649621:9084
render @ main.js?ts=1623828649621:9021
(anonymous) @ next-dev.js:85
(anonymous) @ fouc.js:14
requestAnimationFrame (async)
displayContent @ fouc.js:5
(anonymous) @ next-dev.js:84
Promise.then (async)
./node_modules/next/dist/client/next-dev.js @ next-dev.js:31
options.factory @ react refresh:8
webpack_require @ bootstrap:25
webpack_exec @ main.js?ts=1623828649621:47319
(anonymous) @ main.js?ts=1623828649621:47320
webpackJsonpCallback @ jsonp chunk loading:559
(anonymous) @ main.js?ts=1623828649621:1
react-dom.development.js:67 Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

  • Move data fetching code or side effects to componentDidUpdate.
  • Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: DraftEditor

Prop id did not match. Server: "placeholder-33j6k" Client: "placeholder-3q0mk"
at div
at div
at DraftEditorPlaceholder (http://localhost:3000/_next/static/chunks/pages/new-story.js?ts=1623828649621:10037:5)
at div
at DraftEditor (http://localhost:3000/_next/static/chunks/pages/new-story.js?ts=1623828649621:8546:5)
at div
at div
at MediumDraftEditor (http://localhost:3000/_next/static/chunks/pages/new-story.js?ts=1623828649621:34055:5)
at div
at NewStory (http://localhost:3000/_next/static/chunks/pages/new-story.js?ts=1623828649621:215:64)
at Story
at Provider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1623828649621:3000:20)
at MyApp (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1623828649621:172:24)
at ErrorBoundary (http://localhost:3000/_next/static/chunks/main.js?ts=1623828649621:742:47)
at ReactDevOverlay (http://localhost:3000/_next/static/chunks/main.js?ts=1623828649621:858:23)
at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1623828649621:8719:5)
at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1623828649621:9207:24)
at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1623828649621:9343:25)

getUpdatedSelectionState.js:33 Uncaught TypeError: Cannot read property 'getIn' of undefined at getUpdatedSelectionState (getUpdatedSelectionState.js:33) at getDraftEditorSelectionWithNodes (getDraftEditorSelectionWithNodes.js:88) at getDraftEditorSelection (getDraftEditorSelection.js:33) at editOnSelect (editOnSelect.js:31) at DraftEditor.react.js:216 at HTMLUnknownElement.callCallback (react-dom.development.js:3945) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994) at invokeGuardedCallback (react-dom.development.js:4056) at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070) at executeDispatch (react-dom.development.js:8243) at processDispatchQueueItemsInOrder (react-dom.development.js:8275) at processDispatchQueue (react-dom.development.js:8288) at dispatchEventsForPlugins (react-dom.development.js:8299) at react-dom.development.js:8508 at batchedEventUpdates$1 (react-dom.development.js:22396) at batchedEventUpdates (react-dom.development.js:3745) at dispatchEventForPluginEventSystem (react-dom.development.js:8507) at attemptToDispatchEvent (react-dom.development.js:6005) at dispatchEvent (react-dom.development.js:5924) at unstable_runWithPriority (scheduler.development.js:468) at runWithPriority$1 (react-dom.development.js:11276) at discreteUpdates$1 (react-dom.development.js:22413) at discreteUpdates (react-dom.development.js:3756) at dispatchDiscreteEvent (react-dom.development.js:5889)

@brijeshb42
Copy link
Owner

You should not try to render the editor on server. Instead, lazy load it in browser using dynamic import and render it on client.

@baxa29102001
Copy link
Author

You should not try to render the editor on server. Instead, lazy load it in browser using dynamic import and render it on client.

Yeah it is working but editoRef.current.focus() isnt working

TypeError: refsEditor.current.focus is not a function

@brijeshb42
Copy link
Owner

brijeshb42 commented Jun 17, 2021

Can you paste a snippet, specifically how the refsEditor is being assigned ?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants