Playwright test fails on an electron application, but running electron application is working fine

I am facing a bit of a situation.

I have an electron application built with webpack for which I have written tests in the Playwright framework.

Building the electron application with the following command:

webpack --config webpack.common.js

works fine, no errors and it runs properly.

However, when executing a test in vs code playwright test runner I get a syntax error on importing png files.

SyntaxError: Invalid or unexpected token

   at ..\src\App.tsx:4

  2 | import { HashRouter, Navigate, Route, Routes, useNavigate } from 'react-router-dom';
  3 | import pngtest from './images/pngtest.png';
> 4 | import png_test from './images/png_test.png';

I have tried the following solutions:

• I have created a separate webpack config file for running the app in a test environment

const path = require('path');
const { merge } = require('webpack-merge');
const common = require('../webpack.common.js');

// This configuration is used for running Playwright tests
// Merges the common configuration webpack.common.js and modifies it for testing mode
module.exports = merge(common, {
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: 'null-loader' // Prevents image loading errors
            },
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    }
});

I used webpack-merge to merge the actual existing webpack.common.js with this new one, because I don't want any new configurations besides ignoring png asset imports with null-loader.

---> this did not work.

• I have created an images.d.ts file in my tests folder to ignore png files? (I am new to this framework, don't know what it does)

declare module '*.png' {
 const value: string;
 export default value;
}

---> this did not work

• I have mocked the imports by differentiating between the test environment and the production/development one.

const isTest = process.env.NODE_ENV === 'test';
isTest ? '' : require('./images/pngtest.png');

---> this did not work

I understand sort of, that Playwright runs in a nodeJs environment, and the electron app is bundled by Webpack, and that's why there is no syntax error in the actual app, because nodeJs cannot parse? asset imports.

But I could not find any solutions on the internet. So I'm wondering what solutions can you provide me?

Thanks for all the help!

Found an answer.

Summary of my fix:

• I removed all imports from .tsx files in my test files.
• This also includes removing imports from .ts or .tsx files that, directly or indirectly, import images (like PNGs) or CSS.
• This prevents Node.js or the Playwright test runner from trying to parse image imports, which only Webpack can handle.

Best practice:

• Only import test utilities or plain .ts files (with no image/CSS imports) in your Playwright test files.
• Never import .tsx files or any file that could eventually import images or styles.

This approach will reliably prevent "Invalid or unexpected token" errors related to asset imports in your tests.