Node.js中playwright-core模块构建失败问题求助

报错详情 #

Webpack解析二进制文件时出错，核心报错：

Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

完整报错栈：

{
    "moduleIdentifier": "/myproject/node_modules/playwright/node_modules/playwright-core/lib/server/chromium/appIcon.png",
    "moduleName": "./node_modules/playwright/node_modules/playwright-core/lib/server/chromium/appIcon.png",
    "loc": "1:0",
    "message": "Module parse failed: Unexpected character '�' (1:0)\nYou may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\n(Source code omitted for this binary file)",
    "moduleId": 96042,
    "moduleTrace": [
        {
            "originIdentifier": "/myproject/node_modules/playwright/node_modules/playwright-core/lib/server/chromium/crApp.js",
            "originName": "./node_modules/playwright/node_modules/playwright-core/lib/server/chromium/crApp.js",
            "moduleIdentifier": "/myproject/node_modules/playwright/node_modules/playwright-core/lib/server/chromium/appIcon.png",
            "moduleName": "./node_modules/playwright/node_modules/playwright-core/lib/server/chromium/appIcon.png",
            "dependencies": [{"loc": "30:51-83"}],
            "originId": 98916,
            "moduleId": 96042
        },
        {
            "originIdentifier": "/myproject/node_modules/playwright/node_modules/playwright-core/lib/server/trace/viewer/traceViewer.js",
            "originName": "./node_modules/playwright/node_modules/playwright-core/lib/server/trace/viewer/traceViewer.js",
            "moduleIdentifier": "/myproject/node_modules/playwright/node_modules/playwright-core/lib/server/chromium/crApp.js",
            "moduleName": "./node_modules/playwright/node_modules/playwright-core/lib/server/chromium/crApp.js",
            "dependencies": [{"loc": "13:13-44"}],
            "originId": 31499,
            "moduleId": 98916
        }
    ]
}

相关代码片段 #

const { Core } = require('@adobe/aio-sdk');
const stateLib = require('@adobe/aio-lib-state');
const playwright = require('playwright');
// ... 其他业务代码

已尝试操作 #

• 删除node_modules/playwright-core目录后重新构建
• 执行npm install playwright-core@latest更新至最新版本

1. 配置Webpack处理图片资源 #

Webpack缺少处理图片文件的loader，安装file-loader并添加规则：

npm install file-loader --save-dev

修改Webpack配置文件：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'assets/images/'
            }
          }
        ]
      }
    ]
  }
};

2. 排除playwright服务端模块打包 #

若无需使用trace viewer等服务端功能，在Webpack配置中排除相关模块：

module.exports = {
  externals: {
    'playwright-core/lib/server/chromium/crApp': 'commonjs2 playwright-core/lib/server/chromium/crApp',
    'playwright-core/lib/server/trace/viewer/traceViewer': 'commonjs2 playwright-core/lib/server/trace/viewer/traceViewer'
  }
};

3. 调整playwright导入方式 #

只导入客户端所需的浏览器API，避免加载服务端模块：

// 替换原导入代码
const { chromium, firefox, webkit } = require('playwright-core');

4. 调整playwright-core版本 #

尝试降级到1.34.x或升级到更高稳定版本，规避当前版本的打包兼容性问题：

# 降级到1.34.3
npm install playwright-core@1.34.3 --save

# 或升级到最新稳定版
npm install playwright-core@latest --save

内容的提问来源于stack exchange，提问作者ezhil