I am using cytoscape.js in react and cytoscape.js-expand-collapse. I register this extension at the very begining of my file as shown in docs: https://github.com/iVis-at-Bilkent/cytoscape.js-expand-collapse: by doing expandCollapse( cytoscape ); and it works only on first render. When I come back to my cytoscape component I receive following error: Can not register expandCollapse for core since expandCollapse already exists in the prototype and can not be overridden. So my question is- has anyone had similar problem with using this extension in react and know how to deal with it?
Related
I'm using react pdf to render my component as PDF & allow user to download that PDF on button the PDF was working well after applying pollyfills changes but for my lead (who is using MAC) the PDF was not rendering and giving the
Error: react_devtools_backend.js:4026 TypeError: zlibWEBPACK_IMPORTED_MODULE_3.createDeflate is not a function
On deployment it's even works well on his system but locally he can't render it, does anyone have idea what issue that would which causing this things?
I tried to clone the repo in another folder & installed all the dependencies again but nothing works yet
Here's the screenshot of console error: https://cdn.discordapp.com/attachments/990645691531534370/1012846396296138833/Screen_Shot_2022-08-26_at_3.09.51_PM.png
I found the similar issue opened as well source: https://github.com/diegomura/react-pdf/issues/1935
But it's closed without any proper explanation
So I need to update react, react-dom in order to update nextjs version to 11. React docs says that the new jsx transform approach is backwards compatible, though I met such problem after updating to react 17.0.2. Any file using jsx fails to compile with Can't resolve 'react/jsx-dev-runtime', no matter if I leave the import React from 'react', or remove it as intended after updating to react ^17.
I tried updating #babel/preset-react, using latest #babel/plugin-transform-react-jsx, same problem. The only thing I've found in a similar question topic here is adding /** #jsxRuntime classic */ to the top of the file, which obviously doesnt solve the problem for the whole application (perhaps there might be a way to make such directive global but even then - I would like to be able to use the new and more optimised jsx compiling)
Haven't been able to google exactly my case and any existing suggestions for similar cases didn't help.
To summarise - I need to either make my app work without importing react itself (https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) or at least to be able to use the old way of jsx compiling with this new react version.
Any thoughts?
I have a component (a form) which is based on office ui fabric. The form is working fine in my react application. However, since we need this at multiple places, we decided to make it an npm package.
I extracted the component and can implement it in my app. I can fill out textfields and save and it works properly. However, as soon as I open a dropdown or datepicker (basically a "Callout" from office ui fabric), I get the following error message:
"Expected subtree parent to be a mounted class component. This error is likely caused by a bug in React. Please file an issue."
and:
"react-dom.development.js:14227 The above error occurred in the component:
in LayerBase
in CustomizedLayer
in StyledCustomizedLayer
in Callout
in div
in NormalPeoplePicker
[...]
"
Since it is working when I implement it within my app directly, it must be something in the build process I think. Can anybody eloberate, what this error message means exactly?
I am using the same package versions in my component as on my app.
Can I provide any files that might help? I don't know if showing my webpack.config or package.json for my component help at all?
Okay, it was indeed a mistake in my build process. I bundled the node_modules with my component and therefore suddenly hat two react "instances". After installing webpack-node-externals and adding
externals: [nodeExternals()]
to my webpack.config it works now.
I created an codepen with react code and I'm importing its libraries trough CDN.
Now I want to implement this code (working) into my react project.
But first It could be handy to put all code into a react sandbox so I can make changes before deploying to my code.
I tried to copy paste all code into a sandbox and add all libraries (react, react-dnd, reactdndhtml5backend, react-dom), but it still gives me a lot of errors.
Also the files in my own project are .tsx and not .js.
My current codepen is found here: https://codepen.io/darkinfore/pen/daJxyP
This works, but just not when I implement this into a react sandbox.
I also tried to implement this into a react sandbox: https://codesandbox.io/s/w01l077w1w
But as you can see it gives me some strange errors.
Can someone help me with converting this codepen into a react sandbox without errors?
I looked over your codesandbox and then forked it here. Actually, the only error encountered had to do with ReactDnD not being defined (such that DropTarget could not be found). This was due to your import statement near the top of index.js:
import ReactDnD from "react-dnd";
Because of the way the react-dnd package is designed, this way of importing will not work for you. The package has multiple exports (for example, DragDropContext and DropTarget) rather than a single, default export. You need to take all of these exports and import them together into a single named import, called ReactDnD. So, what you need to do is:
import * as ReactDnD from "react-dnd";
I did this in the forked codesandbox, and this got you past the TypeError and then displayed your table.
Helpful information:
Different ways to use import
Exported modules from react-dnd package
I am trying to use the material-ui React components in my app. I'm using webpack and installed material-ui with npm. I have already replaced text inputs in my forms with the material-ui text-field and it works great.
But.
Then I tried adding a button. Simple enough right? Suddenly, I get this error:
Invariant Violation: ReactClass: You're attempting to use a component class as a mixin. Instead, just use a regular object
I have tested and this error gets thrown even if I just load in an otherwise empty Javascript file with this line:
require('material-ui/lib/raised-button');
If I remove that line, everything works fine. It's weird because the text-field works, so I know my setup is correct. I suspect there is a Mixin being used inside the button code?
Has anyone experienced this? Information on this is sparse, any help is appreciated.