Search code examples
reactjsdrag-and-dropreact-tablereact-dnd

How to resolve 'react-dnd-html5-backend' does not contain a default export?

I'm new to React and trying to emulate the Row Drag & Drop code found here: https://react-table-omega.vercel.app/docs/examples/row-dnd

If I open the sandbox, all the default code works fine. If I copy-paste the code locally though, I get the following error when I compile:

Attempted import error: 'react-dnd-html5-backend' does not contain a default export (imported as 'HTML5Backend')

I installed the library using npm install react-dnd-html5-backend --save and haven't modified anything with respect to it.

The import line is:

import HTML5Backend from 'react-dnd-html5-backend'

which is copy-pasted from the tutorial. I don't understand why it's throwing an error, nor how to fix it. Any thoughts?

Solution

  • The solution seems to be that the HTML5Backend part needs to be wrapped in braces { HTML5Backend }:

    import { HTML5Backend } from 'react-dnd-html5-backend'

    is correct

    import HTML5Backend from 'react-dnd-html5-backend'

    is not.