medium-draft icon indicating copy to clipboard operation
medium-draft copied to clipboard
verified publisher icon brijeshb42

My app crash

Open baxa29102001 opened this issue 4 years ago • 3 comments

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)

baxa29102001 avatar Jun 16 '21 07:06 baxa29102001

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

brijeshb42 avatar Jun 16 '21 19:06 brijeshb42

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

baxa29102001 avatar Jun 17 '21 15:06 baxa29102001

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

brijeshb42 avatar Jun 17 '21 16:06 brijeshb42