{"action":"created","issue":{"url":"https://api.github.com/repos/gajus/react-css-modules/issues/84","repository_url":"https://api.github.com/repos/gajus/react-css-modules","labels_url":"https://api.github.com/repos/gajus/react-css-modules/issues/84/labels{/name}","comments_url":"https://api.github.com/repos/gajus/react-css-modules/issues/84/comments","events_url":"https://api.github.com/repos/gajus/react-css-modules/issues/84/events","html_url":"https://github.com/gajus/react-css-modules/issues/84","id":127980334,"number":84,"title":"States loss on objects decorated with react-css-modules in IE9 and 10","user":{"login":"griable","id":193908,"avatar_url":"https://avatars.githubusercontent.com/u/193908?v=3","gravatar_id":"","url":"https://api.github.com/users/griable","html_url":"https://github.com/griable","followers_url":"https://api.github.com/users/griable/followers","following_url":"https://api.github.com/users/griable/following{/other_user}","gists_url":"https://api.github.com/users/griable/gists{/gist_id}","starred_url":"https://api.github.com/users/griable/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/griable/subscriptions","organizations_url":"https://api.github.com/users/griable/orgs","repos_url":"https://api.github.com/users/griable/repos","events_url":"https://api.github.com/users/griable/events{/privacy}","received_events_url":"https://api.github.com/users/griable/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/gajus/react-css-modules/labels/bug","name":"bug","color":"fc2929"}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":34,"created_at":"2016-01-21T17:43:35Z","updated_at":"2016-07-12T04:41:43Z","closed_at":"2016-02-24T14:40:38Z","body":"I'm getting an error:\r\n\r\n```\r\nSCRIPT5007: Unable to get property 'numberWidth' of undefined or null reference\r\n```\r\nwhen trying to use a basic state property in the render method in IE9 and 10 but not with Chrome nor Firefox.\r\n\r\nI tried to make my code as minimal as possible to ease reproducibility:\r\n\r\n`.babelrc`:\r\n\r\n```bash\r\n{\r\n  \"presets\": [\"react\", \"es2015\"]\r\n}\r\n```\r\n\r\n`.webpack.config.dev.js`:\r\n\r\n```javascript\r\nvar path = require('path');\r\nvar webpack = require('webpack');\r\nconst autoprefixer = require('autoprefixer');\r\n\r\nmodule.exports = {\r\n  context: __dirname + '/src',\r\n  entry: [\r\n    './index',\r\n  ],\r\n  output: {\r\n    path: path.join(__dirname, 'build'),\r\n    filename: 'output.js'\r\n  },\r\n  module: {\r\n    loaders: [{\r\n      test: /\\.jsx?/,\r\n      loaders: ['babel'],\r\n      include: path.join(__dirname, 'src')\r\n    },\r\n    {\r\n      test: /\\.scss$/,\r\n      loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass!postcss'\r\n    }]\r\n  },\r\n  postcss: [ autoprefixer({ browsers: ['last 1 version', 'ie >= 9'] })]\r\n};\r\n```\r\n\r\n`src/index.js`:\r\n\r\n```javascript\r\nimport 'babel-polyfill'\r\nimport React from 'react'\r\nimport ReactDOM from 'react-dom'\r\nimport CSSModules from 'react-css-modules'\r\nimport styles from './components/App.scss'\r\n\r\nclass HelloWorld extends React.Component {\r\n  constructor() {\r\n    super()\r\n    this.state = { numberWidth: 0 }\r\n  }\r\n  render() {\r\n    console.log(this.state.numberWidth)\r\n    return <h1>HelloWorld {this.state.numberWidth}</h1>\r\n  }\r\n}\r\n\r\nconst HelloWorldDecorated = CSSModules(HelloWorld, styles)\r\n\r\nReactDOM.render(\r\n  <HelloWorldDecorated />,\r\n  document.getElementById('container')\r\n);\r\n```\r\n\r\nAnd I'm building this exemple using `webpack --config webpack.config.dev.js`\r\n\r\n### The error\r\n\r\nThis works fine in Chrome / FF but not in IE8/9.\r\n\r\n```\r\nSCRIPT5007: Unable to get property 'numberWidth' of undefined or null reference\r\n```\r\n\r\nI tried both with @CSSModules es7 decorator and high-order syntax CSSModules()"},"comment":{"url":"https://api.github.com/repos/gajus/react-css-modules/issues/comments/231935783","html_url":"https://github.com/gajus/react-css-modules/issues/84#issuecomment-231935783","issue_url":"https://api.github.com/repos/gajus/react-css-modules/issues/84","id":231935783,"user":{"login":"michaeljacobdavis","id":916905,"avatar_url":"https://avatars.githubusercontent.com/u/916905?v=3","gravatar_id":"","url":"https://api.github.com/users/michaeljacobdavis","html_url":"https://github.com/michaeljacobdavis","followers_url":"https://api.github.com/users/michaeljacobdavis/followers","following_url":"https://api.github.com/users/michaeljacobdavis/following{/other_user}","gists_url":"https://api.github.com/users/michaeljacobdavis/gists{/gist_id}","starred_url":"https://api.github.com/users/michaeljacobdavis/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/michaeljacobdavis/subscriptions","organizations_url":"https://api.github.com/users/michaeljacobdavis/orgs","repos_url":"https://api.github.com/users/michaeljacobdavis/repos","events_url":"https://api.github.com/users/michaeljacobdavis/events{/privacy}","received_events_url":"https://api.github.com/users/michaeljacobdavis/received_events","type":"User","site_admin":false},"created_at":"2016-07-12T04:41:43Z","updated_at":"2016-07-12T04:41:43Z","body":"Looks like this is back in v3.7.7. I'm guessing https://github.com/gajus/react-css-modules/commit/fe9e555c832588222b4c672617be39b9b91975e2 is the culprit. Same symptom of the constructor not being called and `this.state` being null in `#render`."}}
{"actor":{"display_login":"michaeljacobdavis"}}