{"action":"created","issue":{"url":"https://api.github.com/repos/mxstbr/react-boilerplate/issues/1202","repository_url":"https://api.github.com/repos/mxstbr/react-boilerplate","labels_url":"https://api.github.com/repos/mxstbr/react-boilerplate/issues/1202/labels{/name}","comments_url":"https://api.github.com/repos/mxstbr/react-boilerplate/issues/1202/comments","events_url":"https://api.github.com/repos/mxstbr/react-boilerplate/issues/1202/events","html_url":"https://github.com/mxstbr/react-boilerplate/issues/1202","id":187549423,"number":1202,"title":"Issue with adding meterial-ui library","user":{"login":"wer32","id":262981,"avatar_url":"https://avatars.githubusercontent.com/u/262981?v=3","gravatar_id":"","url":"https://api.github.com/users/wer32","html_url":"https://github.com/wer32","followers_url":"https://api.github.com/users/wer32/followers","following_url":"https://api.github.com/users/wer32/following{/other_user}","gists_url":"https://api.github.com/users/wer32/gists{/gist_id}","starred_url":"https://api.github.com/users/wer32/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wer32/subscriptions","organizations_url":"https://api.github.com/users/wer32/orgs","repos_url":"https://api.github.com/users/wer32/repos","events_url":"https://api.github.com/users/wer32/events{/privacy}","received_events_url":"https://api.github.com/users/wer32/received_events","type":"User","site_admin":false},"labels":[{"id":306827362,"url":"https://api.github.com/repos/mxstbr/react-boilerplate/labels/unconfirmed-bug","name":"unconfirmed-bug","color":"f7c6c7","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2016-11-06T09:51:19Z","updated_at":"2016-11-07T09:59:01Z","closed_at":null,"body":"Hi,\r\n\r\nHave anybody successfully added material-ui library to react-boilerplate for static resources?\r\n\r\nI have some issues with adding material-ui to react-boilerplate.\r\nThe issue is only with static resources. I mean if run **npm run build** and then put all resources from /build folder to web server then project will not work correct. \r\nBut it works well when start project **npm run start**.\r\n\r\nSteps to reproduce:\r\n1. add to package.json\r\n`\"material-ui\": \"0.16.1\"`\r\n\r\n2. add to package.json\r\n`\"react-tap-event-plugin\": \"1.0.0\",`\r\n\r\n3. replace \r\n```\r\nconst render = (messages) => {\r\n  ReactDOM.render(\r\n    <Provider store={store}>\r\n      <LanguageProvider messages={messages}>\r\n        <Router\r\n          history={history}\r\n          routes={rootRoute}\r\n          render={\r\n            // Scroll to top when going to a new page, imitating default browser\r\n            // behaviour\r\n            applyRouterMiddleware(useScroll())\r\n          }\r\n        />\r\n      </LanguageProvider>\r\n    </Provider>,\r\n    document.getElementById('app')\r\n  );\r\n};\r\n``` \r\nwith next code\r\n```\r\nconst injectTapEventPlugin = require('react-tap-event-plugin');\r\ninjectTapEventPlugin();\r\n\r\nimport MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';\r\n\r\nconst render = (messages) => {\r\n  ReactDOM.render(\r\n    <Provider store={store}>\r\n      <MuiThemeProvider>\r\n        <LanguageProvider messages={messages}>\r\n          <Router\r\n            history={history}\r\n            routes={rootRoute}\r\n            render={\r\n              // Scroll to top when going to a new page, imitating default browser\r\n              // behaviour\r\n              applyRouterMiddleware(useScroll())\r\n            }\r\n          />\r\n        </LanguageProvider>\r\n      </MuiThemeProvider>\r\n    </Provider>,\r\n    document.getElementById('app')\r\n  );\r\n};\r\n```\r\n\r\n4. add \r\n`import AppBar from 'material-ui/AppBar';`\r\n\r\n5. add simple material-ui component to app/containers/App/index.js\r\n```\r\nfunction App(props) {\r\n  return (\r\n    <AppWrapper>\r\n      <Helmet\r\n        titleTemplate=\"%s - React.js Boilerplate\"\r\n        defaultTitle=\"React.js Boilerplate\"\r\n        meta={[\r\n          { name: 'description', content: 'A React.js Boilerplate application' },\r\n        ]}\r\n      />\r\n      <Header />\r\n      <AppBar\r\n        title=\"Title\"\r\n        iconClassNameRight=\"muidocs-icon-navigation-expand-more\"\r\n      />\r\n      {React.Children.toArray(props.children)}\r\n      <Footer />\r\n    </AppWrapper>\r\n  );\r\n}\r\n```\r\n\r\nAfter build project and deploy to webserver any browser show next exception in cosole\r\n\r\n```\r\nmain.54bb541….js:1 Uncaught TypeError: Cannot read property 'document' of undefined\r\n    at Object../ (http://localhost:8080/main.54bb541f4c7e1f0806bc.js:1:16840)\r\n    at Object.<anonymous> (http://localhost:8080/main.54bb541f4c7e1f0806bc.js:1:1892)\r\n    at t (http://localhost:8080/main.54bb541f4c7e1f0806bc.js:1:101)\r\n    at Object../ (http://localhost:8080/main.54bb541f4c7e1f0806bc.js:1:16836)\r\n    at Object.<anonymous> (http://localhost:8080/main.54bb541f4c7e1f0806bc.js:1:1892)\r\n    at t (http://localhost:8080/main.54bb541f4c7e1f0806bc.js:1:101)\r\n    at Object../node_modules/core-js/modules/_export.js (http://localhost:8080/main.54bb541f4c7e1f0806bc.js:8:6258)\r\n    at t (http://localhost:8080/main.54bb541f4c7e1f0806bc.js:1:101)\r\n    at Object../ (http://localhost:8080/main.54bb541f4c7e1f0806bc.js:1:16836)\r\n    at Object.<anonymous> (http://localhost:8080/main.54bb541f4c7e1f0806bc.js:1:1892)\r\n```"},"comment":{"url":"https://api.github.com/repos/mxstbr/react-boilerplate/issues/comments/258792907","html_url":"https://github.com/mxstbr/react-boilerplate/issues/1202#issuecomment-258792907","issue_url":"https://api.github.com/repos/mxstbr/react-boilerplate/issues/1202","id":258792907,"user":{"login":"samit4me","id":3248531,"avatar_url":"https://avatars.githubusercontent.com/u/3248531?v=3","gravatar_id":"","url":"https://api.github.com/users/samit4me","html_url":"https://github.com/samit4me","followers_url":"https://api.github.com/users/samit4me/followers","following_url":"https://api.github.com/users/samit4me/following{/other_user}","gists_url":"https://api.github.com/users/samit4me/gists{/gist_id}","starred_url":"https://api.github.com/users/samit4me/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samit4me/subscriptions","organizations_url":"https://api.github.com/users/samit4me/orgs","repos_url":"https://api.github.com/users/samit4me/repos","events_url":"https://api.github.com/users/samit4me/events{/privacy}","received_events_url":"https://api.github.com/users/samit4me/received_events","type":"User","site_admin":false},"created_at":"2016-11-07T09:59:01Z","updated_at":"2016-11-07T09:59:01Z","body":"Okay, so I added `material-ui` to a [react-gif-search app](https://github.com/samit4me/react-gif-search) I was toying around with, which is based on `create-react-app` but has Redux, react-router and I added react-intl to more closely match this repo.\r\n\r\nGuess what it worked 😄\r\n\r\n---\r\n\r\nKnowing it wasn't react-redux or react-intl causing the issues I checked out the `dev` branch of the repo and did the following:\r\n- `npm i -S react-tap-event-plugin matrial-ui`\r\n- In `app.js` I replaced the `render()` function with:\r\n```\r\nimport MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';\r\nimport injectTapEventPlugin from 'react-tap-event-plugin';\r\ninjectTapEventPlugin();\r\n\r\nconst render = (messages) => {\r\n  ReactDOM.render(\r\n    <MuiThemeProvider>\r\n      <Provider store={store}>\r\n        <LanguageProvider messages={messages}>\r\n          <Router\r\n            history={history}\r\n            routes={rootRoute}\r\n            render={\r\n              // Scroll to top when going to a new page, imitating default browser\r\n              // behaviour\r\n              applyRouterMiddleware(useScroll())\r\n            }\r\n          />\r\n        </LanguageProvider>\r\n      </Provider>\r\n    </MuiThemeProvider>,\r\n    document.getElementById('app')\r\n  );\r\n};\r\n```\r\n- Then added these two lines into `HomePage/index.js` in the appropiate places:\r\n```\r\nimport RaisedButton from 'material-ui/RaisedButton';\r\n...\r\n<RaisedButton label=\"Default\" />\r\n```\r\n\r\nYou won't believe it, but it rendered the material-ui button 😄 🎉\r\n\r\n---\r\n\r\nIn summary, I have no idea why it is NOT working in `master` but there has been 10 PRs merged into `dev` since the last release. My suggestion would be checkout the `dev` branch and see how you go, good news is that is should be fixed in the next release. Hope this helps, let us know how you go."}}
{"actor":{"display_login":"samit4me"}}