GridItem throwing error in react
corescript opened this issue · comments
index.js:226 Uncaught TypeError: Object(...) is not a function
at new AnimatedStyle (index.js:226)
at createAnimatedStyle (index.js:260)
at new AnimatedProps (index.js:325)
at index.js:339
at renderWithHooks (react-dom.development.js:15108)
at updateForwardRef (react-dom.development.js:16746)
at beginWork$1 (react-dom.development.js:18522)
at HTMLUnknownElement.callCallback (react-dom.development.js:347)
at Object.invokeGuardedCallbackDev (react-dom.development.js:397)
at invokeGuardedCallback (react-dom.development.js:454)
at beginWork$$1 (react-dom.development.js:23217)
at performUnitOfWork (react-dom.development.js:22211)
at workLoopSync (react-dom.development.js:22185)
at renderRoot (react-dom.development.js:21878)
at runRootCallback (react-dom.development.js:21554)
at react-dom.development.js:11353
at unstable_runWithPriority (scheduler.development.js:643)
at runWithPriority$2 (react-dom.development.js:11305)
at flushSyncCallbackQueueImpl (react-dom.development.js:11349)
at flushSyncCallbackQueue (react-dom.development.js:11338)
at scheduleUpdateOnFiber (react-dom.development.js:21431)
at dispatchAction (react-dom.development.js:15816)
at ResizeObserver. (use-measure.js:16)
index.js:2178 The above error occurred in the component:
in ForwardRef (created by GridItem)
in GridItem (at ListResources.jsx:386)
in div (created by GridDropZone)
in GridDropZone (at ListResources.jsx:379)
in GridContextProvider (at ListResources.jsx:378)
in ListResources (created by Connect(ListResources))
in Connect(ListResources) (at Resources.jsx:183)
in div (at Resources.jsx:182)
in Resources (created by Connect(Resources))
in Connect(Resources) (created by Route)
in Route (at App.jsx:57)
in Switch (at App.jsx:54)
in div (at App.jsx:125)
in div (at App.jsx:123)
in div (at App.jsx:119)
in div (at App.jsx:118)
in div (at App.jsx:117)
in Router (at App.jsx:114)
in App (created by Connect(App))
in Connect(App) (at src/index.js:10)
in Provider (at src/index.js:9)
Uncaught TypeError: Object(...) is not a function
at new AnimatedStyle (index.js:226)
at createAnimatedStyle (index.js:260)
at new AnimatedProps (index.js:325)
at index.js:339
at renderWithHooks (react-dom.development.js:15108)
at updateForwardRef (react-dom.development.js:16746)
at beginWork$1 (react-dom.development.js:18522)
at HTMLUnknownElement.callCallback (react-dom.development.js:347)
at Object.invokeGuardedCallbackDev (react-dom.development.js:397)
at invokeGuardedCallback (react-dom.development.js:454)
at beginWork$$1 (react-dom.development.js:23217)
at performUnitOfWork (react-dom.development.js:22211)
at workLoopSync (react-dom.development.js:22185)
at renderRoot (react-dom.development.js:21878)
at runRootCallback (react-dom.development.js:21554)
at react-dom.development.js:11353
at unstable_runWithPriority (scheduler.development.js:643)
at runWithPriority$2 (react-dom.development.js:11305)
at flushSyncCallbackQueueImpl (react-dom.development.js:11349)
at flushSyncCallbackQueue (react-dom.development.js:11338)
at scheduleUpdateOnFiber (react-dom.development.js:21431)
at dispatchAction (react-dom.development.js:15816)
at ResizeObserver. (use-measure.js:16)
Above three errors popped up when integrated library in to an existing project, this is thrown when GridItem component renders.
Dependencies
"@axetroy/react-download": "^1.1.1",
"autoprefixer": "7.1.6",
"babel-core": "^6.26.3",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.1.1",
"babel-runtime": "6.26.0",
"bootstrap": "^4.1.1",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"create-react-class": "^15.6.3",
"css-loader": "^0.28.7",
"dotenv": "4.0.0",
"dotenv-expand": "4.2.0",
"draft-js": "^0.10.5",
"draftjs-to-html": "^0.8.4",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"fs-extra": "3.0.1",
"history": "^4.6.3",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"js-file-download": "^0.4.1",
"lodash.flow": "^3.5.0",
"moment": "^2.22.2",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "^2.0.8",
"promise": "8.0.1",
"raf": "3.4.0",
"react": "^16.9.0",
"react-avatar-edit": "^0.8.2",
"react-avatar-editor": "^11.0.4",
"react-avatar-image-cropper": "^1.1.7",
"react-beautiful-dnd": "^8.0.7",
"react-bootstrap": "^0.32.1",
"react-bootstrap-date-picker": "^5.1.0",
"react-circular-progressbar": "^0.8.0",
"react-content-loader": "^3.1.2",
"react-cropper": "^1.0.1",
"react-cropperjs": "^1.2.5",
"react-d3-components": "^0.9.1",
"react-datepicker": "^1.5.0",
"react-dev-utils": "^5.0.1",
"react-dnd": "^2.6.0",
"react-dnd-html5-backend": "^2.6.0",
"react-dom": "^16.9.0",
"react-draft-wysiwyg": "^1.12.13",
"react-dropzone": "^4.2.11",
"react-gesture-responder": "^2.1.0",
"react-grid-dnd": "^2.1.0",
"react-image-cropper": "^1.3.0",
"react-image-lightbox": "^5.1.0",
"react-items-carousel": "^2.3.5",
"react-lightbox-component": "^1.2.1",
"react-modal": "^3.4.5",
"react-number-format": "^3.5.0",
"react-paginate": "^6.3.0",
"react-pdf": "^3.0.5",
"react-redux": "^5.0.7",
"react-responsive-modal": "^3.0.3",
"react-router": "^4.2.0",
"react-router-dom": "^4.1.2",
"react-slick": "^0.24.0",
"react-sliding-pane": "^2.0.2",
"react-sortable": "^2.0.0",
"react-sortable-hoc": "^0.8.3",
"reactstrap": "^5.0.0",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"resolve": "1.6.0",
"style-loader": "^0.19.0",
"superagent": "^3.8.3",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.6.2",
"webfontloader": "^1.6.28",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3"
can you share the code that you're using to render the grid?
it sorta looks like it might be a react-spring issue, too, perhaps related to a new beta release. But I could learn more from looking at your render code first.
render() {
return (
<GridContextProvider onChange={onChange}>
<GridDropZone
id="items"
boxesPerRow={4}
rowHeight={100}
style={{ height: "400px" }}
>
<GridItem key={0}>
<div
style={{
width: "100%",
height: "100%"
}}
>
Render your item here
</div>
</GridItem>
</GridDropZone>
</GridContextProvider>
);
}
}
I'm just rendering the basic code in which you gave in the readme. Noticed that once I remove the GridItem component the issue just vanishes.
Also there is warning too..
deprecations.js:8 react-spring: interpolate() will be deprecated in v10, use .to()
| deprecateInterpolate | @ | deprecations.js:8 | |
|---|---|---|---|
| interpolate | @ | index.js:178 | |
| GridItem | @ | GridItem.js:100 | |
| renderWithHooks | @ | react-dom.development.js:15108 | |
| mountIndeterminateComponent | @ | react-dom.development.js:17342 | |
| beginWork$1 | @ | react-dom.development.js:18486 | |
| beginWork$$1 | @ | react-dom.development.js:23193 | |
| performUnitOfWork | @ | react-dom.development.js:22211 | |
| workLoopSync | @ | react-dom.development.js:22185 | |
| renderRoot | @ | react-dom.development.js:21878 | |
| runRootCallback | @ | react-dom.development.js:21554 | |
| (anonymous) | @ | react-dom.development.js:11353 | |
| unstable_runWithPriority | @ | scheduler.development.js:643 | |
| runWithPriority$2 | @ | react-dom.development.js:11305 | |
| flushSyncCallbackQueueImpl | @ | react-dom.development.js:11349 | |
| flushSyncCallbackQueue | @ | react-dom.development.js:11338 | |
| scheduleUpdateOnFiber | @ | react-dom.development.js:21431 | |
| dispatchAction | @ | react-dom.development.js:15816 | |
| (anonymous) | @ | use-measure.js:16 |
Tried downgrading to react@16.8.6 & react-dom@16.8.6. Issue still exist.
Ah, I think the issue might be that GridDropZone expects an array of children. Try plugging my Readme example directly in place of your code. Notice that you are just rendering a single GridItem while I'm mapping through items.
I've also just updated react-spring which might fix some issues.
@bmcmahen I tried looping <GridItem> as in readme example, still issue exist. I tried resolving all dependency errors but nothing good happens. Meanwhile I created a fresh react project and tried , it's working fine there. So I hope this is due to some version mismatch between the dependencies.
It would be great if you can try replicate this at your side, using the blow dependency list as base.
Dependencies
"dependencies": {
"@axetroy/react-download": "^1.1.1",
"autoprefixer": "7.1.6",
"babel-core": "^6.26.3",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.1.1",
"babel-runtime": "6.26.0",
"bootstrap": "^4.1.1",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"create-react-class": "^15.6.3",
"css-loader": "^0.28.7",
"dotenv": "4.0.0",
"dotenv-expand": "4.2.0",
"draft-js": "^0.10.5",
"draftjs-to-html": "^0.8.4",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"fs-extra": "3.0.1",
"history": "^4.6.3",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"js-file-download": "^0.4.1",
"konva": "^3.4.1",
"lodash.flow": "^3.5.0",
"moment": "^2.22.2",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "^2.0.8",
"promise": "8.0.1",
"raf": "3.4.0",
"react": "16.8.6",
"react-avatar-edit": "^0.8.2",
"react-avatar-editor": "^11.0.4",
"react-avatar-image-cropper": "^1.1.7",
"react-beautiful-dnd": "^8.0.7",
"react-bootstrap": "^0.31.5",
"react-bootstrap-date-picker": "^5.1.0",
"react-circular-progressbar": "^0.8.0",
"react-content-loader": "^3.1.2",
"react-cropper": "^1.0.1",
"react-cropperjs": "^1.2.5",
"react-d3-components": "^0.9.1",
"react-datepicker": "^1.5.0",
"react-dev-utils": "^5.0.1",
"react-dnd": "^2.6.0",
"react-dnd-html5-backend": "^2.6.0",
"react-dom": "16.8.6",
"react-draft-wysiwyg": "^1.12.13",
"react-dropzone": "^4.2.11",
"react-gesture-responder": "^2.1.0",
"react-grid-dnd": "^2.0.0",
"react-image-cropper": "^1.3.0",
"react-image-lightbox": "^5.1.0",
"react-items-carousel": "^2.3.5",
"react-konva": "^16.8.6",
"react-lightbox-component": "^1.2.1",
"react-modal": "^3.4.5",
"react-native": "^0.60.5",
"react-number-format": "^3.5.0",
"react-paginate": "^6.3.0",
"react-pdf": "^3.0.5",
"react-redux": "^5.0.7",
"react-responsive-modal": "^3.0.3",
"react-router": "^4.2.0",
"react-router-dom": "^4.1.2",
"react-slick": "^0.24.0",
"react-sliding-pane": "^2.0.2",
"react-sortable": "^2.0.0",
"react-sortable-hoc": "^0.8.3",
"react-three-fiber": "^2.0.0",
"react-zdog": "^1.0.10",
"reactstrap": "^5.0.0",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"resolve": "1.6.0",
"style-loader": "^0.19.0",
"superagent": "^3.8.3",
"sw-precache-webpack-plugin": "0.11.4",
"three": "^0.107.0",
"url-loader": "0.6.2",
"webfontloader": "^1.6.28",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3",
"zdog": "^1.1.0"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
}