{"action":"created","issue":{"url":"https://api.github.com/repos/webpack/webpack/issues/6704","repository_url":"https://api.github.com/repos/webpack/webpack","labels_url":"https://api.github.com/repos/webpack/webpack/issues/6704/labels{/name}","comments_url":"https://api.github.com/repos/webpack/webpack/issues/6704/comments","events_url":"https://api.github.com/repos/webpack/webpack/issues/6704/events","html_url":"https://github.com/webpack/webpack/issues/6704","id":303341483,"number":6704,"title":"Bug with module.exports.__esModule on older browsers","user":{"login":"gfmio","id":2878342,"avatar_url":"https://avatars1.githubusercontent.com/u/2878342?v=4","gravatar_id":"","url":"https://api.github.com/users/gfmio","html_url":"https://github.com/gfmio","followers_url":"https://api.github.com/users/gfmio/followers","following_url":"https://api.github.com/users/gfmio/following{/other_user}","gists_url":"https://api.github.com/users/gfmio/gists{/gist_id}","starred_url":"https://api.github.com/users/gfmio/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gfmio/subscriptions","organizations_url":"https://api.github.com/users/gfmio/orgs","repos_url":"https://api.github.com/users/gfmio/repos","events_url":"https://api.github.com/users/gfmio/events{/privacy}","received_events_url":"https://api.github.com/users/gfmio/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2018-03-08T03:15:16Z","updated_at":"2018-03-09T07:55:45Z","closed_at":"2018-03-09T07:55:45Z","author_association":"NONE","body":"<!-- Please don't delete this template or we'll close your issue -->\r\n<!-- Before creating an issue please make sure you are using the latest version of webpack. -->\r\n<!-- Also consider trying the webpack@beta version, maybe it's already fixed. -->\r\n\r\n**Do you want to request a *feature* or report a *bug*?**\r\n\r\nBug / Bugfix\r\n\r\n<!-- Please ask questions on StackOverflow or the webpack Gitter (https://gitter.im/webpack/webpack). -->\r\n<!-- Issues which contain questions or support requests will be closed. -->\r\n\r\n**What is the current behavior?**\r\n\r\nIn old versions of Firefox, Chrome, Safari and Android Browser (afaik), the line `exports.__esModule = true;` will generate the following error when it is executed within a module managed by Webpack: `Uncaught TypeError: Cannot assign to read only property '__esModule' of #<Object>`.\r\n\r\nCode example:\r\n\r\n```js\r\n(function(module, exports, __webpack_require__) {\r\n    \"use strict\";\r\n    exports.__esModule = true;\r\n})\r\n```\r\n\r\nThis line is in particular output in all TypeScript files compiled to ES3. Hence, if you want compatibility with old browsers, you will encounter this issue. But afaik, it's also practice in babel and other projects to use / include this line.\r\n\r\n**If the current behavior is a bug, please provide the steps to reproduce.**\r\n\r\nBundle any Webpack module with the above line and execute on an old browser with the issue, e.g. Chrome 15 on BrowserStack.\r\n\r\nUPDATE: I just realised that the bug is also non-deterministic and seems to depend on module load order which appears to be non-deterministic as well.\r\n\r\n<!-- A great way to do this is to provide your configuration via a GitHub gist. -->\r\n<!-- Best provide a minimal reproduceable repo -->\r\n<!-- If your issue is caused by a plugin or loader file the issue on the plugin/loader repo -->\r\n\r\n**What is the expected behavior?**\r\n\r\nThere should not be an error.\r\n\r\n**If this is a feature request, what is motivation or use case for changing the behavior?**\r\n\r\nI'm not entirely sure what the cause of this error is, but defining *any other* export before this line will fix this, for example:\r\n\r\n```js\r\n(function(module, exports, __webpack_require__) {\r\n    \"use strict\";\r\n    exports.foo = \"bar\";\r\n    exports.__esModule = true;\r\n})\r\n```\r\n\r\nInterestingly, the issue is also fixed, if `__esModule` is assigned before the module function call, e.g. by initialising it to `undefined`. This can be done when the exports object is initialised or manually, as in this example from the very beginning of some Webpack output:\r\n\r\n```js\r\n/******/ (function(modules) { // webpackBootstrap\r\n/******/ \t// The module cache\r\n/******/ \tvar installedModules = {};\r\n/******/\r\n/******/ \t// The require function\r\n/******/ \tfunction __webpack_require__(moduleId) {\r\n/******/\r\n/******/ \t\t// Check if module is in cache\r\n/******/ \t\tif(installedModules[moduleId]) {\r\n/******/ \t\t\treturn installedModules[moduleId].exports;\r\n/******/ \t\t}\r\n/******/ \t\t// Create a new module (and put it into the cache)\r\n/******/ \t\tvar module = installedModules[moduleId] = {\r\n/******/ \t\t\ti: moduleId,\r\n/******/ \t\t\tl: false,\r\n/******/ \t\t\t// exports: {} // Normal webpack output\r\n/******/ \t\t\texports: { __esModule: undefined } // Proposed fix\r\n/******/ \t\t};\r\n/******/                // Instead of initialising the object with __esModule, it could also be set here\r\n/******/                // module.exports.__esModule = undefined;\r\n/******/ \t\t// Execute the module function\r\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\r\n/******/\r\n/******/ \t\t// Flag the module as loaded\r\n/******/ \t\tmodule.l = true;\r\n/******/\r\n/******/ \t\t// Return the exports of the module\r\n/******/ \t\treturn module.exports;\r\n/******/ \t}\r\n```\r\n\r\nThis way, it should not interfere with webpack's other behaviour and not cause any side effects on other applications, because those checks, if at all present, check for the truthiness of `exports.__esModule`.\r\n\r\nWhile this is just an issue with some old browsers, the fix is quite simple and only costs a handful of bytes.\r\n\r\nIs this something you would consider? If so, can I submit a PR with the fix?\r\n\r\n**Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.**\r\n\r\nI've tested both the problem and the fix in Chrome 15 on Win XP on BrowserStack. The output was generated with webpack `v3.5.1`. I haven't had the option of testing webpack 4 since the `extract-text-webpack-plugin` is not yet compatible and so I can't migrate my project yet."},"comment":{"url":"https://api.github.com/repos/webpack/webpack/issues/comments/371739916","html_url":"https://github.com/webpack/webpack/issues/6704#issuecomment-371739916","issue_url":"https://api.github.com/repos/webpack/webpack/issues/6704","id":371739916,"user":{"login":"sokra","id":1365881,"avatar_url":"https://avatars0.githubusercontent.com/u/1365881?v=4","gravatar_id":"","url":"https://api.github.com/users/sokra","html_url":"https://github.com/sokra","followers_url":"https://api.github.com/users/sokra/followers","following_url":"https://api.github.com/users/sokra/following{/other_user}","gists_url":"https://api.github.com/users/sokra/gists{/gist_id}","starred_url":"https://api.github.com/users/sokra/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sokra/subscriptions","organizations_url":"https://api.github.com/users/sokra/orgs","repos_url":"https://api.github.com/users/sokra/repos","events_url":"https://api.github.com/users/sokra/events{/privacy}","received_events_url":"https://api.github.com/users/sokra/received_events","type":"User","site_admin":false},"created_at":"2018-03-09T07:55:45Z","updated_at":"2018-03-09T07:55:45Z","author_association":"OWNER","body":"This is a super weird issue, but as this is caused by TypeScript or babel, it should be considered to be fixed in these projects.\r\n\r\nAnyway I don't see a reason why this should be fixed in the webpack runtime. The next one sets a property `exports.__grrrrr`, should this also be added to the default exports object.\r\n\r\nAnother reasons is that this is a potential breaking change, because now `Object.keys(exports)` returns `__esModule` by default for every module. Can't do that."}}
{"actor":{"display_login":"sokra"}}