How to make it work with Browserify Shim? Error: Uncaught TypeError: Object.defineProperty called on non-object

[gradosevic]

Problem description

I use browserify shim and all my imports/exports are defined in package.json
My package.json looks something like this:

 {
  "dependencies": {
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.2.0",
    "browserify": "^13.0.0",
....
   "material-ui": "^0.15.2",
    "react": "^15.2.1",
    "react-addons-linked-state-mixin": "^0.14.3",
    "react-dom": "^15.2.1",
    "react-tap-event-plugin": "^1.0.0",
  },
  "devDependencies": {
    "browserify-shim": "^3.8.12"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
"browser": {
    "react": "./node_modules/react/dist/react.js",
    "react-dom": "./node_modules/react-dom/dist/react-dom.js",
    "material-ui": "./node_modules/material-ui/index.js",
  "main": "./admin/js/main.js",
...
},
 "browserify-shim": {
    "react": "React",
    "react-dom": "ReactDOM",
    "material-ui": "MaterialUI",
},
    "main": {
      "depends": [
        "react:react",
        "react-dom:ReactDOM",
        "material-ui:MaterialUI"
      ]
    }
}

Bootstrap script is main.js file. I tried previously to import components there like this:

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

but that didn't work. I presume there is different way to do this with browserify shim, without imports.

This is the actual error I get in console:

Uncaught TypeError: Object.defineProperty called on non-object

...

module.exports = warning;
}).call(this,require('_process'))
},{"./emptyFunction":51,"_process":57}],55:[function(require,module,exports){
(function (global){
; var __browserify_shim_require__=require;(function browserifyShim(module, exports, require, define, browserify_shim__define__module__export__) {
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ToolbarTitle = exports.ToolbarSeparator = exports.ToolbarGroup = exports.Toolbar = exports.Toggle = exports.TimePicker = exports.TextField = exports.TableRowColumn = exports.TableRow = exports.TableHeaderColumn = exports.TableHeader = exports.TableFooter = exports.TableBody = exports.Table = exports.Tab = exports.Tabs = exports.Snackbar = exports.Stepper = exports.StepLabel = exports.StepContent = exports.StepButton = exports.Step = exports.SvgIcon = exports.Subheader = exports.Slider = exports.SelectField = exports.RefreshIndicator = exports.RaisedButton = exports.RadioButtonGroup = exports.RadioButton = exports.Popover = exports.Paper = exports.MuiThemeProvider = exports.MenuItem = exports.Menu = exports.MakeSelectable = exports.ListItem = exports.List = exports.LinearProgress = exports.IconMenu = exports.IconButton = exports.GridTile = exports.GridList = exports.FontIcon = exports.FloatingActionButton = exports.FlatButton = exports.DropDownMenu = exports.Drawer = exports.Divider = exports.Dialog = exports.DatePicker = exports.CircularProgress = exports.Chip = exports.Checkbox = exports.CardText = exports.CardTitle = exports.CardMedia = exports.CardHeader = exports.CardActions = exports.Card = exports.Badge = exports.Avatar = exports.AutoComplete = exports.AppBar = undefined;

var _AppBar2 = __browserify_shim_require__('./AppBar');

var _AppBar3 = _interopRequireDefault(_AppBar2);

var _AutoComplete2 = __browserify_shim_require__('./AutoComplete');

Versions

• Material-UI: 0.15.2
• React: 15.2.1
• Browser: Chrome 51

[oliviertassinari]

@gradosevic Have you found a workaround? That looks like an issue with an external dependency.