Examples are outdated

[Paul6552]

On your webpage you have examples listed: Examples webpage

These examples run with react 16 which was released in 2019.

After upgrading to the latest react version you have a lot of error to fix to get it running:

• After clicking two times on the drag-icon: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. Still no idea how to fix this.
• Dependency errors with the package tiny-invariant. You can only install this package with the force npm attribute
• If you have typescript installed this rule // eslint-disable-next-line @atlaskit/design-system/no-banned-imports is prohibiting your code to run
• Is Portal necessary? Portal is a performance killer, but I never worked with portals so maybe it is still needed.
• ReactDOM.createPortal ist not supported in react18, use createPortal instead
• ReactDOM.render ist not supported in react18 use createRoot (thanks buzzie-bee)

Maybe you can update your code to a more recent version. Thx

[bibblebabl]

Pragmatic drag and drop is powering some of the biggest products on the web, including Trello, Jira and Confluence.

I wonder what version the creators themselves and these services use? I used to be able to run the examples by changing the template from CRA to another one in the sandbox settings, but now for some reason I didn't work out

Really wanted to try this library on a new project, but to be honest I'm a bit put off by the attitude of maintainers. 😞

[alexreardon]

These examples run with react 16 which was released in 2019

Internally we are in a transition period between react@16 and react@18. Pragmatic drag and drop has been designed to work with react@16.8+ (including react@18). Our peer deps have been updated to reflect that.

After clicking two times on the drag-icon: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. Still no idea how to fix this.

Not sure about that one. I'll have to look into it.

Dependency errors with the package tiny-invariant. You can only install this package with the force npm attribute

That dependency is only used in the example. Sounds like an issue with our codesandbox generator

If you have typescript installed this rule // eslint-disable-next-line @atlaskit/design-system/no-banned-imports is prohibiting your code to run

👀

Is Portal necessary? Portal is a performance killer, but I never worked with portals so maybe it is still needed.

A portal just lets you render your drag preview in a portal (to maintain existing react context) if you want to. You don't have to use portals if you don't want to. See https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/drag-previews#approach-1-use-a-custom-native-drag-preview

[alexreardon]

I want to make sure folks have a good time with our docs. I'll try to take a look into these. Thanks for raising them @Paul6552

[alexreardon]

After clicking two times on the drag-icon: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. Still no idea how to fix this.

I cannot seem to replicate this one. Could you please provide a codesandbox for this @Paul6552 ?

[Paul6552]

Hey alex, thanks for your response.

I am having a hard time making a codesandbox for this. There are a lot more things to investigate. First I tried to make your list-examplereact 18 ready. So updated every dependency and changed the index.tsx to this code:

import React from "react";
import { createRoot } from "react-dom/client";
import "@atlaskit/css-reset";
import Example from "./example";

const container = document.getElementById("root");
const root = createRoot(container!);
//createRoot(<Example />, document.getElementById("root"));

const renderApp = () => root.render(<Example />);

But even after that and removing "ReactDom" from example.tsxt, there are unfortunately problems that I couldn't solve in Codesandbox:

Therefore, I will try to recreate this in my development environment and provide this to you. It'll just take some time

[Paul6552]

My colleague got it working in codesandbox with react 18. Codesandbox example

Now double click on the drag-icon -> failure

The problem with codesandbox is, that you dont see the package problems behind. Now I am not sure anymore which packages it were affected, but some has dependency problems and are not able to install without npm install -force command.

[alexreardon]

I'll check this out when I'm back in the office. Thanks for looking into it

[buzzie-bee]

The Tree example also uses ReactDOM.render which is unsupported post React17 and throws an error.

https://atlassian.design/components/pragmatic-drag-and-drop/examples/#tree

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

pragmatic-drag-and-drop/docs/examples/pieces/tree/tree-item.tsx:283 ReactDOM.render(<Preview item={item} />, container);

Ideally the core package and examples should also work in the latest versions of React.

[AlisherSaparov]

My colleague got it working in codesandbox with react 18. Codesandbox example

Now double click on the drag-icon -> failure

The problem with codesandbox is, that you dont see the package problems behind. Now I am not sure anymore which packages it were affected, but some has dependency problems and are not able to install without npm install -force command.

DropIndicator is blinking in react 18. You may notice it in this example, when cursor moves between elements.

[Paul6552]

@alexreardon Maybe any news regarding this topic?