Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot convert undefined or null to object #35

Open
jsingh0026 opened this issue Jul 27, 2020 · 5 comments · May be fixed by #36
Open

Cannot convert undefined or null to object #35

jsingh0026 opened this issue Jul 27, 2020 · 5 comments · May be fixed by #36

Comments

@jsingh0026
Copy link

When using "react-cursor-position": "^3.0.3", the following is the error received only on the server but not in the localhost.

react-dom.production.min.js:209 TypeError: Cannot convert undefined or null to object
at Function.keys ()
at t.value (ReactCursorPosition.js:497)
at t.value (ReactCursorPosition.js:510)
at La (react-dom.production.min.js:182)
at Da (react-dom.production.min.js:181)
at vo (react-dom.production.min.js:263)
at cu (react-dom.production.min.js:246)
at ou (react-dom.production.min.js:246)
at Zo (react-dom.production.min.js:239)
at qo (react-dom.production.min.js:230)

which is breaking the code here:
key: 'getPassThroughProps',
value: function getPassThroughProps() {
var ownPropNames = Object.keys(this.constructor.propTypes);
return omit(this.props, ownPropNames);
}
and here: var props = objectAssign({}, mapChildProps(this.state), this.getPassThroughProps());
@Coriou
Copy link

Coriou commented Jul 27, 2020

I'm having the same issue using https://github.com/ethanselzer/react-image-magnify

Also working in the dev build, but failing in the production one.

Coriou added a commit to Coriou/react-cursor-position that referenced this issue Jul 27, 2020
@Coriou
Fixing an issue with missing propTypes
e2fd02c 
Don't really understand the issue, but this fixes ethanselzer#35 by:

1. providing an empty object to Object.keys as a default
2. only emitting the event when there's actually something to send along with it

This fixes an issue I was having with another component using this one (ethanselzer/react-image-magnify)
@Coriou Coriou linked a pull request Jul 27, 2020 that will close this issue
Open
@maverickdude
Copy link

I'm having the same issue. Working on dev but not on production.

@ngerbauld
Copy link

I'm also having the same issue with react-cursor-position.
Working fine on local, gatsby build fine, netlify deploy is fine, but when going to component in the website gives me this error "Cannot convert undefined or null to object".
I tried adding "window" as conditional but still doesn't work.

Not sure what is the problem here.

@maverickdude
Copy link

maverickdude commented Sep 1, 2020 •
edited

@ngerbauld
I was having the same problem in my Gatsby build.
I had to create a new package by forking this repo and use the code help from @Coriou pull request above as I think this repo is not being maintained anymore.

Thanks @Coriou

@karlhorky
Copy link

karlhorky commented Jun 6, 2021 •
edited

To get around this issue without installing a forked package, you can use patch-package with the diff below (create a file called patches/react-cursor-position+2.5.3.patch after installing patch-package and run yarn --force or npm install --force):

diff --git a/node_modules/react-cursor-position/dist/ReactCursorPosition.js b/node_modules/react-cursor-position/dist/ReactCursorPosition.js
index 37f08a2..6ca75a5 100644
--- a/node_modules/react-cursor-position/dist/ReactCursorPosition.js
+++ b/node_modules/react-cursor-position/dist/ReactCursorPosition.js
@@ -474,7 +474,7 @@ var _class = function (_React$Component) {
     }, {
         key: 'getPassThroughProps',
         value: function getPassThroughProps() {
-            var ownPropNames = Object.keys(this.constructor.propTypes);
+            var ownPropNames = Object.keys(this.constructor.propTypes || {});
             return (0, _object2.default)(this.props, ownPropNames);
         }
     }, {
diff --git a/node_modules/react-cursor-position/dist/es/ReactCursorPosition.js b/node_modules/react-cursor-position/dist/es/ReactCursorPosition.js
index fbde7fd..d6d4b31 100644
--- a/node_modules/react-cursor-position/dist/es/ReactCursorPosition.js
+++ b/node_modules/react-cursor-position/dist/es/ReactCursorPosition.js
@@ -441,7 +441,7 @@ var _class = function (_React$Component) {
     }, {
         key: 'getPassThroughProps',
         value: function getPassThroughProps() {
-            var ownPropNames = Object.keys(this.constructor.propTypes);
+            var ownPropNames = Object.keys(this.constructor.propTypes || {});
             return omit(this.props, ownPropNames);
         }
     }, {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fixing an issue with missing propTypes Coriou/react-cursor-position
5 participants
@karlhorky @Coriou @maverickdude @ngerbauld @jsingh0026