Uncaught Error: Element ref was specified as a string (editor) but no owner was set

user_1342970 0
Viewed 3096

I am using react-markdown-editor package and before I didn't have any problem. but after updating react with npm install, this issue happen. When The page is rendering this component produce three errors and all the page goes blank. I do research but I found nothing useful. I don't know how to fix this. Here is my errors in chrome's console : 

invariant.js:42 Uncaught Error: Element ref was specified as a string (editor) but no owner was set. You may have multiple copies of React loaded. (details: https: //fb. me/react-refs-must-have-owner).
    at invariant (invariant.js:42)
    at coerceRef (react-dom.development.js:8579)
    at reconcileSingleElement (react-dom.development.js:9379)
    at reconcileChildFibers (react-dom.development.js:9477)
    at reconcileChildrenAtPriority (react-dom.development.js:10127)
    at reconcileChildren (react-dom.development.js:10118)
    at finishClassComponent (react-dom.development.js:10254)
    at updateClassComponent (react-dom.development.js:10226)
    at beginWork (react-dom.development.js:10605)
    at performUnitOfWork (react-dom.development.js:12573)

react-dom.development.js:8305 The above error occurred in the <MarkdownEditorContent> component:
    in MarkdownEditorContent
    in div
    in MarkdownEditor (created by TopicEditComponent)
    in div (created by TopicEditComponent)
    in div (created by TopicEditComponent)
    in div (created by TopicEditComponent)
    in div (created by TopicEditComponent)
    in form (created by TopicEditComponent)
    in div (created by TopicEditComponent)
    in TopicEditComponent (created by TopicComponent)
    in div (created by TopicComponent)
    in TopicComponent (created by CountryContainer)
    in div (created by CountryContainer)
    in CountryContainer (created by Connect(CountryContainer))
    in Connect(CountryContainer) (created by RouterContext)
    in div (created by CoreLayout)
    in div (created by CoreLayout)
    in CoreLayout (created by RouterContext)
    in RouterContext (created by Router)
    in Router (created by Routes)
    in Routes
    in Provider
Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at https: //fb. me/react-error-boundaries.


react-dom.development.js:1345 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https: //fb . me/react-crossorigin-error for more information.
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1345)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at performWork (react-dom.development.js:12800)
    at batchedUpdates (react-dom.development.js:13244)
    at performFiberBatchedUpdates (react-dom.development.js:1646)
    at stackBatchedUpdates (react-dom.development.js:1637)
    at batchedUpdates (react-dom.development.js:1651)
    at Object.batchedUpdatesWithControlledComponents [as batchedUpdates] (react-dom.development.js:1664)
    at dispatchEvent (react-dom.development.js:1874)
react-native reactjs markdown
2 Answers

I had the same problem today and after banging repeatedly my head on the desk i found the solution.

The main problem was a duplicated React installation, so i had to tell which one to use. The solution i've found is to add this code

resolve: {
    alias: {
        'react': path.resolve(__dirname, 'path/to/your/react/installation/folder', 'react')
    }
}

inside webpack.config.js.

This piece of code is stating where to found the correct react installation (in my case i want to point the "node_modules" folder).

I've found this solution here so all the merits go to 'knoxjeffrey' :)

user_82651450
Related