"SyntaxError: Unexpected token, expected , " when trying to access javascript object value

Question

In aliases.js, I'm trying to access the 'SELECT_HOST' property value from the imported actionTypes object. However, this results in a "SyntaxError: Unexpected token, expected ," error, as per Webpack. I'm not able to pinpoint what is the syntax error in actionTypes.SELECT_HOST which is standard dot-notation way to access the object property's value.

actionTypes.js:

const actionTypes = {
    SELECT_HOST : 'SELECT_HOST',
    INVOKE_ASSESSMENT : 'INVOKE_ASSESSMENT',
    RETRIEVE_ASSESSMENT : 'RETRIEVE_ASSESSMENT',
    RETRIEVE_OPTIONS : 'RETRIEVE_OPTIONS',
    RETRIEVE_RESULTS : 'RETRIEVE_RESULTS',
    UPDATE_OPTIONS : 'UPDATE_OPTIONS'
};

export default actionTypes;

aliases.js:

import actionTypes from '../actions/actionTypes';

const selectHost = (host) => {
    chrome.tabs.query({currentWindow: true, active: true}, (tabs) => {
        host = new URL(tabs[0].url).hostname;
    });
    const action = {
        type: actionTypes.SELECT_HOST,
        host
    };
    return action;
};

export default {
    actionTypes.SELECT_HOST: selectHost
};

Webpack throws error:

ERROR in ./src/aliases/aliases.js
Module build failed: SyntaxError: Unexpected token, expected ,     (15:12)

  13 | 
  14 | export default {
> 15 |  actionTypes.SELECT_HOST: selectHost
     |             ^
  16 | };

Answer 1

If you're trying to use the value of actionTypes.SELECT_HOST as the property name in the object you're exporting, you can use computed property notation to do that (new as of ES2015, but then, so are many of the other things you're using, so...), note the []:

export default {
    [actionTypes.SELECT_HOST]: selectHost
};

For instance, if actionTypes.SELECT_HOST contains the string "foo", that would produce an object with a property named foo whose value was the value of selectHost.

Answer 2

Inside Object literal, key name cannot contain dot (.)