Javascript - Cannot use import statement outside a module

Question

So I have major problem with importing from one class to another and what I have done is in my "main" class which I call

detailsPage.js

import { DetailsPage } from '../tests/detailsPageObj';

const utils = require("../utils/utils");
const assert = require('../node_modules/chai').assert;
const userData = require('../globalContent.json');

describe('Details page', function () {
    const detailsPage = new DetailsPage();

    // The details page is accessible by the specified URL
    it(`Is defined by the URL: ${userData.url}`, async function () {
        await detailsPage.navigate();
    });

    // Details page has a form and it can be filled out with user data
    it('Has a form that can receive user data', async function () {
        await detailsPage.fillFormWithUserData(); // If you want, make the user data passable to the method
        await utils.click(detailsPage.form.buttons.nextStep);
    });

    if (detailsPage.hasStockConflict) {
        // Details page allows the user to fix conflicts in stocks
        it('Enables resolution of stock conflicts', async function () {
            // Wait for stock to fully load
            await browser.sleep(2000);
            await detailsPage.clickAllRemoveButtons();
            await detailsPage.clickAllDecreaseButtons();
        });
    }

    // Details page allows the user to proceed to the next stage when all conflicts (if any) has been resolved
    it('Allows the user to proceed to the next stage of purchasing', async function () {
        const nextStepButton = detailsPage.form.buttons.nextStep;
        await utils.elementToBeClickable(nextStepButton);
        await utils.click(nextStepButton);
    });
});

and what I am trying tod o is to get DetailsPage from another script which is called:

detailsPageObj

import { element, by } from 'protractor';

const utils = require("../utils/utils");
const userData = require('../globalContent.json');

export class DetailsPage {
    get pageUtils() {
        return {
            qtyRegex: /^Sorry.*?(\d+)/
        }
    }

    private get fields() {
        return {
            email: element(by.id('email')),
            firstName: element(by.id('firstName')),
            lastName: element(by.id('lastName')),
            postalCode: element(by.id('postalCode')),
            addressOne: element(by.id('addressOne')),
            addressTwo: element(by.id('addressTwo')),
            phone: element(by.id('phone')),
            businessCustomerCB: element(by.id('isBusinessCustomer')),
            company: element(by.id('company')),
            GST: element(by.id('gst')),
        }
    }

    private get groups() {
        return {
            address: element(by.css('div#addressGroup.input-container.showHiddenGroup'));
            company: element(by.id('companyGroup')),
        }
    }

    private get modals() {
        return {
            contactModalLink: element(by.id('contactModalLink')),
            cross: element(by.className('modal-cross')),
        }
    }

    private get formButtons() {
        return {
            nextStep: element(by.id('submitIdentityFormButton')),
            mobile: this.mobileFormButtons
        }
    }

    private get mobileFormButtons() {
        return {
            continue: element(by.id('stock-conflict-continue-button')),
            removeOutOfStockItems: element(by.css('button[id="removeOutOfStockItems"]')), // I just assumed that this is a part of the form
        }
    }

    private get productFrameMobileButtons() {
        return {
            stockControll: element.all(by.className('stock-controller mobile')),
            remove: element.all(by.className('btn btn-remove btn-outlined mobile')),
        }
    }

    private get productFrameDesktopButtons() {
        return {
            stockControll: element.all(by.className('stock-controller desktop')),
            remove: element.all(by.className('btn btn-remove btn-outlined desktop')),
        }
    }

    get form() {
        return {
            fields: this.fields,
            groups: this.groups,
            buttons: this.formButtons,
            modals: this.modals
        }
    }

    get productFrame() {
        return {
            buttons: {
                decrease: element.all(by.className("btn left")).first(),
                mobile: this.productFrameMobileButtons,
                desktop: this.productFrameDesktopButtons
            }
        }
    }

    get errors() {
        return {
            stockConflict: element(by.className('generic-error-heading')),
        }
    }
}

and what I am trying to do is in detailsPage.js im trying to import detailsPageObj.js but whenever I am trying to do it I do get SyntaxError: Cannot use import statement outside a module.

What am I doing wrong

Answer 1

I don't know what is your environment like, but I experienced a similar problem where my environment used a full build step for creating the target JS code from my sources (e.g. from TypeScript or from ES6+) to a bundled/plain JS.

But then my test environment did not have any build step. So when I executed the tests, it only understood plain JS, which by default in a node.js environment does not recognize import but only require.

You can use import in your node.js code without a build step, but you need to follow some steps, e.g. rename your file from *.js to *.mjs. More details here.