React DnD does not provide a default export

[primozs]

This seams it can trigger error in completely unrelated third party module like for example "mapbox-gl" in my case.
https://github.com/gaearon/react-dnd/blob/master/src/index.js#L7

Error happens when instantiating map otherwise everything works fine. The whole drag and drop also works fine in another page. And if I disable drag and drop then map works ok also.

Error happens when dnd context is set and instantiating unrelated code like map in my case:

// root component
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
export default DragDropContext(HTML5Backend)(Root);

// unrelated code without drag and drop map component
   map = new mapboxgl.Map({
    ...
    });

Did anyone came across something similar? Anyone has a suggestion to a quick fix, workaround?
Cheers

[gaearon]

Please set a breakpoint during the warning and check the stack trace. File an issue with the relevant project that tries to access the default export (which does not exist).

[primozs]

It may be for the best but this is a bit annoying and this message is deceiving...

[gaearon]

What is deceiving about it? Have you checked why this other library you are using triggers it? It should be fixable on their side.

[primozs]

• With the third party library Its a bit complex setup of webpack, webworkify-webpack and mapbox-gl and I am having problem figuring out which module and why is giving me trouble.
• Why the message is deceiving: Its talking about how to correctly include dnd module, submodule while the real problem is miles away. I think the module should mind itself as much as possible.

[primozs]

Problem could be also context injection into child component or something related to serverside render.

1. If I comment out dnd stuff below:

//import { DragDropContext } from 'react-dnd';
//import HTML5Backend from 'react-dnd-html5-backend';

const Root = React.createClass({
  displayName: 'Root',

  propTypes: {
    children: React.PropTypes.any
  },

  render() {
    return (
      <App centered={false}>
        {this.props.children}
      </App>
    );
  }
});
// export default DragDropContext(HTML5Backend)(Root);
export default Root;

1. Then build it (server, client)
2. Then uncomment the stuff from above and just build the client code, then everything works. I can also drag and drop over the map. etc...

The point is the message does not have anything to do with all this..

[primozs]

I don't know why, but it looks like DragDropContext somehow trips webworkify-webpack while instantiation mapbox.Map if its also server side rendered first.

[gaearon]

I didn’t even know webworkify-webpack exists :-). Apparently here is the access: https://github.com/borisirota/webworkify-webpack/blob/2b7a1e9e82b889aaa17e4d5e40e034bd51b140fa/index.js#L23.

I don’t mind removing the warning if it causes much trouble. I’d accept a PR removing it.

[primozs]

I have also made pull request on webworkify-webpack to check for undefined.
Thank you @gaearon for your work!
Cheers

[gaearon]

Fixed in 2.1.3, thanks for the PR!

[primozs]

Thank you for your help!