I am trying to use react-beautiful-dnd for drag n drop sorting of a list but my elements are not draggable and I get Unable to find draggable with id: X. I have cross-check my code with examples in docs but unable to find what I need to fix. I am using constant id for key and draggableId prop.
Code:CodeSandBox
Edit 1: I expected the code to be able to drag and rearrange items but will return to their initial position as state update is not implemented
Just ran into the same problem. Try disabling React's Strict Mode. That fixed it for me. https://reactjs.org/docs/strict-mode.html
There's an open issue for this with react-beautiful-dnd here https://github.com/atlassian/react-beautiful-dnd/issues/2350. Hopefully compatibility with strict mode will be fixed soon. Until then removing strict mode works around the issue.
Late to the party here, but I was facing the same issue. It turns out that there's a fork of react-beautiful-dnd called #hello-pangea/dnd. You can find it here.
This fork has the same API, but unlike react-beautiful-dnd it works in strict mode and seems to be actively maintained.
It's easy to switch over because they use the same API. Simply add the package
npm i #hello-pangea/dnd or yarn add #hello-pangea/dnd
and then change your imports from
import {
Droppable,
Draggable
} from "react-beautiful-dnd";
to
import {
Droppable,
Draggable
} from "#hello-pangea/dnd";
Note that #hello-pangea/dnd is typescript based, which means the types are included directly in this package too.
I run into the same problem with nextjs
I went into next.config.js file and just set reactStrictMode to false
Related
Prelude
So, this issue bothers me for a week or so, I dug a lot to try to slove it but with no success.
I understand that the next server probably does't render my styles and I need to inject them, but I tried the suggested solutions and still the problem persists.
Material ui breaks on refresh in Next js
https://github.com/mui/material-ui/blob/master/examples/nextjs/pages/_document.js
Also tried to use next/dynamic with ssr: false which makes a difference but not in the right, direction also with suspense: true and <Suspense fallback="loading"> which in the first place requires react v18+, react-dom v18+ and NextJS v12+ and on the second place breaks on initial load and breaks the styles somehow, so we exclude this as a solution.
https://stackoverflow.com/a/64119607/17016350
More about the problem
Firstly this problem is observed only on the build version of the project, on development enviroment its OK.
What I observe is that when we clear the cache and load a particular page in our project the page gets loaded some elements/components are where they are supposed to be, but others are not, and this is because the styles for them are not loaded yet and this leads to snap of the page.
After that if we reload the page normally everything is where is supposed to be and we do not observe this kind of snapping, on the other hand if we hard reload or reload with clear cache the page snaps.
Versions
next 12.1.5
react 17.0.1 react-dom 17.0.1
#emotion/react 11.8.2 #emotion/styled 11.8.1
#mui/material 5.5.3 #mui/styles 5.5.3
For now I can not include any code or screenshots
It is very new issue and currently its in progress
You can follow these links for updates and information about the problem:
https://github.com/mui/material-ui/pull/32104
mnajdova commented 5 days ago
Let's wait for the next version that
contains the fix in vercel/next.js#36675 (comment) to be stable so
that we can test the changes reliably.
https://github.com/vercel/next.js/issues/36675
zhulduz commented 5 days ago
Version next: 12.1.7-canary.4 works properly for me
https://github.com/mui/material-ui/issues/32051
I will update the answear if any solutions are found...
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 am using React-Big-Calender, i want to make my event resizable. I am able to implement dnd of events but somehow events are not resizing. I took reference from official example (https://github.com/jquense/react-big-calendar/blob/master/examples/demos/dnd.js) but still not able to make it work. Please help..!
Link to my codeSandBox : https://codesandbox.io/s/wonderful-darwin-35hq4?file=/src/CalenderIndex.jsx
I recently came across this and it ended up being due to my react and react-dom version being 17.0.1. It looks like they changed how some DOM events are handled (https://reactjs.org/blog/2020/10/20/react-v17.html) which causes the resizing event not to fire in react-big-calendar. The best fix for now is probably just to downgrade react and react-dom in your package.json (I went to "16.13.1" it is working fine)
I think with the latest version of react-big-calendar v0.38.1 everything works fine without any issues even with react and react-dom v17.0.2. I just had a bit of a hard time figuring out that I need to include the dragAndDrop styles import 'react-big-calendar/lib/addons/dragAndDrop/styles.css'; as well otherwise the handlebars for resize are not shown at all.
I had a certain bug that I was unsure how to debug. The bug is that styling that I use for a create-react-app (Typescript) app through material-ui and regular CSS, shows up just fine in development but it shows differently for certain CSS properties when I deploy the app online (I've only tried Heroku and Vercel). The app doesn't show any errors or warnings in the console when I'm developing. I have no idea why it's happening and I've tried the following so far
Read through my code many times being extra careful at every step.
Open the website (development and production) in incognito mode on Chrome 85.0.4183.83 (Linux, 64 bit)
Look through the documentation for material-ui (material-ui.com) and the React docs for any lead on this
Search google for prior such issues
So far, nothing has turned up. Could someone please guide me in the right direction?
The build pack I use on Heroku after deployment is the well known one by mars and available at https://buildpack-registry.s3.amazonaws.com/buildpacks/mars/create-react-app.tgz .
For convenience, I have included my package.json here on pastebin.
Thank you so much for helping out.
============= EDIT =============
I've been experimenting with the code and it seems like the problem lies with how material-ui is compiled during build time. The problems which don't show up in development, show up in production.
For example, the biggest thing I noticed is if you mix custom style prop flags given by the material-ui components and add your own styling with className or style, during build time these latter styles are overridden partially if not completely.
So if I do
import React,
{ useRef } from "react";
import {
Button,
makeStyle,
Theme
} from "#material-ui/core";
/*
Start of functional component using memo
.
.
.
*/
const useClasses = useRef(makeStyle((theme : Theme) => { return {
buttonStyles:
{
backgroundColor: theme.palette.text.hint
}
}}));
const styles = useClasses.current();
<Button
color={"secondary"}
className={styles.buttonStyles}>
button text
</Button>
/*
.
.
.
*/
in development, the button will have the backgroundColor I give it in makeStyles, but in production that property will switch to secondary as given in the color prop which defaults to the value theme.palette.secondary.main.
And sometimes, just even using a component from material-ui without any extra config causes a problem.
I am also using code splitting with lazy and Suspense if that matters.
StackMatch can you please link your github/gitlab repo? I think I might know what the problem is but can't be certain without seeing how your dev environment is configured.
I'm using react-native-vector-icons in my React Native app, and have the following component:
<Icon
name='rowing'
/>
I used the rowing icon because that was the first example in the documentation here. When you don't supply a value for type, it defaults to material, so I figured I could replace rowing with any of the material icons from this list. When I replaced it with back_arrow, it renders as a question mark. Does anyone know how I can approach debugging this?
If you are using an ejected project make sure that you bundle the library correctly in the android studio here are the full instructions
Otherwise, if you are using expo make sure to use the correct library:
Expo lib
Checklist
Have you done, npm install react-native-elements
As mentioned here, https://react-native-elements.github.io/react-native-elements/docs/getting_started.html
Please cross check in package.json file do u have dependency of "react-native-elements"