React 16 support

[karanmartian]

Hi React 16 support for this component is broken

[adeelraza]

@karanmartian can you elaborate more? It seems to be working with React 16 just fine.

[dadamssg]

He may be talking about suppressing peer dependency warnings by updating this.

[adeelraza]

@karanmartian @dadamssg we have updated this to support React 16. Can you confirm?

[karanmartian]

Hi @adeelraza sorry for the late response, I have been busy. But even I install the latest version I am getting following error on the console. I am attaching my code. It was working fine with React 15 and still breaks with React 16.
AddMod.zip

---

warning.js?d575:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of AddMod.
in AddMod (created by Connect(AddMod))
in Connect(AddMod) (created by RouterContext)
in RouterContext (created by Router)
in Router
in Provider
printWarning @ warning.js?d575:33
warning @ warning.js?d575:57
createElementWithValidation @ react.development.js?aef8:1296
render @ AddMod.js?aa88:84
tryRender @ index.js?adf2:34
proxiedMethod @ createPrototypeProxy.js?6413:44
finishClassComponent @ react-dom.development.js?f8c1:8389
updateClassComponent @ react-dom.development.js?f8c1:8357
beginWork @ react-dom.development.js?f8c1:8982
performUnitOfWork @ react-dom.development.js?f8c1:11814
workLoop @ react-dom.development.js?f8c1:11843
renderRoot @ react-dom.development.js?f8c1:11874
performWorkOnRoot @ react-dom.development.js?f8c1:12449
performWork @ react-dom.development.js?f8c1:12370
performSyncWork @ react-dom.development.js?f8c1:12347
requestWork @ react-dom.development.js?f8c1:12247
scheduleWorkImpl @ react-dom.development.js?f8c1:12122
scheduleWork @ react-dom.development.js?f8c1:12082
scheduleRootUpdate @ react-dom.development.js?f8c1:12710
updateContainerAtExpirationTime @ react-dom.development.js?f8c1:12738
updateContainer @ react-dom.development.js?f8c1:12765
ReactRoot.render @ react-dom.development.js?f8c1:16069
(anonymous) @ react-dom.development.js?f8c1:16488
unbatchedUpdates @ react-dom.development.js?f8c1:12557
legacyRenderSubtreeIntoContainer @ react-dom.development.js?f8c1:16484
render @ react-dom.development.js?f8c1:16543
window.webappStart @ client.js?f17d:39
(anonymous) @ gmail:43
invariant.js?2809:42 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of AddMod.
at invariant (invariant.js?2809:42)
at throwOnInvalidElementType (react-dom.development.js?f8c1:5393)
at createFiberFromElement (react-dom.development.js?f8c1:5359)
at createChild (react-dom.development.js?f8c1:7554)
at reconcileChildrenArray (react-dom.development.js?f8c1:7805)
at reconcileChildFibers (react-dom.development.js?f8c1:8121)
at reconcileChildrenAtExpirationTime (react-dom.development.js?f8c1:8240)
at reconcileChildren (react-dom.development.js?f8c1:8231)
at updateHostComponent (react-dom.development.js?f8c1:8539)
at beginWork (react-dom.development.js?f8c1:8986)
invariant @ invariant.js?2809:42
throwOnInvalidElementType @ react-dom.development.js?f8c1:5393
createFiberFromElement @ react-dom.development.js?f8c1:5359
createChild @ react-dom.development.js?f8c1:7554
reconcileChildrenArray @ react-dom.development.js?f8c1:7805
reconcileChildFibers @ react-dom.development.js?f8c1:8121
reconcileChildrenAtExpirationTime @ react-dom.development.js?f8c1:8240
reconcileChildren @ react-dom.development.js?f8c1:8231
updateHostComponent @ react-dom.development.js?f8c1:8539
beginWork @ react-dom.development.js?f8c1:8986
performUnitOfWork @ react-dom.development.js?f8c1:11814
workLoop @ react-dom.development.js?f8c1:11843
callCallback @ react-dom.development.js?f8c1:100
invokeGuardedCallbackDev @ react-dom.development.js?f8c1:138
invokeGuardedCallback @ react-dom.development.js?f8c1:187
replayUnitOfWork @ react-dom.development.js?f8c1:11318
renderRoot @ react-dom.development.js?f8c1:11885
performWorkOnRoot @ react-dom.development.js?f8c1:12449
performWork @ react-dom.development.js?f8c1:12370
performSyncWork @ react-dom.development.js?f8c1:12347
requestWork @ react-dom.development.js?f8c1:12247
scheduleWorkImpl @ react-dom.development.js?f8c1:12122
scheduleWork @ react-dom.development.js?f8c1:12082
scheduleRootUpdate @ react-dom.development.js?f8c1:12710
updateContainerAtExpirationTime @ react-dom.development.js?f8c1:12738
updateContainer @ react-dom.development.js?f8c1:12765
ReactRoot.render @ react-dom.development.js?f8c1:16069
(anonymous) @ react-dom.development.js?f8c1:16488
unbatchedUpdates @ react-dom.development.js?f8c1:12557
legacyRenderSubtreeIntoContainer @ react-dom.development.js?f8c1:16484
render @ react-dom.development.js?f8c1:16543
window.webappStart @ client.js?f17d:39
(anonymous) @ gmail:43
react-dom.development.js?f8c1:9643 The above error occurred in the

