[BUG] ReferenceError: module is not defined in ES module scope (with sveltekit)

[bbigras]

Context:

System:

• OS: Linux 5.15 NixOS 22.05 (Quokka) 22.05 (Quokka)
• Memory: 1.61 GB / 15.51 GB
• Container: Yes

Binaries:

• Node: 16.13.2 - /nix/store/nwf4llpwqwmxbx38nwa1zvlhpnd956fg-nodejs-16.13.2/bin/node
• npm: 8.1.2 - /nix/store/nwf4llpwqwmxbx38nwa1zvlhpnd956fg-nodejs-16.13.2/bin/npm

Languages:

• Bash: 5.1.12 - /run/current-system/sw/bin/bash

Code Snippet

https://github.com/bbigras/sveltekit_playwright_githubactions

or

# skeleton project, no typescript, no eslint, no prettier
npm init svelte@next sveltekit_playwright_githubactions

cd sveltekit_playwright_githubactions
npm install
git init && git add -A && git commit -m "Initial commit"

# javascript
npm init playwright
git add -A && git commit -m "add playwright"

# replace "require" by "import" like in https://github.com/bbigras/sveltekit_playwright_githubactions/commit/b920a40c61de6b18b6e5bb61fa68047ad4865b2e

npx playwright test

Describe the bug

I can't figure out how to use playwright with sveltekit (no typescript).

I get:

ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/home/bbigras/dev/sveltekit_playwright_githubactions/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///home/bbigras/dev/sveltekit_playwright_githubactions/playwright.config.js:107:1
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at Loader._requireOrImport (/home/bbigras/dev/sveltekit_playwright_githubactions/node_modules/@playwright/test/lib/loader.js:268:28)
    at Loader.loadConfigFile (/home/bbigras/dev/sveltekit_playwright_githubactions/node_modules/@playwright/test/lib/loader.js:74:18)
    at loadConfig (/home/bbigras/dev/sveltekit_playwright_githubactions/node_modules/@playwright/test/lib/runner.js:88:45)
    at loadConfigFromDirectory (/home/bbigras/dev/sveltekit_playwright_githubactions/node_modules/@playwright/test/lib/runner.js:93:24)
    at Runner.loadConfigFromFile (/home/bbigras/dev/sveltekit_playwright_githubactions/node_modules/@playwright/test/lib/runner.js:102:22)
    at runTests (/home/bbigras/dev/sveltekit_playwright_githubactions/node_modules/@playwright/test/lib/cli.js:165:18)
    at Command.<anonymous> (/home/bbigras/dev/sveltekit_playwright_githubactions/node_modules/@playwright/test/lib/cli.js:74:7)

[dgozman]

type: "module" packages are not fully supported, but there is some experimental support - take a look here.

There is a similar discussion in #11755.

[bbigras]

Is there an issue to track type: "module" support?

#7121 is locked, and the last comment says: "Please file new feature requests for it or create separate bug reports if you encounter issues.".

and the last comments in #11755 doesn't seem to be getting any attentions from devs.

If I use PW_EXPERIMENTAL_TS_ESM=1 I have the same exact result.

[dgozman]

This issue is as good as any 😄

If I use PW_EXPERIMENTAL_TS_ESM=1 I have the same exact result.

This is interesting. Let us take a look.

[qbunt]

@dgozman just ran across this myself with SvelteKit, and dug some more. I found this inside the kit docs

ESM files should end with .mjs unless "type": "module" is set in which any case CommonJS files should end with .cjs.

change playwright.config.js -> playwright.config.mjs and use the import syntax, and it should work without removing "type": "module" from package.json (it did for me anyway)

[bbigras]

It seems I only have to remove module.exports = config; at the end of playwright.config.js. Which was pointed to by playwright.config.js:107:1. and run without PW_EXPERIMENTAL_TS_ESM=1.

No idea if it can cause problems.

EDIT: not sure yet but it looks like playwright.config.js is completely ignored if I remove module.exports = config;

[qbunt]

@bbigras this is what I'm using, seems to work fine with current sveltekit (as of today SvelteKit v1.0.0-next.278)

playwright.config.mjs

import { devices } from '@playwright/test';

/**
 * Read environment variables from file.
 * https://github.com/motdotla/dotenv
 */
// require('dotenv').config();

/**
 * @see https://playwright.dev/docs/test-configuration
 * @type {import('@playwright/test').PlaywrightTestConfig}
 */
const config = {
  testDir: './tests',
  /* Maximum time one test can run for. */
  timeout: 30 * 1000,
  expect: {
    /**
     * Maximum time expect() should wait for the condition to be met.
     * For example in `await expect(locator).toHaveText();`
     */
    timeout: 5000
  },
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  // reporter: 'html',
  reporter: process.env.CI ? 'github' : 'list',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
    actionTimeout: 0,
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
      },
    }
  ],

  /* Run your local dev server before starting the tests */
  webServer: {
    command: 'pnpm run dev',
    port: 3000,
  },
};

export default config;

[bbigras]

It seems I needed export default config;.

Thank you very much @qbunt 😄

[qbunt]

@bbigras that worked OK for you? Maybe that could be an effective workaround for #11755?

[bbigras]

Yes it worked.

For #11755 (so with Typescript) the solution is different for me:

ts

• use nodejs 16
• remove Page from import { test, expect, Page } from '@playwright/test'; as it doesn't seem to exist.
• I think the generated playwright.config.ts was already using import and export default config;
• run with PW_EXPERIMENTAL_TS_ESM=1

js

• playwright.config.js -> playwright.config.mjs
• module.exports = config; -> export default config;
• require -> import
• run without PW_EXPERIMENTAL_TS_ESM

[frederikhors]

Using PW_EXPERIMENTAL_TS_ESM=1 on Windows 10 and having this error:

(node:12372) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
node:internal/errors:464
    ErrorCaptureStackTrace(err);
    ^

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
    at new NodeError (node:internal/errors:371:5)
    at throwIfUnsupportedURLProtocol (node:internal/modules/esm/resolve:1033:11)
    at defaultResolve (node:internal/modules/esm/resolve:1103:3)
    at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)
    at ESMLoader.import (node:internal/modules/esm/loader:332:22)
    at initializeLoader (node:internal/process/esm_loader:74:49)
    at loadESM (node:internal/process/esm_loader:87:11)
    at runMainESM (node:internal/modules/run_main:51:21)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:74:5) {
  code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'
}

node version: v16.14.0

Any hint?

[qbunt]

@frederikhors That looks to me like Windows file path hijinks. They discuss this in nodejs/node#31710 maybe this is something in either SvelteKit or Playwright 🤷 Maybe WSL can help?

[frederikhors]

WSL is not a joy to use. I would love to use Windows normally.

[mxschmitt]

Closing since the original issue seems solved see here: #12138 (comment)

@frederikhors please file a separate issue.

[gokulk16]

It seems I needed export default config;.

Thank you very much @qbunt 😄

Yes, instead of the module.exports that comes as default in the playwright.config changing to export default helped. Thanks. 🙏