Support for Gatsby 4.0

[alexvirdee]

Does this plugin have support for the latest version of Gatsby? When trying to get modal to render state={{ modal: true }} doesn't seem to do anything and will still go to the link page but no indication of a modal

[AntonHladek]

Run npm i gatsby-plugin-modal-routing-3 and do not forget to replace previous imports/configs with the new module name in order to avoid any conflicts

[ajmeese7]

@AntonHladek that doesn't work in TypeScript, that's the problem that I'm struggling with

[rm-bergmann]

After updating my Gatsby site to v4 the plugin stopped working. I installed gatsby-plugin-modal-routing-3 and updated config and imports. I am getting this error now when the app loads in the browser:

Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:28439
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 `WrapPageElement`.

Any idea why installing gatsby-plugin-modal-routing-3 would cause this issue?

EDIT: I can see in VS code this linting alert comes up where I have the import, which is typescript related as mentioned above, which is likely causing the error.

import { ModalRoutingContext } from 'gatsby-plugin-modal-routing-3';

Could not find a declaration file for module 'gatsby-plugin-modal-routing-3'. '.../node_modules/gatsby-plugin-modal-routing-3/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/gatsby-plugin-modal-routing-3` if it exists or add a new declaration (.d.ts) file containing `declare module 'gatsby-plugin-modal-routing-3';`ts(7016)

[andreisemianiuk]

After updating my Gatsby site to v4 the plugin stopped working. I installed gatsby-plugin-modal-routing-3 and updated config and imports. I am getting this error now when the app loads in the browser:

Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:28439
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 `WrapPageElement`.

Any idea why installing gatsby-plugin-modal-routing-3 would cause this issue?

EDIT: I can see in VS code this linting alert comes up where I have the import, which is typescript related as mentioned above, which is likely causing the error.

import { ModalRoutingContext } from 'gatsby-plugin-modal-routing-3';

Could not find a declaration file for module 'gatsby-plugin-modal-routing-3'. '.../node_modules/gatsby-plugin-modal-routing-3/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/gatsby-plugin-modal-routing-3` if it exists or add a new declaration (.d.ts) file containing `declare module 'gatsby-plugin-modal-routing-3';`ts(7016)

@rm-bergmann I have the same issue.

[intactcode]

Same Issue

[Cavallando]

I think there might be something up with es modules in the context of this package, when I go into gatsby-plugin-modal-routing/wrapPageElement.js and log out what pageResources.component is (this component is your page component for a given route), I see {__esModule: true, Symbol(Symbol.toStringTag): 'Module', default: Homepage() } and the react-dom error is showing the type it tried to render was an object, further logging in react-dom showed that it was treating this as an object and not using the default export. I wont pretend I know that all in depth at all just reporting what I found. but I did come up with a small patch....

Using patch-package

diff --git a/node_modules/gatsby-plugin-modal-routing-3/wrapPageElement.js b/node_modules/gatsby-plugin-modal-routing-3/wrapPageElement.js
index 658931b..c77c03f 100644
--- a/node_modules/gatsby-plugin-modal-routing-3/wrapPageElement.js
+++ b/node_modules/gatsby-plugin-modal-routing-3/wrapPageElement.js
@@ -93,7 +93,7 @@ var WrapPageElement = /*#__PURE__*/function (_React$Component) {
         lastModalProps = _this$state.lastModalProps;
     var isModal = prevProps && (0, _get2.default)(location, 'state.modal');
     var resources = isModal ? prevProps.pageResources : pageResources; // the page is the previous path if this is a modal, otherwise it's the current path
-
+    pageResources.component = pageResources.component ? pageResources.component.default ? pageResources.component.default : pageResources.component : pageResources.component
     var pageElement = isModal ? /*#__PURE__*/_react.default.createElement(prevProps.pageResources.component, (0, _extends2.default)({}, prevProps, {
       key: prevProps.pageResources.page.path
     })) : /*#__PURE__*/_react.default.createElement(pageResources.component, (0, _extends2.default)({}, this.props, {

More explicitly, I added pageResources.component = pageResources.component ? pageResources.component.default ? pageResources.component.default : pageResources.component : pageResources.component to line 96 of wrapPageElement.js in this library.

That's definitely not a long term fix but it did resolve the error and now I can navigate to pages and they display as modals over top of the rest of the application! Hope it helps!

[andreisemianiuk]

@Cavallando thanks a lot!!!

[Cavallando]

Of course! Would love to help contribute an actual bug fix for this but Im not sure where to branch/fork off of since it seems that the maintainer (@lsirivong) has only published gatsby-plugin-modal-routing-3 to NPM and hasn't pushed it here. (I dont mean this as a slight to the maintainer at all great work on this library!)

I could be missing something but if someone could point me in the right direction of where gatsby-plugin-modal-routing-3 code is I'd be happy to open a PR for this!