Unexpected Token Export in Angular App

[wrobe0709]

Hi - I'm working on getting synpress setup within an Angular app and getting this error:

export const welcomePageElements = {
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:1060:16)
    at Module._compile (internal/modules/cjs/loader.js:1108:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1173:10)
    at Module.load (internal/modules/cjs/loader.js:992:32)
    at Module._load (internal/modules/cjs/loader.js:885:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12694)
    at Module.require (internal/modules/cjs/loader.js:1032:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/Will/Desktop/Programming/aws-definer-app-v2/node_modules/@synthetixio/synpress/commands/metamask.js:10:5)
    at Module._compile (internal/modules/cjs/loader.js:1152:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1173:10)
    at Module.load (internal/modules/cjs/loader.js:992:32)
    at Module._load (internal/modules/cjs/loader.js:885:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12694)
    at Module.require (internal/modules/cjs/loader.js:1032:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/Will/Desktop/Programming/aws-definer-app-v2/node_modules/@synthetixio/synpress/plugins/index.js:3:18)
    at Module._compile (internal/modules/cjs/loader.js:1152:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1173:10)
    at Module.load (internal/modules/cjs/loader.js:992:32)
    at Module._load (internal/modules/cjs/loader.js:885:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12694)

If I edit the file to use module.exports instead of export const then I can get things working. Any tips on how I can setup my environment to work without going into synpress and editing the files? Thanks!

[drptbl]

@wrobe0709 Thanks for reporting, I will look in to it (in future).

[tochman]

Hi,

I'm using create react app and face a similar issue:

export const pageElements = {
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:986:16)
    at Module._compile (internal/modules/cjs/loader.js:1034:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
    at Module.load (internal/modules/cjs/loader.js:935:32)
    at Module._load (internal/modules/cjs/loader.js:776:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
    at Module.require (internal/modules/cjs/loader.js:959:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/thomasochman/Projects/testing_workshops/purchase_management/node_modules/@synthetixio/synpress/commands/metamask.js:3:26)
    at Module._compile (internal/modules/cjs/loader.js:1078:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
    at Module.load (internal/modules/cjs/loader.js:935:32)
    at Module._load (internal/modules/cjs/loader.js:776:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
    at Module.require (internal/modules/cjs/loader.js:959:19)
    at require (internal/modules/cjs/helpers.js:88:18)

I'm kind of convinced that I followed the appropriate setup steps, but it seems that we can't use es6 modules this way.

[soualid]

Same here.

[tochman]

For me, the solution was to go into pages and change all instances of export to module.exports =

i.e. in page.js

const loadingSpinner = '.lds-spinner';

export const pageElements = {
  loadingSpinner,
};

became

const loadingSpinner = '.lds-spinner';

module.exports.pageElements = {
  loadingSpinner,
};

I'll be happy to submit a PR if you accept contributions @drptbl

[drptbl]

@tochman Sure, happy to get some help 🎉. If you won't have time to do it, I will try to do it myself over weekend.

Cheers,
Jakub.

[drptbl]

@wrobe0709 @tochman This one should be already fixed. Please ping me if not. Cheers!