{"action":"created","issue":{"url":"https://api.github.com/repos/babel/babylon/issues/252","repository_url":"https://api.github.com/repos/babel/babylon","labels_url":"https://api.github.com/repos/babel/babylon/issues/252/labels{/name}","comments_url":"https://api.github.com/repos/babel/babylon/issues/252/comments","events_url":"https://api.github.com/repos/babel/babylon/issues/252/events","html_url":"https://github.com/babel/babylon/issues/252","id":194887320,"number":252,"title":"provide a remediation strategy when using `export default` with `const`, `var`, or `let`","user":{"login":"fivetanley","id":1275021,"avatar_url":"https://avatars.githubusercontent.com/u/1275021?v=3","gravatar_id":"","url":"https://api.github.com/users/fivetanley","html_url":"https://github.com/fivetanley","followers_url":"https://api.github.com/users/fivetanley/followers","following_url":"https://api.github.com/users/fivetanley/following{/other_user}","gists_url":"https://api.github.com/users/fivetanley/gists{/gist_id}","starred_url":"https://api.github.com/users/fivetanley/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fivetanley/subscriptions","organizations_url":"https://api.github.com/users/fivetanley/orgs","repos_url":"https://api.github.com/users/fivetanley/repos","events_url":"https://api.github.com/users/fivetanley/events{/privacy}","received_events_url":"https://api.github.com/users/fivetanley/received_events","type":"User","site_admin":false},"labels":[{"id":460383733,"url":"https://api.github.com/repos/babel/babylon/labels/polish","name":"polish","color":"1d76db","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-12-12T04:13:20Z","updated_at":"2016-12-12T04:25:58Z","closed_at":null,"body":"[Babel Link](https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=latest%2Creact%2Cstage-2&experimental=false&loose=false&spec=false&code=export%20default%20const%20MyComponent%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20%60%3Cdiv%20class%3D%22foo%22%3EHI%3C%2Fdiv%3E%60%3B%0A%7D%3B%0A%0A%2F%2F%20gives%20an%20error%20like%20this%0A%0A%2F%2Frepl%3A%20Unexpected%20token%20(1%3A15)%0A%2F%2F%3E%201%20%7C%20export%20default%20const%20MyComponent%20%3D%20()%20%3D%3E%20%7B%0A%2F%2F%20%20%20%20%7C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5E%0A%2F%2F%20%202%20%7C%20%20%20return%20%60%3Cdiv%20class%3D%22foo%22%3EHI%3C%2Fdiv%3E%60%3B%0A%2F%2F%20%203%20%7C%20%7D%3B%0A%0A%2F%2F%20would%20be%20sweet%20if%20the%20error%20looked%20like%20this%3A%0A%0A%2F%2Frepl%3A%20Unexpected%20token%20(1%3A15)%0A%2F%2F%20%3E%201%20%7C%20export%20default%20const%20MyComponent%20%3D%20()%20%3D%3E%20%7B%0A%2F%2F%20%20%20%20%7C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5E%0A%2F%2F%20%202%20%7C%20%20%20return%20%60%3Cdiv%20class%3D%22foo%22%3EHI%3C%2Fdiv%3E%60%3B%0A%2F%2F%20%203%20%7C%20%7D%3B%0A%2F%2F%20The%20%60default%60%20export%20can%20only%20take%20an%20expression%3B%20%60const%60%20and%20%60let%60%20statements%20are%20not%20allowed.%0A%2F%2F%20You%20could%20rewrite%20it%20to%20the%20following%3A%0A%2F%2F%20const%20MyComponent%20%3D%20()%20%3D%3E%20%7B%0A%2F%2F%20%20%20return%20%60%3Cdiv%20class%3D%22foo%22%3EHI%3C%2Fdiv%3E%60%3B%0A%2F%2F%20%7D%3B%0A%2F%2F%20export%20default%20MyComponent%3B&playground=true): \r\n### Input Code\r\n\r\n```js\r\nexport default const MyComponent = () => {\r\n  return `<div class=\"foo\">HI</div>`;\r\n};\r\n```\r\n\r\n### Babylon/Babel Configuration\r\n\r\n![sketch 2](https://cloud.githubusercontent.com/assets/1275021/21087782/a13ce7ee-bfee-11e6-91c9-586481a4c1b1.png)\r\n\r\n### Expected Behavior\r\n\r\n`export default` only works with expressions. It would be great to get a better error message that tells you how to fix the invalid code. Something like this:\r\n\r\n```js\r\n//repl: Unexpected token (1:15)\r\n// > 1 | export default const MyComponent = () => {\r\n//    |                ^\r\n//  2 |   return `<div class=\"foo\">HI</div>`;\r\n//  3 | };\r\n// The `default` export can only take an expression; `const` and `let` statements are not allowed.\r\n// You could rewrite it to the following:\r\n// const MyComponent = () => {\r\n//   return `<div class=\"foo\">HI</div>`;\r\n// };\r\n// export default MyComponent;\r\n```\r\n\r\n### Current Behavior\r\n\r\nGives an error message that can be hard to understand if you're not familiar with ES2015 syntax:\r\n\r\n```js\r\n//repl: Unexpected token (1:15)\r\n//> 1 | export default const MyComponent = () => {\r\n//    |                ^\r\n//  2 |   return `<div class=\"foo\">HI</div>`;\r\n//  3 | };\r\n```\r\n\r\n### Your Environment\r\n\r\nBabel 6.18.2 on the babeljs.io website\r\n"},"comment":{"url":"https://api.github.com/repos/babel/babylon/issues/comments/266340594","html_url":"https://github.com/babel/babylon/issues/252#issuecomment-266340594","issue_url":"https://api.github.com/repos/babel/babylon/issues/252","id":266340594,"user":{"login":"fivetanley","id":1275021,"avatar_url":"https://avatars.githubusercontent.com/u/1275021?v=3","gravatar_id":"","url":"https://api.github.com/users/fivetanley","html_url":"https://github.com/fivetanley","followers_url":"https://api.github.com/users/fivetanley/followers","following_url":"https://api.github.com/users/fivetanley/following{/other_user}","gists_url":"https://api.github.com/users/fivetanley/gists{/gist_id}","starred_url":"https://api.github.com/users/fivetanley/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fivetanley/subscriptions","organizations_url":"https://api.github.com/users/fivetanley/orgs","repos_url":"https://api.github.com/users/fivetanley/repos","events_url":"https://api.github.com/users/fivetanley/events{/privacy}","received_events_url":"https://api.github.com/users/fivetanley/received_events","type":"User","site_admin":false},"created_at":"2016-12-12T04:25:58Z","updated_at":"2016-12-12T04:25:58Z","body":"right, this is just sort of a double take i do every time i make this mistake. it's not always with functions; there's usually some confusion around why this is valid:\r\n\r\n```js\r\nexport const Foo = 'hi';\r\n```\r\n\r\nbut this is not:\r\n\r\n```js\r\nexport default const Foo = 'hi';\r\n```\r\n\r\nI get that it's a spec thing and dictated by TC39's spec, but i think we could help newcomers and experienced devs move past this error."}}
{"actor":{"display_login":"fivetanley"}}