Babel transpiler dislocates comments when fat arrow functions are used! #8507
Description
Bug Report
Babel transpiler dislocates the jsdocs comments to a separate location in the output file when fat arrow functions are used in a class.
Current Behavior
for example, the following function has associated jsdoc comments:
/**
* Promise factory to generate a Bearer Token for write_access to private data.
* The Unsplash API uses OAuth2 to authenticate and authorize Unsplash users.
* Unsplash’s OAuth2 paths live at https://unsplash.com/oauth/.
* @function generateBearerToken
* @memberof UnsplashApi
* @returns {Object} - The user's Access Token JSON data object.
*/
generateBearerToken = () => {
let url = this.BEARER_TOKEN_URL +
'?client_id=' + (this.access_key) +
'&client_secret=' + (this.secret_key) +
'&redirect_uri=' + (this.redirect_uri) +
'&code=' + (this.code) +
'&grant_type=' + (this.grant_type);
return this.fetchUrl(url, 'POST');
};
which should produce compiled code like this:
/**
* Promise factory to generate a Bearer Token for write_access to private data.
* The Unsplash API uses OAuth2 to authenticate and authorize Unsplash users.
* Unsplash’s OAuth2 paths live at https://unsplash.com/oauth/.
* @function generateBearerToken
* @memberof UnsplashApi
* @returns {Object} - The user's Access Token JSON data object.
*/
this.generateBearerToken = function () {
var url = _this.BEARER_TOKEN_URL + '?client_id=' + _this.access_key + '&client_secret=' + _this.secret_key + '&redirect_uri=' + _this.redirect_uri + '&code=' + _this.code + '&grant_type=' + _this.grant_type;
return _this.fetchUrl(url, 'POST');
};
Instead it produces the following separately at different locations:
this.generateBearerToken = function () {
var url = _this.BEARER_TOKEN_URL + '?client_id=' + _this.access_key + '&client_secret=' + _this.secret_key + '&redirect_uri=' + _this.redirect_uri + '&code=' + _this.code + '&grant_type=' + _this.grant_type;
return _this.fetchUrl(url, 'POST');
};
......................................................
.....................................................
//at the bottom of the page
/**
* Promise factory to generate a Bearer Token for write_access to private data.
* The Unsplash API uses OAuth2 to authenticate and authorize Unsplash users.
* Unsplash’s OAuth2 paths live at https://unsplash.com/oauth/.
* @function generateBearerToken
* @memberof UnsplashApi
* @returns {Object} - The user's Access Token JSON data object.
*/
I observed this behaviour only when regular class methods are changed to fat arrow functions.
Input Code
Please clone this repo and see fat_arrow_build and normal_build folders:
https://github.com/SandeepVattapparambil/webpack_bug
or see this link:
babel playground
Expected behavior/code
I expected the following output:
/**
* Promise factory to generate a Bearer Token for write_access to private data.
* The Unsplash API uses OAuth2 to authenticate and authorize Unsplash users.
* Unsplash’s OAuth2 paths live at https://unsplash.com/oauth/.
* @function generateBearerToken
* @memberof UnsplashApi
* @returns {Object} - The user's Access Token JSON data object.
*/
this.generateBearerToken = function () {
var url = _this.BEARER_TOKEN_URL + '?client_id=' + _this.access_key + '&client_secret=' + _this.secret_key + '&redirect_uri=' + _this.redirect_uri + '&code=' + _this.code + '&grant_type=' + _this.grant_type;
return _this.fetchUrl(url, 'POST');
};
Babel Configuration (.babelrc, package.json, cli command)
available in repo link
Environment
- Babel version(s): 6.26.3
- Node/npm version: v9.4.0
- OS: Windows 10
- Monorepo: yes
- How you are using Babel: loader