My projects has 4 different projects:

UK prod, UK staging,
US prod, US staging

since I need to set the correct env variables to handle different values according to the project selected I ended up doing something like this

// Loading .env files
dotenv.config({ path: path.resolve(__dirname, '.env/.env'), override: true });

// other lines...

  projects: [
    {
      name: 'uk-prod',
      testDir: path.resolve(__dirname, 'tests'),
      grep: [/@desktop/],
      use: {
        ...devices['Desktop Chrome'],
        baseURL: process.env.TEST_URL_UK_PROD,
        contextOptions: {
          geolocation: { longitude: -0.1278, latitude: 51.5074 },
          permissions: ['geolocation'],
          locale: 'en-GB',
          isMobile: false,
        },
        launchOptions: {
          env: {
            ALLURE_PROJECT_ID: '1',
            BIGCOMMERCE_CLIENT_ID: process.env.BIGCOMMERCE_CLIENT_ID_UK_PRODUCTION || '',
            BIGCOMMERCE_ACCESS_TOKEN: process.env.BIGCOMMERCE_ACCESS_TOKEN_UK_PRODUCTION || '',
            BIGCOMMERCE_STORE_HASH: process.env.BIGCOMMERCE_STORE_HASH_UK_PRODUCTION || '',
            ENVIRONMENT: 'production',
          },
        },
      },
    },

// other 3 projects...

then in the file fixtures/base-fixtures.ts

I import the env variables that, theoretically, were set in the playwright.config file

const { BIGCOMMERCE_ACCESS_TOKEN, BIGCOMMERCE_STORE_HASH, ENVIRONMENT } = process.env;

and when console.log them, I always get undefined

Any idea what I am missing here?