Can't have two TagInputs on screen

[biscoe916]

If you attempt to have two tagInputs on the screen, you get an error saying one can't have two html5 backends.

I do not want drag and drop functionality, so if I specify drag and drop should be turned off, it really shouldn't use react-dnd for anything.

[hannesgruber]

Having the same issue. Have a workaround for this been found? Or can it be fixed in a short amount of time?

[dnhuan]

Found a solution! This would resolve the error cannot have two html5 backends at the same time

@hannesgruber @biscoe916 Wrap your <App/> around DndProvider and use import { WithOutContext as ReactTags } from "react-tag-input" instead. Here is my package.json

"react-dnd": "14.0.2",
"react-dnd-html5-backend": "14.0.2",
"react-tag-input": "6.8.1"

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { HTML5Backend } from "react-dnd-html5-backend";
import { DndProvider } from "react-dnd";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <DndProvider backend={HTML5Backend} context={window}>
    <App />
  </DndProvider>
);

then use this in your components

import { WithOutContext as ReactTags } from "react-tag-input";

you'll probably don't need context={window}, but the API may change in later versions, so I'll just keep it.

See react-dnd/react-dnd#3178 and react-dnd/react-dnd#3257

[xzhuah]

Encountered this bug today, this bug goes away when I remove <React.StrictMode>, but I am not sure if there are any side effect.

I also tried wrapping App with DndProvider, but that doesn't make it work under StrictMode.