runtime error: Cannot use 'in' operator to search for 'transform' in undefined at getPrefix

[david238]

using "react-draggable": "^4.4.3", "react": "16.13.1",

/node_modules/react-draggable/build/cjs/utils/getPrefix.js:23
  if (prop in style) return '';
           ^

TypeError: Cannot use 'in' operator to search for 'transform' in undefined
    at getPrefix

Use in in one of my components as:

import Draggable from 'react-draggable';
.
.
.

 <Draggable 
      defaultPosition={{x:10,y:10}}
      position={null}
      grid={[25, 25]}
      scale={1}
      bounds="parent"
      onDrag={handleDrag} 
      {...dragHandlers}> 
      <Grid className={classes.floating}>
          
      </Grid>
  </Draggable>

[STRML]

Oh that's quite interesting. Which browser? Can you replicate this on a page? It's odd that window.document.documentElement.style would be undefined.

[david238]

That error is triggered when I run my project using npm run in the terminal... using chrome browser for additional info. Thx

[STRML]

If you're running it in the terminal that doesn't mean you're running it in Chrome. Are you loading up something like JSDOM to emulate a global window object?

[david238]

Made a search for JSDOM, resulted to nothing. My package.json is

"engines": {
"node": "14.15.4",
"npm": "6.14.4"
},
"devDependencies": {},
"dependencies": {
"@babel/core": "^7.13.10",
"@babel/preset-env": "7.9.0",
"@babel/preset-react": "7.9.4",
"@date-io/date-fns": "^1.3.13",
"@hot-loader/react-dom": "16.13.0",
"@material-ui/core": "4.9.8",
"@material-ui/icons": "4.9.1",
"@material-ui/pickers": "^3.3.10",
"babel-loader": "8.1.0",
"body-parser": "1.19.0",
"compression": "1.7.4",
"cookie-parser": "1.4.5",
"cors": "2.8.5",
"date-fns": "^2.21.1",
"dotenv": "^8.2.0",
"express": "4.17.1",
"express-jwt": "5.3.1",
"file-loader": "6.0.0",
"formidable": "^1.2.2",
"helmet": "3.22.0",
"i18next": "^20.2.1",
"i18next-browser-languagedetector": "^6.1.0",
"i18next-http-backend": "^1.2.1",
"ibm-watson": "^6.1.0",
"jsonwebtoken": "8.5.1",
"lodash": "4.17.15",
"mongoose": "^5.11.19",
"nodemon": "2.0.2",
"prop-types": "^15.7.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-draggable": "^4.4.3",
"react-helmet": "^6.1.0",
"react-hot-loader": "4.12.20",
"react-i18next": "^11.8.12",
"react-redux": "^7.2.2",
"react-router": "5.1.2",
"react-router-dom": "5.1.2",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.9",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"webpack": "4.42.1",
"webpack-cli": "3.3.11",
"webpack-dev-middleware": "3.7.2",
"webpack-hot-middleware": "2.25.0",
"webpack-node-externals": "1.7.2",
}
}

Could be one of the packages is the cause of the issue...

[STRML]

I'm sorry, without really knowing what you're doing, I can't get to the bottom of it outright or help you debug it. I would suggest sticking a breakpoint in that code, or you could submit a PR to check if style is defined before attempting to iterate through it.

[david238]

Sure, I understand. Will do that. Thanks 👍

[david238]

OK made some digging. So I think this error is triggering because I am returning my first page from ReactDOMServer...

Putting a breakpoint in that code showed that there was no style child under documentElement.

var style = window.document.documentElement.style;

What I have under documentElement is appendChild function only.

Maybe that could happen for other users.

Would be good to check if style is not undefined before the L23?

[david238]

So ReactDomServer is returning the file to the browser, that's why the if (typeof window === 'undefined' || typeof window.document === 'undefined') did not return '';

So I am guessing that should be a package that removing that 'style' element under documentElement.

[david238]

Will do a PR to fix this.