component:
in div (created by AddMod)
in div (created by AddMod)
in div (created by AddMod)
in AddMod (created by Connect(AddMod))
in Connect(AddMod) (created by RouterContext)
in RouterContext (created by Router)
in Router
in Provider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js?f8c1:9643
logError @ react-dom.development.js?f8c1:9682
commitErrorLogging @ react-dom.development.js?f8c1:9895
commitAllLifeCycles @ react-dom.development.js?f8c1:11459
callCallback @ react-dom.development.js?f8c1:100
invokeGuardedCallbackDev @ react-dom.development.js?f8c1:138
invokeGuardedCallback @ react-dom.development.js?f8c1:187
commitRoot @ react-dom.development.js?f8c1:11594
completeRoot @ react-dom.development.js?f8c1:12502
performWorkOnRoot @ react-dom.development.js?f8c1:12452
performWork @ react-dom.development.js?f8c1:12370
performSyncWork @ react-dom.development.js?f8c1:12347
requestWork @ react-dom.development.js?f8c1:12247
scheduleWorkImpl @ react-dom.development.js?f8c1:12122
scheduleWork @ react-dom.development.js?f8c1:12082
scheduleRootUpdate @ react-dom.development.js?f8c1:12710
updateContainerAtExpirationTime @ react-dom.development.js?f8c1:12738
updateContainer @ react-dom.development.js?f8c1:12765
ReactRoot.render @ react-dom.development.js?f8c1:16069
(anonymous) @ react-dom.development.js?f8c1:16488
unbatchedUpdates @ react-dom.development.js?f8c1:12557
legacyRenderSubtreeIntoContainer @ react-dom.development.js?f8c1:16484
render @ react-dom.development.js?f8c1:16543
window.webappStart @ client.js?f17d:39
(anonymous) @ gmail:43
react-dom.development.js?f8c1:12431 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of AddMod.
at invariant (invariant.js?2809:42)
at throwOnInvalidElementType (react-dom.development.js?f8c1:5393)
at createFiberFromElement (react-dom.development.js?f8c1:5359)
at createChild (react-dom.development.js?f8c1:7554)
at reconcileChildrenArray (react-dom.development.js?f8c1:7805)
at reconcileChildFibers (react-dom.development.js?f8c1:8121)
at reconcileChildrenAtExpirationTime (react-dom.development.js?f8c1:8240)
at reconcileChildren (react-dom.development.js?f8c1:8231)
at updateHostComponent (react-dom.development.js?f8c1:8539)
at beginWork (react-dom.development.js?f8c1:8986)

[karanmartian]

I have also just tried with your sample code in README, its giving same error - namely this: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

[karanmartian]

If this helps. I am on:

"react": "^16.3.2"
"react-dom": "^16.3.2",
"react-email-editor": "^0.8.1",

[umairsiddique]

@karanmartian I am unable to reproduce this at my end. I tried with same package versions in a new create-react-app project.

Can you try the following?

1. Delete node_modules directory in your project and then run npm install (or yarn install) again.
2. Create a new project with create-react-app and see if EmailEditor component works in it.
3. If neither of the above 2 help, then is it possible for you to share a stripped-down but working code of your project? Something that we are able to download and run locally.