Exception thrown when combined with Office UI Fabric React

[amadeogallardo]

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

Yes

Which terms did you search for in User Guide?

Not tracked in user guide nor current issues, very specific to Office-UI-Fabric-React compatibility.

Environment

1. node -v: v6.11.4
2. npm -v: 4.1.2
3. yarn --version (if you use Yarn): 1,3,2
4. npm ls react-scripts (if you haven’t ejected): `-- (empty)

Then, specify:

1. Operating system: Windows 10
2. Browser and version (if relevant): Not relevant, compilation error

Steps to Reproduce

(Write your steps here:) An exception is thrown while attempting to include the Office UI Fabric React library in a create-react-app project without TypeScript. This works as expected with create-react-app's default react-scripts, but when used in combination with custom-scripts (this repo) it fails as described below.

The .env configuration is: REACT_APP_DECORATORS = true; REACT_APP_BABEL_STAGE_0 = true;

REACT_APP_SASS = true; REACT_APP_LESS = true; REACT_APP_STYLUS = true;

REACT_APP_CSS_MODULES = true; REACT_APP_SASS_MODULES = true; REACT_APP_STYLUS_MODULES = true; REACT_APP_LESS_MODULES = true;

REACT_APP_WEBPACK_DASHBOARD = true;

Expected Behavior

• The custom-react-scripts library is compatible with Office-UI-Fabric-React.
• No compilation errors are thrown
• All the components work as expected

Actual Behavior

./node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.styles.js
Module build failed: ParseError: C:\[path]\node_modules\office-ui-fabric-react\lib\components\Button\ActionButton\ActionButton.styles.js:60:48
   56|         }
   57|     };
   58|     return Styling_1.concatStyleSets(baseButtonStyles, actionButtonStyles, customStyles);
   59| });
   60| //# sourceMappingURL=ActionButton.styles.js.map
------------------------------------------------------^

unexpected ")"

Reproducible Demo

1. create-react-app my-app --scripts-version custom-react-scripts
2. yarn add office-ui-fabric-react
3. Add the following code to App.js import {Button} from 'office-ui-fabric-react/lib/Button';
4. yarn start
5. Compilation error should be thrown as copied above

UPDATE

This has been resolved by removing the following line from .env REACT_APP_STYLUS = true;

NOTE: setting it to false did NOT fix the issue.

For the project I'm working on, Stylus is not needed. Nonetheless, it's possibly worth investigating why the Stylus support breaks the office-ui-fabric-react library.

PS: things working great otherwise, using this for MobX support of decorators.