{"action":"created","issue":{"url":"https://api.github.com/repos/gpbl/react-locale-hot-switch/issues/2","labels_url":"https://api.github.com/repos/gpbl/react-locale-hot-switch/issues/2/labels{/name}","comments_url":"https://api.github.com/repos/gpbl/react-locale-hot-switch/issues/2/comments","events_url":"https://api.github.com/repos/gpbl/react-locale-hot-switch/issues/2/events","html_url":"https://github.com/gpbl/react-locale-hot-switch/issues/2","id":63154133,"number":2,"title":"Issue with Safari, require.ensure","user":{"login":"sebastienbarre","id":329967,"avatar_url":"https://avatars.githubusercontent.com/u/329967?v=3","gravatar_id":"","url":"https://api.github.com/users/sebastienbarre","html_url":"https://github.com/sebastienbarre","followers_url":"https://api.github.com/users/sebastienbarre/followers","following_url":"https://api.github.com/users/sebastienbarre/following{/other_user}","gists_url":"https://api.github.com/users/sebastienbarre/gists{/gist_id}","starred_url":"https://api.github.com/users/sebastienbarre/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sebastienbarre/subscriptions","organizations_url":"https://api.github.com/users/sebastienbarre/orgs","repos_url":"https://api.github.com/users/sebastienbarre/repos","events_url":"https://api.github.com/users/sebastienbarre/events{/privacy}","received_events_url":"https://api.github.com/users/sebastienbarre/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-03-20T03:51:53Z","updated_at":"2015-03-20T06:59:01Z","closed_at":null,"body":"Thanks for this great example.\r\nI've issues making it work in my own code. Consider:\r\n```\r\nif (!global.Intl) {\r\n  require.ensure([\r\n    'intl/Intl',\r\n    'intl/locale-data/jsonp/en.js'\r\n  ], function (require) {\r\n    require('intl/Intl');\r\n    require('intl/locale-data/jsonp/en.js');\r\n  });\r\n}\r\n\r\nvar React     = require('react/addons');\r\nvar ReactIntl = require('react-intl');\r\n```\r\nUsing ```require.ensure``` moves the ```intl``` code in a separate chunk (say, ```1.1.js```). However, ```react``` and ```react-intl``` go in another chunk (in my case, ```vendor.js```). In my ```index.html```, I load ```vendor.js```, then an ```app.js``` with my own code, and bootstrap React. Safari groaks though:\r\n```\r\nReferenceError: Can't find variable: Intl\r\n```\r\nSafari's error points at a line found in ```react-intl/lib/mixins.js```:\r\n```\r\nexports[\"default\"] = {\r\n[...]\r\n    getNumberFormat  : intl$format$cache$$[\"default\"](Intl.NumberFormat),\r\n```  \r\nIt seems that this line is evaluated when the ```vendor.js``` chunk is loaded, but the call to ```require.ensure``` has not completed yet, and ```Intl.NumberFormat``` is not defined. \r\n\r\nThis is puzzling me because I thought ```require.ensure``` was synchronous -- the [doc](http://webpack.github.io/docs/code-splitting.html) states:\r\n```\r\nrequire.ensure(dependencies, callback):\r\nThe require.ensure method ensures that every dependency in dependencies can be synchronously required when calling the callback.\r\n```\r\nI might have misunderstood that, either way if it's loaded asynchronously in your example, then the chunk that requires ```react-intl``` has to be as well, and happen after? How do you ensure that is not clear to me.\r\n\r\nThanks"},"comment":{"url":"https://api.github.com/repos/gpbl/react-locale-hot-switch/issues/comments/83940618","html_url":"https://github.com/gpbl/react-locale-hot-switch/issues/2#issuecomment-83940618","issue_url":"https://api.github.com/repos/gpbl/react-locale-hot-switch/issues/2","id":83940618,"user":{"login":"gpbl","id":120693,"avatar_url":"https://avatars.githubusercontent.com/u/120693?v=3","gravatar_id":"","url":"https://api.github.com/users/gpbl","html_url":"https://github.com/gpbl","followers_url":"https://api.github.com/users/gpbl/followers","following_url":"https://api.github.com/users/gpbl/following{/other_user}","gists_url":"https://api.github.com/users/gpbl/gists{/gist_id}","starred_url":"https://api.github.com/users/gpbl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gpbl/subscriptions","organizations_url":"https://api.github.com/users/gpbl/orgs","repos_url":"https://api.github.com/users/gpbl/repos","events_url":"https://api.github.com/users/gpbl/events{/privacy}","received_events_url":"https://api.github.com/users/gpbl/received_events","type":"User","site_admin":false},"created_at":"2015-03-20T06:59:01Z","updated_at":"2015-03-20T06:59:01Z","body":"Hi @sebastienbarre thanks for reporting this. With `require.ensure`, dependencies are synchronous *in the callback*. So, if react-intl needs `Intl` in order to be `require`d, you should move the modules requiring it *after* `require.ensure` has been done.\r\n(maybe the react-intl version I used in this project didn't need `Intl` in the global scope yet).\r\n\r\nI'd move the `require('./App.js')` in the callback: [client.js](https://github.com/gpbl/react-locale-hot-switch/blob/master/client.js) should be written as\r\n\r\n```\r\nvar React = require('react');\r\nvar i18nLoader = require('./i18n');\r\nfunction renderApp(i18n) {\r\n  // here we have Intl\r\n  var App = require('./App.js');\r\n  React.render(<App {...i18n} />, document.body);\r\n}\r\nvar defaultLocale = document.documentElement.getAttribute('lang');\r\ni18nLoader(defaultLocale, renderApp);\r\n```"}}