Rayrun
← Back to Discord Forum

Reference Error: Window is not defined

pedropcruz
pedropcruz

Hello guys, I have been working some weeks ago with playwright, and it's have been amazing, but until today.

My team and I we had a project with React, using webpack 4.

Today we migrated the project to vite/typescript and here start the problems. when i run my project with playwright i get the error window is not defined, in a specific file that i use in the frontend. I don't understand why this happens, can someone help me?

This thread is trying to answer question "Why am I getting a 'window is not defined' error when running my project with playwright after migrating from webpack 4 to vite/typescript?"

22 replies
pedropcruz
pedropcruz

my playwright config

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

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

/**
 * See https://playwright.dev/docs/test-configuration.
 */
export default defineConfig({
  testDir: './e2e',
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Base URL to use in actions like `await page.goto('/')`. */
    // baseURL: 'http://127.0.0.1:3000',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
  },

  /* Configure projects for major browsers */
  projects: [
    { name: 'setup', testMatch: /.*\.setup\.ts/ },
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
      dependencies: ['setup']
    },
  ],
});

what is the exact error you're getting?

pedropcruz
pedropcruz

The error:

Screenshot_2023-05-25_at_12.04.43.jpg

what does code at that accessToken.ts:52 line trying to do?

pedropcruz
pedropcruz

it runs the method, but as an argument it needs the window, but if there is no window and I need to configure the oauth token, how can I do it without window?

hm, where and how is window defined? did this code work previously?

pedropcruz
pedropcruz

Yes this code worked before, but my team migrated to typescript, and the e2e stopped running, and I think it's normal, but I don't know how I can solve it

pedropcruz
pedropcruz

Here is the method that will actually use it

Screenshot_2023-05-25_at_12.08.26.jpg
pedropcruz
pedropcruz

Even then using typeof window === undefined, then I get the error in vite's import.meta.

pedropcruz
pedropcruz
Screenshot_2023-05-25_at_12.11.50.jpg

playwright tests run on nodejs ,not in browser so you don't have an access to window by default

to access window you need to run code in page.evaluate, https://playwright.dev/docs/api/class-page#page-evaluate

or evaluateHandle perhaps, it has an example with window

https://playwright.dev/docs/api/class-page#page-evaluate-handle

pedropcruz
pedropcruz

Yes, but where do I put this evaluate if I can't even run e2e? does it make sense?

pedropcruz
pedropcruz

I run the normal command like npx playwright test and I got this problems

pedropcruz
pedropcruz

I change my project on package.json to be type: "module" and I solved I think one of the issues. Now I have the problem with direct imports. Where I can create alias? on tsconfig?

Screenshot_2023-05-25_at_12.29.15.jpg

Yes, but where do I put this evaluate if I can't even run e2e? does it make sense? you can't run because code does not compile because of undefined variable

paths / aliases should in in tsconfig file

pedropcruz
pedropcruz

totally agree, and I have done that already

pedropcruz
pedropcruz

but maybe I have some wrong path or somethings. thanks for the help!

@pedropcruz: Did you solve the `SyntaxError: Cannot use 'import.meta' outside a module`? Because I had this problem too, then also added `"type": "module"` in the `package.json` but I still get the same error. The package that uses `import.meta` is an api package in a monorepo that is only consumed by the apps but does not run by itself.

Did you solve the SyntaxError: Cannot use 'import.meta' outside a module?

Because I had this problem too, then also added "type": "module" in the package.json but I still get the same error. The package that uses import.meta is an api package in a monorepo that is only consumed by the apps but does not run by itself.

@skorp32: Is there a similar solution for `import.meta`?

Is there a similar solution for import.meta?

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.