Error bundling with browserify

[hfcorreia]

I'm trying to include react-anything-sortable with an existing component that uses browserify. I'm getting the following error when trying to render the component:

Uncaught Error: Cannot find module "react-dom"

I then tried to create a clean project, however the problem still persisted, and after doing some digging I found that this is triggered from this code in the generated bundle.js:

var _reactDom = __webpack_require__(!(function webpackMissingModule() { 
  var e = new Error("Cannot find module \"react-dom\""); 
  e.code = 'MODULE_NOT_FOUND'; 
  throw e; 
}()));

I suspect that maybe it has something to do how webpack bundles the js. Do you have any clue of what might be the issue here? The example is I used is straightforward:

• package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "Testing react sortable",
  "main": "src/index.js",
  "scripts": {
    "build": "browserify --transform [browserify-shim --global=true] --transform [reactify --global=true] -s __ModuleExport__ src/index.js -o dist/bundle.js"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "hfcorreia",
  "license": "MIT",
  "devDependencies": {
    "browserify": "^9.0.3",
    "reactify": "^1.0.0",
    "browserify-shim": "~3.8.10"
  },
  "browserify-shim": {
    "react": "global:React",
    "react/lib/ReactDOM": "global:React"
  },
  "browserify": {
    "transform": [
      "reactify",
      "browserify-shim"
    ]
  },
  "dependencies": {
    "react": "^0.14.3",
    "react-anything-sortable": "^1.1.1",
    "react-dom": "^0.14.3"
  }
}

• List.js

var React = require('react'),
  Item = require('./Item.js'),
  Sortable = require('react-anything-sortable');

var List = React.createClass({
  render: function() {
    return (
      <Sortable>
        <Item sortData="1">One</Item>
        <Item sortData="2">Two</Item>
        <Item sortData="3">Three</Item>
      </Sortable>
    )
  }
});

module.exports = List;

• Item.js

var React = require('react');
var SortableItemMixin = require('react-anything-sortable').SortableItemMixin;

var Item = React.createClass({
  mixins: [SortableItemMixin],

  render: function(){
    return this.renderWithSortable(
      <div>{this.props.children}</div>
    );
  }
});

module.exports = Item;

[jasonslyvia]

Hi @hfcorreia , can you post your node version & npm version?

[jasonslyvia]

It seems like I accidentally released a version built with node 5 and npm 3, that might be the problem.

Can you please try version 1.1.2 to see if the problem is solved?

[hfcorreia]

In 1.1.2, the described error does not occur. Yet, I'm now getting:

Warning: React.findDOMNode is deprecated. Please use ReactDOM.findDOMNode from require('react-dom') instead.

My node version is v5.0.0 and npm is 3.3.9.

[jasonslyvia]

That's weird, I'll dig it.

[jasonslyvia]

Hi, I kind of figure out that your error might be caused by browserify-shim, removing browserify-shim config parts in package.json fix the problem.