electron and playwright scraper - cjs/loader Uncaught Error: Cannot find module 'ws'

Viewed 334

I am trying to build an electron app with a playwright tester/scraper. If i am building in dev mode everything works. But with the electron builder packaged app i get the error at runtime:

    node:internal/modules/cjs/loader:940 Uncaught Error: Cannot find module 'ws'
Require stack:
- example.app/Contents/Resources/app.asar/dist/renderer/index.html
    at Module._resolveFilename (node:internal/modules/cjs/loader:940:15)
    at Function.i._resolveFilename (node:electron/js2c/renderer_init:33:1095)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at stackTrace.js:59:92

I am not sure if it has something to do with this issue? https://github.com/microsoft/playwright/issues/7121

My starting boilerplate was https://github.com/electron-vite/electron-vite-vue

My package.json looks like:

{
  "name": "testTool",
  "version": "1.0.0",
  "main": "dist/main/index.cjs",
  "scripts": {
    "dev": "node scripts/watch.mjs",
    "prebuild": "vue-tsc --noEmit --p packages/renderer/tsconfig.json && node scripts/build.mjs",
    "build": "electron-builder"
  },
  "engines": {
    "node": ">=14.17.0"
  },
  "build": {
    "files": [
      "dist/**/*",
      "!node_modules${/*}"
    ],
    "productName": "testTool",
    "directories": {
      "buildResources": "dist",
      "output": "release"
    }
  },
  "dependencies": {
    "@playwright/test": "^1.20.2",
    "extract-zip": "^2.0.1",
    "tiff.js": "^1.0.0",
    "vue-pdf-embed": "^1.1.1",
    "ws": "^8.6.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.1.0",
    "electron": "18.0.2",
    "electron-builder": "^23.0.3",
    "nano-staged": "^0.6.0",
    "sass": "^1.51.0",
    "simple-git-hooks": "^2.7.0",
    "typescript": "^4.6.3",
    "vite": "^2.9.1",
    "vite-plugin-electron": "^0.4.2",
    "vite-plugin-resolve": "^2.0.1",
    "vue": "^3.2.31",
    "vue-tsc": "^0.31.1"
  },
  "env": {
    "VITE_DEV_SERVER_HOST": "127.0.0.1",
    "VITE_DEV_SERVER_PORT": 3344
  }
}

In my vite.config.ts there are this:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import resolve from 'vite-plugin-resolve'
import electron from 'vite-plugin-electron/renderer'
import pkg from '../../package.json'

// https://vitejs.dev/config/
export default defineConfig({
  mode: process.env.NODE_ENV,
  root: __dirname,
  plugins: [
    vue(),
    electron(),
    resolve(
      {
        'electron-store': 'const Store = require("electron-store"); export default Store;',
      }
    ),
  ],
  base: './',
  build: {
    outDir: '../../dist/renderer',
    emptyOutDir: true,
    sourcemap: true,
  },
  server: {
    host: pkg.env.VITE_DEV_SERVER_HOST,
    port: pkg.env.VITE_DEV_SERVER_PORT,
  },
})

tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
0 Answers
Related