search

ethanselzer / react-cursor-position

A React component that decorates its children with mouse and touch coordinates relative to itself.
https://ethanselzer.github.io/react-cursor-position
MIT License
143 stars 35 forks source link

Cannot convert undefined or null to object #35

Open jsingh0026 opened 4 years ago

jsingh0026 commented 4 years ago

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 commented 4 years ago

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.

maverickdude commented 4 years ago

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

ngerbauld commented 4 years ago

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 commented 4 years ago

@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 commented 3 years ago

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);
         }
     }, {