scniro / react-codemirror2

Codemirror integrated components for React
MIT License
1.65k stars 192 forks source link

Upgrade from 2.0.2 -> 3.0 crashes our app #24

Closed inoas closed 6 years ago

inoas commented 6 years ago

When I first saw the 3.0.0 tag diff I did not think a new major release was warranted.

However for us before things just run smoothly, afterward upgrading we get this error:

In warning.js?4064:33

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Check the render method of `CodeAsset`. 
    in CodeAsset (created by CodeAssetForm)
    in fieldset (created by CodeAssetForm)
    in form (created by CodeAssetForm)
    in div (created by CodeAssetForm)
    in CodeAssetForm (created by Connect(CodeAssetForm))
    in Connect(CodeAssetForm) (created by withGettext(Connect(CodeAssetForm)))
    in withGettext(Connect(CodeAssetForm)) (created by AppCodeAssetForm)
    in AppCodeAssetForm
    in Provider
In invariant.js?4b7b:42 

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Check the render method of `CodeAsset`.
    at invariant (invariant.js?4b7b:42)
    at createFiberFromElementType (react-dom.development.js?054f:8185)
    at createFiberFromElement (react-dom.development.js?054f:8130)
    at createChild (react-dom.development.js?054f:8832)
    at reconcileChildrenArray (react-dom.development.js?054f:9132)
    at reconcileChildFibers (react-dom.development.js?054f:9495)
    at reconcileChildrenAtPriority (react-dom.development.js?054f:10127)
    at reconcileChildren (react-dom.development.js?054f:10118)
    at updateHostComponent (react-dom.development.js?054f:10370)
    at beginWork (react-dom.development.js?054f:10609)
In react-dom.development.js?054f:8305 

The above error occurred in the <div> component:
    in div (created by CodeAsset)
    in label (created by CodeAsset)
    in div (created by CodeAsset)
    in CodeAsset (created by CodeAssetForm)
    in fieldset (created by CodeAssetForm)
    in form (created by CodeAssetForm)
    in div (created by CodeAssetForm)
    in CodeAssetForm (created by Connect(CodeAssetForm))
    in Connect(CodeAssetForm) (created by withGettext(Connect(CodeAssetForm)))
    in withGettext(Connect(CodeAssetForm)) (created by AppCodeAssetForm)
    in AppCodeAssetForm
    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.
In react-dom.development.js?054f: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?054f:1345)
    at invokeGuardedCallback (react-dom.development.js?054f:1195)
    at performWork (react-dom.development.js?054f:12800)
    at scheduleUpdateImpl (react-dom.development.js?054f:13185)
    at scheduleUpdate (react-dom.development.js?054f:13124)
    at scheduleTopLevelUpdate (react-dom.development.js?054f:13395)
    at Object.updateContainer (react-dom.development.js?054f:13425)
    at eval (react-dom.development.js?054f:17105)
    at Object.unbatchedUpdates (react-dom.development.js?054f:13256)
    at renderSubtreeIntoContainer (react-dom.development.js?054f:17104)
scniro commented 6 years ago

@inoas That's not the upgrade, just a subsequent hot-commit to fix something with CI. Check out what's new in 3.0.0. I suspect you'll see why this is a major relase.

inoas commented 6 years ago

Thanks, would have been great to have that new in 3.0.0. doc linked from the tag summary page instead of just "ci": https://github.com/scniro/react-codemirror2/releases/tag/3.0.0

I will try to make it work and report back

inoas commented 6 years ago

The only change required for us was:

Before (^2.0.2)

import CodeMirror from 'react-codemirror2';

After (^3.0.0)

import {UnControlled as CodeMirror} from 'react-codemirror2';

Once my colleague is back we will investigate if it is better to use a controller component.

scniro commented 6 years ago

It must have just took the last commit message as I didn't actually have any sort of description in there. I linked to that section of README.md now. FWIW There should have been some notes in CHANGELOG.md as well.

Cool, keep me posted!