[Feature]: Support importing SCSS in ESM #31689

Activity

1. Dmitry Gozman (dgozman)

   added

   P3-collecting-feedback

   feature-test-runnerPlaywright test specific issuesPlaywright test specific issues

   on Jul 15, 2024
2. pavelfeldman commented on Sep 4, 2025

   

   Pavel Feldman (pavelfeldman)

   on Sep 4, 2025

   Member

   More actions

   Why was this issue closed?

   Thank you for your involvement. This issue was closed due to limited engagement (upvotes/activity), lack of recent activity, and insufficient actionability. To maintain a manageable database, we prioritize issues based on these factors.

   If you disagree with this closure, please open a new issue and reference this one. More support or clarity on its necessity may prompt a review. Your understanding and cooperation are appreciated.
3. Pavel Feldman (pavelfeldman)

   closed this as completedon Sep 4, 2025
4. karlhorky commented on Sep 9, 2025

   

   Karl Horky (karlhorky)

   on Sep 9, 2025

   Last edited by karlhorky

   Contributor

   More actions

   Workaround: Node.js ESM Loaders via Customization Hooks

   Our workaround is to register Node.js ESM loaders (via Customization Hooks APIs) in playwright.config.ts for custom file types imported in our tests - @mdx-js/node-loader for MDX files and @nodejs-loaders/media for image files:

   +import { register } from 'node:module';
    import type { PlaywrightTestConfig } from '@playwright/test';
   
   +register('@nodejs-loaders/media', import.meta.url);
   +register('@mdx-js/node-loader', import.meta.url);
   +
    const config: PlaywrightTestConfig = {
      // ...
    };
    
    export default config;

   Code for copying:

   import { register } from 'node:module';
   
   // Node.js ESM loaders for image files and MDX imported by test files
   // - https://github.com/microsoft/playwright/issues/26822#issuecomment-2692835230
   register('@nodejs-loaders/media', import.meta.url);
   register('@mdx-js/node-loader', import.meta.url);

   Seems to work so far!

   So to import SCSS or other formats in your tests, try to find a Node.js ESM loader (NOT the same as a webpack loader) for your file format, and try using register() from node:module in playwright.config.ts

   Also added to playwright-tricks: https://github.com/karlhorky/playwright-tricks#import-custom-file-types-in-tests