Javascript-无法在模块外使用导入语句

因此，我在从一个类导入到另一个类时遇到了一个主要问题，我所做的是在我称之为“main”的类中

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

我要做的是从另一个脚本中获取详细信息，这个脚本名为：

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')),
        }
    }
}

我试图在detailsPage.js中导入detailsPageObj.js，但每当我尝试导入detailsPageObj.js时，就会得到

语法错误：无法在模块外使用import语句

我做错了什么
我不知道您的环境是什么样的，但我遇到了一个类似的问题，我的环境使用完整的构建步骤从我的源代码（例如从TypeScript或从ES6+）到捆绑/普通JS创建目标JS代码

但是我的测试环境没有任何构建步骤。因此，当我执行测试时，它只理解普通JS，在node.JS环境中默认情况下，它不识别
import
，而只识别
require

您可以在node.js代码中使用
import
，而无需构建步骤，但需要遵循一些步骤，例如，将文件从*.js重命名为*.mjs。更多详细信息。
为什么需要混合使用
import
和
require
语句？您是否尝试过使用
require
？没有，但我认为从另一个类导入时可能会有所不同@“PrasannaIt看起来你想在web浏览器中而不是在量角器中运行这段代码。@Quentin我意识到我把它弄混了一点，忘了它不是这样工作的，这是我的问题。我通过将它正确地转换为Javascript成功地解决了这个问题：）