search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.74k stars 32.24k forks source link

No longer possible to build project at all #392

Closed shadowmint closed 9 years ago

shadowmint commented 9 years ago

The use of ES6 proxies has broken everything.

Trying to build the example results in:

[12:03:28] gulp-notify: [Compile Error] Parsing file /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/checkbox.js: Unexpected token (18:6)
[12:03:28] gulp-notify: [Compile Error] Parsing file /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/dialog.js: Unexpected token (17:6)
[12:03:28] gulp-notify: [Compile Error] Parsing file /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/enhanced-button.js: Unexpected token (45:6)
[12:03:28] gulp-notify: [Compile Error] Line 49: Unexpected token ... while parsing /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/floating-action-button.js while parsing file: /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/floating-action-button.js
[12:03:28] gulp-notify: [Compile Error] Parsing file /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/flat-button.js: Unexpected token (25:8)
[12:03:28] gulp-notify: [Compile Error] Parsing file /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/font-icon.js: Unexpected token (12:6)
[12:03:28] gulp-notify: [Compile Error] Line 46: Unexpected token ... while parsing /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/icon-button.js while parsing file: /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/icon-button.js
[12:03:28] gulp-notify: [Compile Error] Parsing file /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/menu-item.js: Unexpected token (64:8)
[12:03:28] gulp-notify: [Compile Error] Parsing file /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/menu.js: Unexpected token (169:8)
[12:03:28] gulp-notify: [Compile Error] Parsing file /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/paper.js: Unexpected token (30:6)
[12:03:28] gulp-notify: [Compile Error] Parsing file /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/radio-button.js: Unexpected token (19:6)
[12:03:28] gulp-notify: [Compile Error] Line 57: Unexpected token ... while parsing /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/radio-button-group.js while parsing file: /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/radio-button-group.js
[12:03:28] gulp-notify: [Compile Error] Parsing file /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/raised-button.js: Unexpected token (47:6)
[12:03:28] gulp-notify: [Compile Error] Line 70: Unexpected token ... while parsing /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/text-field.js while parsing file: /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/text-field.js
[12:03:28] gulp-notify: [Compile Error] Parsing file /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/toggle.js: Unexpected token (19:6)
[12:03:28] gulp-notify: [Compile Error] Parsing file /Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui/js/tooltip.js: Unexpected token (27:6)
[12:03:28] gulp-notify: [Compile Error] Cannot find module './js/date-picker/date-picker' from '/Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui'
[12:03:28] gulp-notify: [Compile Error] Cannot find module './js/svg-icons/svg-icon' from '/Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui'
[12:03:28] gulp-notify: [Compile Error] Cannot find module './js/svg-icons/navigation-menu' from '/Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui'
[12:03:28] gulp-notify: [Compile Error] Cannot find module './js/svg-icons/navigation-chevron-left' from '/Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui'
[12:03:28] gulp-notify: [Compile Error] Cannot find module './js/svg-icons/navigation-chevron-right' from '/Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui'
[12:03:28] gulp-notify: [Compile Error] Cannot find module './js/tabs/tab' from '/Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui'
[12:03:28] gulp-notify: [Compile Error] Cannot find module './js/tabs/tabs' from '/Users/doug/dev/react/hello/material-ui/example/node_modules/material-ui'

Specifically, this is due to the use of:

  render: function() {
    var {
      onTouchTap,
      ...other  <---- This is an ES6 feature that browserify cannot parse.
    } = this.props;

What's the plan here?

Babel does not provide any polyfill for this, and browserify cannot parse it.

yrokhlin commented 9 years ago

+1 just stumbled across this little tid bit as well.

treo commented 9 years ago

That is actually a proposed ES7 feature (see http://facebook.github.io/react/docs/transferring-props.html#rest-and-spread-properties-... ) that react seems to endorse.

You probably need to add reactify (https://www.npmjs.com/package/reactify) to your toolchain when building.

shadowmint commented 9 years ago

@treo The errors above are running gulp in the example directory, which uses reactify.

If some specific reactify config is required, could we at least get the example updated to use it?

On Wednesday, March 11, 2015, treo notifications@github.com wrote:

That is actually a proposed ES7 feature (see http://facebook.github.io/react/docs/transferring-props.html#rest-and-spread-properties-... ) that react seems to endorse.

You probably need to add reactify (https://www.npmjs.com/package/reactify) to your toolchain when building.

— Reply to this email directly or view it on GitHub https://github.com/callemall/material-ui/issues/392#issuecomment-78256607 .

shadowmint commented 9 years ago 
NOTE:

In the example below, the --harmony flag is required as this syntax is an experimental ES7 
syntax. If using the in-browser JSX transformer, simply open your script with 
<script type="text/jsx;harmony=true">.

You must use the --harmony flag with reactify for this to work.

drublic commented 9 years ago

I can currently build the project. Can you please have a look into the problem and close this issue if not applicable anymore?

mmrtnz commented 9 years ago

This should be fixed with #656, @shadowmint can you please pull down the latest master to verify this?

hai-cea commented 9 years ago

Fixed with #656