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 | };

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 | };

• javascript
• node.js
• webpack

• I believe you may need to define out = {}; out[actionTypes.SELECT_HOST] = selectHost; export default out;... – Niet the Dark Absol Commented Feb 4, 2017 at 13:37
• @NiettheDarkAbsol: No need for that two-step in ES2015+, if that's what the OP's trying to do. – T.J. Crowder Commented Feb 4, 2017 at 13:39
• What are you trying to do with actionTypes.SELECT_HOST? Yes, it's a perfectly normal property access expression, but where you're doing it, a property access expression is invalid (hence the error). – T.J. Crowder Commented Feb 4, 2017 at 13:41
• @T.J.Crowder Thanks for the ments and your answer. I wasn't aware that property access expressions can't be used inside object literals. I'm defining certain constants as object values in actionTypes.js (which serves as an enums collection) and then exporting the values. Then, in other files, I'm accessing these values. – Agrim Commented Feb 4, 2017 at 13:46
• @Agrim: Good deal (you did say you were using the value at the end, I just wanted to be sure). And the good news is you can use those expressions now (in brackets). :-) – T.J. Crowder Commented Feb 4, 2017 at 13:54

2 Answers 2

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 puted 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.

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