{"action":"opened","issue":{"url":"https://api.github.com/repos/react-toolbox/react-toolbox/issues/1039","repository_url":"https://api.github.com/repos/react-toolbox/react-toolbox","labels_url":"https://api.github.com/repos/react-toolbox/react-toolbox/issues/1039/labels{/name}","comments_url":"https://api.github.com/repos/react-toolbox/react-toolbox/issues/1039/comments","events_url":"https://api.github.com/repos/react-toolbox/react-toolbox/issues/1039/events","html_url":"https://github.com/react-toolbox/react-toolbox/issues/1039","id":194793969,"number":1039,"title":"Error loading Overlay css","user":{"login":"Bonitis","id":15722894,"avatar_url":"https://avatars.githubusercontent.com/u/15722894?v=3","gravatar_id":"","url":"https://api.github.com/users/Bonitis","html_url":"https://github.com/Bonitis","followers_url":"https://api.github.com/users/Bonitis/followers","following_url":"https://api.github.com/users/Bonitis/following{/other_user}","gists_url":"https://api.github.com/users/Bonitis/gists{/gist_id}","starred_url":"https://api.github.com/users/Bonitis/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Bonitis/subscriptions","organizations_url":"https://api.github.com/users/Bonitis/orgs","repos_url":"https://api.github.com/users/Bonitis/repos","events_url":"https://api.github.com/users/Bonitis/events{/privacy}","received_events_url":"https://api.github.com/users/Bonitis/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-12-10T21:04:20Z","updated_at":"2016-12-10T21:04:20Z","closed_at":null,"body":"I am trying to include a Drawer component in my web app, which already uses sass and is configured with webpack to use sass-loader, and I keep getting this error:\r\n\r\n```\r\nC:\\...\\node_modules\\react-toolbox\\lib\\overlay\\theme.css:1\r\n(function (exports, require, module, __filename, __dirname) { :root {\r\n                                                              ^\r\nSyntaxError: Unexpected token :\r\n    at Object.exports.runInThisContext (vm.js:76:16)\r\n    at Module._compile (module.js:513:28)\r\n    at Module._extensions..js (module.js:550:10)\r\n    at Object.require.extensions.(anonymous function) [as .js] (C:\\...\\node_modules\\babel-register\\lib\\node.js:152:7)\r\n    at Module.load (module.js:458:32)\r\n    at tryModuleLoad (module.js:417:12)\r\n    at Function.Module._load (module.js:409:3)\r\n    at Module.require (module.js:468:17)\r\n    at require (internal/module.js:20:19)\r\n    at Object.<anonymous> (C:\\...\\node_modules\\react-toolbox\\lib\\overlay\\index.js:14:14)\r\n```\r\n\r\nHere is my code:\r\n\r\n``` javascript\r\nimport { Drawer } from 'react-toolbox/lib/drawer';\r\n\r\n...\r\n\r\nreturn (\r\n          <Drawer\r\n            active={settingsActive}\r\n            onOverlayClick={this.toggleSettings.bind(this)}\r\n            type=\"left\"\r\n            className=\"class-setup-form\"\r\n          >\r\n            <ClassSetupForm\r\n              currentGym={currentGym}\r\n              currentUser={currentUser}\r\n              currentSession={currentSession}\r\n              workoutTypeList={this.props.workoutTypeList}\r\n              classSetup={this.props.classSetup}\r\n              coachList={this.props.coachList}\r\n              onSubmit={this.createNewSession.bind(this)}\r\n              workoutPageNav={this.workoutPageNav.bind(this)}\r\n            />\r\n          </Drawer>\r\n        );\r\n```\r\n\r\nAnd my webpack loaders:\r\n``` javascript\r\nmodule: {\r\n    loaders: [\r\n      {\r\n        test: /\\.scss$/,\r\n        loaders: ['style-loader', 'css-loader', 'sass-loader'],\r\n      }, {\r\n        test: /\\.css$/,\r\n        include: /node_modules/,\r\n        loaders: ['style-loader', 'css-loader'],\r\n      }, {\r\n        test: /\\.jsx*$/,\r\n        exclude: [/node_modules/, /.+\\.config.js/],\r\n        loader: 'babel-loader',\r\n      }, {\r\n        test: /\\.(jpe?g|gif|png|svg)$/i,\r\n        loader: 'url-loader?limit=10000',\r\n      }, {\r\n        test: /\\.json$/,\r\n        loader: 'json-loader',\r\n      },\r\n      {test: /\\.woff(\\?v=\\d+\\.\\d+\\.\\d+)?$/, loader: \"file-loader?mimetype=application/font-woff\"},\r\n      {test: /\\.woff2(\\?v=\\d+\\.\\d+\\.\\d+)?$/, loader: \"file-loader?mimetype=application/font-woff\"},\r\n      {test: /\\.ttf(\\?v=\\d+\\.\\d+\\.\\d+)?$/, loader: \"file-loader?mimetype=application/octet-stream\"},\r\n      {test: /\\.eot(\\?v=\\d+\\.\\d+\\.\\d+)?$/, loader: \"file-loader\"}\r\n    ],\r\n  },\r\n```\r\n\r\nIf I try to load the component directly with no styles, like\r\n``` javascript\r\nimport { Drawer } from 'react-toolbox/lib/drawer/Drawer';\r\n```\r\n\r\nI get the following error in the browser when I trigger the drawer opening:\r\n`Uncaught TypeError: Cannot read property 'drawer' of undefined`\r\n\r\non this line\r\n``` javascript\r\nvar _className = (0, _classnames3.default)([theme.drawer, theme[type]], _defineProperty({}, theme.active, active), className);\r\n```\r\n\r\nAny ideas about what I'm doing wrong?\r\n\r\n"}}
{"actor":{"display_login":"Bonitis"}}