{"action":"created","issue":{"url":"https://api.github.com/repos/Microsoft/TypeScript/issues/14127","repository_url":"https://api.github.com/repos/Microsoft/TypeScript","labels_url":"https://api.github.com/repos/Microsoft/TypeScript/issues/14127/labels{/name}","comments_url":"https://api.github.com/repos/Microsoft/TypeScript/issues/14127/comments","events_url":"https://api.github.com/repos/Microsoft/TypeScript/issues/14127/events","html_url":"https://github.com/Microsoft/TypeScript/issues/14127","id":208229194,"number":14127,"title":"`export const myname = () => {}` functions have no name (according to React Devtools)","user":{"login":"aaronbeall","id":2973900,"avatar_url":"https://avatars1.githubusercontent.com/u/2973900?v=4","gravatar_id":"","url":"https://api.github.com/users/aaronbeall","html_url":"https://github.com/aaronbeall","followers_url":"https://api.github.com/users/aaronbeall/followers","following_url":"https://api.github.com/users/aaronbeall/following{/other_user}","gists_url":"https://api.github.com/users/aaronbeall/gists{/gist_id}","starred_url":"https://api.github.com/users/aaronbeall/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aaronbeall/subscriptions","organizations_url":"https://api.github.com/users/aaronbeall/orgs","repos_url":"https://api.github.com/users/aaronbeall/repos","events_url":"https://api.github.com/users/aaronbeall/events{/privacy}","received_events_url":"https://api.github.com/users/aaronbeall/received_events","type":"User","site_admin":false},"labels":[{"id":127212211,"url":"https://api.github.com/repos/Microsoft/TypeScript/labels/ES6","name":"ES6","color":"c7def8","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/Microsoft/TypeScript/milestones/29","html_url":"https://github.com/Microsoft/TypeScript/milestone/29","labels_url":"https://api.github.com/repos/Microsoft/TypeScript/milestones/29/labels","id":1973940,"number":29,"title":"Future","description":"","creator":{"login":"mhegazy","id":8000722,"avatar_url":"https://avatars3.githubusercontent.com/u/8000722?v=4","gravatar_id":"","url":"https://api.github.com/users/mhegazy","html_url":"https://github.com/mhegazy","followers_url":"https://api.github.com/users/mhegazy/followers","following_url":"https://api.github.com/users/mhegazy/following{/other_user}","gists_url":"https://api.github.com/users/mhegazy/gists{/gist_id}","starred_url":"https://api.github.com/users/mhegazy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mhegazy/subscriptions","organizations_url":"https://api.github.com/users/mhegazy/orgs","repos_url":"https://api.github.com/users/mhegazy/repos","events_url":"https://api.github.com/users/mhegazy/events{/privacy}","received_events_url":"https://api.github.com/users/mhegazy/received_events","type":"User","site_admin":false},"open_issues":256,"closed_issues":1,"state":"open","created_at":"2016-08-31T00:21:08Z","updated_at":"2018-05-17T16:28:28Z","due_on":null,"closed_at":null},"comments":6,"created_at":"2017-02-16T20:00:15Z","updated_at":"2018-05-25T08:50:12Z","closed_at":null,"author_association":"NONE","body":"<!-- BUGS: Please use this template. -->\r\n<!-- QUESTIONS: This is not a general support forum! Ask Qs at http://stackoverflow.com/questions/tagged/typescript -->\r\n<!-- SUGGESTIONS: See https://github.com/Microsoft/TypeScript-wiki/blob/master/Writing-Good-Design-Proposals.md -->\r\n\r\n**TypeScript Version:**  2.1.5\r\n\r\n_This issue was originally [reported to React Dev Tools](https://github.com/facebook/react-devtools/issues/267) and [Dan Abramov referred me to log an issue here](https://github.com/facebook/react-devtools/issues/267#issuecomment-280129543)._\r\n\r\n**Code**\r\n\r\n```ts\r\nconst ArrowFunction = () => { }; // OK\r\nfunction NamedFunction() { } // OK\r\n\r\nexport const ExportedArrowFunction = () => { }; // Problem: shows <Unknown> in react-dev-tools\r\nexport function ExportedNamedFunction() { } // OK\r\n\r\nconst ExportedArrowFunctionOnObject = () => { }; // OK\r\nexport { ExportedArrowFunctionOnObject } // OK\r\n```\r\n\r\n**Expected behavior:**\r\nUsing Chrome's [React Dev Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and using each function above as a React functional stateless component, I expected to see each function name in the tools, ex `<ArrowFunction>` and `<ExportedArrowFunction>`.\r\n\r\n**Actual behavior:**\r\nAs mentioned in code comments in the above example, all function forms show their name in tools as expected *except* `ExportedArrowFunction`, which shows as `<Unknown>`. (And unfortunately, this has become the most common form in my code as of late!) This is apparently because it does not have a `function.name`. It seems that the `export` throws off the browser's ability to derive a name from the function. Looking at the [emitted ES5](http://www.typescriptlang.org/play/#src=const%20ArrowFunction%20%3D%20()%20%3D%3E%20%7B%20%7D%3B%0D%0Afunction%20NamedFunction()%20%7B%20%7D%0D%0A%0D%0Aexport%20const%20ExportedArrowFunction%20%3D%20()%20%3D%3E%20%7B%20%7D%3B%20%2F%2F%20Shows%20%3CUnknown%3E%20in%20dev-tools%20(all%20others%20work)%0D%0Aexport%20function%20ExportedNamedFunction()%20%7B%20%7D%0D%0A%0D%0Aconst%20ExportedArrowFunctionOnObject%20%3D%20()%20%3D%3E%20%7B%20%7D%3B%0D%0Aexport%20%7B%20ExportedArrowFunctionOnObject%20%7D) (using AMD modules? I'm actually using CommonJS modules but it looks very similar) I'm guessing that the assignment `exports.ExportedArrowFunction = function () { }` is what throws browsers off, in that it doesn't pick up `ExportedArrowFunction` as the name.\r\n\r\n**Solution?**\r\nIn the original issue thread it was [advised by Dan Abramov that a `.name` should be emitted by the compiler](https://github.com/facebook/react-devtools/issues/267#issuecomment-280129543) (if I understood his comment). However it looks like TS does not emit a `.name` for *any* function. When I used to write ES5 (many years ago -- thank-you TS! :) ) I would always give my functions names, even when I assigned them to things, like `exports.ExportedArrowFunction = function ExportedArrowFunction() {}` so that the name would appear in call-stacks. Maybe this could work here? Is there another way we could have exported const functions get a proper name?"},"comment":{"url":"https://api.github.com/repos/Microsoft/TypeScript/issues/comments/391986528","html_url":"https://github.com/Microsoft/TypeScript/issues/14127#issuecomment-391986528","issue_url":"https://api.github.com/repos/Microsoft/TypeScript/issues/14127","id":391986528,"user":{"login":"bradleyayers","id":105820,"avatar_url":"https://avatars1.githubusercontent.com/u/105820?v=4","gravatar_id":"","url":"https://api.github.com/users/bradleyayers","html_url":"https://github.com/bradleyayers","followers_url":"https://api.github.com/users/bradleyayers/followers","following_url":"https://api.github.com/users/bradleyayers/following{/other_user}","gists_url":"https://api.github.com/users/bradleyayers/gists{/gist_id}","starred_url":"https://api.github.com/users/bradleyayers/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bradleyayers/subscriptions","organizations_url":"https://api.github.com/users/bradleyayers/orgs","repos_url":"https://api.github.com/users/bradleyayers/repos","events_url":"https://api.github.com/users/bradleyayers/events{/privacy}","received_events_url":"https://api.github.com/users/bradleyayers/received_events","type":"User","site_admin":false},"created_at":"2018-05-25T08:50:12Z","updated_at":"2018-05-25T08:50:12Z","author_association":"NONE","body":"@DanielRosenwasser the `const foo = () => {…}` pattern is nice because it allows you to specify the type of `foo`, which isn't possible with `function foo() {…}`, e.g.\r\n\r\n```tsx\r\nconst Foo: React.SFC = props => <p>{props.children}</p>\r\n```\r\n\r\nI just got bitten by the `export const foo = () => {…}` CJS emit being `exports.foo = () => {…}` which Chrome does not infer the name `foo` for. It would be very useful if the emit preserved the names at runtime.\r\n\r\nI use this for storybooks and tests where I need to name the thing I'm demonstrating:\r\n\r\n```ts\r\n// test\r\ndescribe(Foo.name, () => {\r\n  it(\"does something\");\r\n});\r\n\r\n// storybook\r\nstoriesOf(Foo.name, module).add(\"default\", () => <Foo />);\r\n```"}}
{"actor":{"display_login":"bradleyayers"}}