React-sortable-tree: react-dnd in 2.7 is a complete disaster

[softwareplumber]

react-sortable-tree now seems to depend on two different versions of react-dnd (7.x and 9.4). And in 9.4 the default module format is no longer common-js, which breaks... everything.

I can see you've worked around some issues in react-dnd with module name mapping in package.json.

But... now if I create a new react app using react-sortable-tree I seem to be lost in configuration hell. Looks like I'd have to eject my react app or something to implement the same jest configuration you have used to make it work for you.

I've spent 2 days now trying to figure out how to upgrade react-sortable-tree from 2.6 to 2.7 in my app. Is anyone else having the same problem?

[nreis11]

I encountered similar issues, after upgrading to 2.7.1. My app was built with create-react-app. I encountered jest errors when running npm test. The error was something like "Jest encountered an unexpected token...". None of the built-in or online suggestions worked for me, such as adding a .babelrc file. I also tried modifying my package.json with suggestions from here This was a week ago. Because I was limited on time, I just ended up reverting back to 2.6.2 and was hoping a fix would come along. Or if someone has some type of workaround I'm all ears.

[davidgolden]

As @nreis and @softwareplumber said, upgrading broke everything and caused me to go down a multi-hour rabbit hole. Reverting back to 2.6.2 fixed it. I'm guessing react-sortable-tree needs to start importing the cjs versions of react-dnd (react-dnd-cjs, react-dnd-html5-backend-cjs).

[stavskiys]

In my case, I have that:

  ● Test suite failed to run

   ./node_modules/react-sortable-tree/node_modules/react-dnd-html5-backend/dist/esm/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import HTML5Backend from './HTML5Backend';
                                                                                                    ^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (node_modules/react-sortable-tree/dist/index.cjs.js:11:36)

Looks like it is related with the same...

[wsalazar-peakactivity]

Did this ever get resolved? I'm still experiencing this.

[sunriseslowy]

I solved this using a little trick. I was inspired by the react-dnd testing doc.
at my jest.config.js, I added moduleNameMapper like this.

module.exports = {
  // ...
  moduleNameMapper: {
    '^dnd-core$': 'dnd-core/dist/cjs',
    '^react-dnd-html5-backend$': 'react-dnd-html5-backend/dist/cjs',
    '^react-dnd-touch-backend$': 'react-dnd-touch-backend/dist/cjs',
    '^react-dnd-test-backend$': 'react-dnd-test-backend/dist/cjs',
    '^react-dnd-test-utils$': 'react-dnd-test-utils/dist/cjs',
    '^react-dnd$': 'react-sortable-tree/node_modules/react-dnd/dist/cjs'
  },
  // ...
};

Of course this is not a perfect solution, if you use react-dnd on other components, it may cause other error.. but I use react-dnd only for react-sortable-tree, so it works fine so far.