Open corescript opened 5 years ago
bmcmahen
commented
5 years ago 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.
corescript
commented
5 years ago 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.
bmcmahen
commented
5 years ago 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.
corescript
commented
5 years ago @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": { "@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" }
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"