vue-cli-plugin-electron-builder
vue-cli-plugin-electron-builder copied to clipboard
Published
20 hours ago •
nklayman
nklayman
TypeScript incorrectly thinks it has "dom" environment for background thread
Describe the bug
INFO Launching Electron...
App threw an error during load
ReferenceError: window is not defined
To Reproduce Steps to reproduce the behavior:
➜ ~ vue create hello-world
Vue CLI v4.5.13
┌─────────────────────────────────────────────┐
│ │
│ New version available 4.5.13 → 4.5.15 │
│ Run yarn global add @vue/cli to update! │
│ │
└─────────────────────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, CSS Pre-processors, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
Vue CLI v4.5.13
✨ Creating project in /Users/price/hello-world.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
yarn install v1.22.10
info No lockfile found.
success Saved lockfile.
✨ Done in 28.59s.
🚀 Invoking generators...
📦 Installing additional dependencies...
[-/6] ⠄ waiting...
yarn install v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
✨ Done in 12.13s.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project hello-world.
👉 Get started with the following commands:
$ cd hello-world
$ yarn serve
➜ ~ cd hello-world
➜ hello-world git:(master) vue add electron-builder
📦 Installing vue-cli-plugin-electron-builder...
yarn add v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 100 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ @develar/[email protected]
├─ @electron/[email protected]
├─ @gar/[email protected]
├─ @malept/[email protected]
├─ @malept/[email protected]
├─ @npmcli/[email protected]
├─ @npmcli/[email protected]
├─ @sindresorhus/[email protected]
├─ @szmarczak/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨ Done in 9.23s.
✔ Successfully installed plugin: vue-cli-plugin-electron-builder
? Choose Electron Version ^13.0.0
? Add tests with Spectron to your project? No
🚀 Invoking generator for vue-cli-plugin-electron-builder...
📦 Installing additional dependencies...
yarn install v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
$ electron-builder install-app-deps
• electron-builder version=22.13.1
✨ Done in 14.93s.
⚓ Running completion hooks...
✔ Successfully invoked generator for plugin: vue-cli-plugin-electron-builder
➜ hello-world git:(master) ✗ yarn electron:build
yarn run v1.22.10
➜ hello-world git:(master) ✗ echo "window.location" >> src/background.ts
➜ hello-world git:(master) ✗ yarn electron:build
yarn run v1.22.10
➜ hello-world git:(master) ✗ yarn electron:serve
yarn run v1.22.10
$ vue-cli-service electron:serve
INFO Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin
DONE Compiled successfully in 2791ms 8:25:50 AM
No type errors found
Version: typescript 4.1.6
Time: 2652ms
App running at:
- Local: http://localhost:8080/
- Network: http://10.64.212.186:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.
⠧ Bundling main process...
DONE Compiled successfully in 640ms 8:25:51 AM
File Size Gzipped
dist_electron/index.js 792.02 KiB 172.83 KiB
Images and other types of assets omitted.
INFO Launching Electron...
App threw an error during load
ReferenceError: window is not defined
at eval (webpack:///./src/background.ts?:80:1)
at Module../src/background.ts (/Users/price/hello-world/dist_electron/index.js:1780:1)
at __webpack_require__ (/Users/price/hello-world/dist_electron/index.js:20:30)
at eval (webpack:///multi_./src/background.ts?:1:18)
at Object.0 (/Users/price/hello-world/dist_electron/index.js:1791:1)
at __webpack_require__ (/Users/price/hello-world/dist_electron/index.js:20:30)
at /Users/price/hello-world/dist_electron/index.js:84:18
at Object.<anonymous> (/Users/price/hello-world/dist_electron/index.js:87:10)
at Module._compile (internal/modules/cjs/loader.js:1078:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
^C
➜ hello-world git:(master) ✗ cat tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env",
"jest"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
Expected behavior
TypeScript should understand globals like window are undefined in the background, however I think what's happening here is that the single tsconfig.json for a project is used for both bundles.
Screenshots If applicable, add screenshots to help explain your problem.
Environment (please complete the following information):
- custom config for vcp-electron-builder: n/a see command-line output just used out of the box config
- (if possible) link to your repo: n/a
- terminal output from running
vue info:
➜ hello-world git:(master) ✗ vue info
Environment Info:
System:
OS: macOS 12.0
CPU: (8) x64 Apple M1 Pro
Binaries:
Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
Browsers:
Chrome: 95.0.4638.69
Edge: Not Found
Firefox: 92.0.1
Safari: 15.0
npmPackages:
@vue/babel-helper-vue-jsx-merge-props: 1.2.1
@vue/babel-helper-vue-transform-on: 1.0.2
@vue/babel-plugin-jsx: 1.1.1
@vue/babel-plugin-transform-vue-jsx: 1.2.1
@vue/babel-preset-app: 4.5.15
@vue/babel-preset-jsx: 1.2.4
@vue/babel-sugar-composition-api-inject-h: 1.2.1
@vue/babel-sugar-composition-api-render-instance: 1.2.4
@vue/babel-sugar-functional-vue: 1.2.2
@vue/babel-sugar-inject-h: 1.2.2
@vue/babel-sugar-v-model: 1.2.3
@vue/babel-sugar-v-on: 1.2.3
@vue/cli-overlay: 4.5.15
@vue/cli-plugin-babel: ~4.5.0 => 4.5.15
@vue/cli-plugin-eslint: ~4.5.0 => 4.5.15
@vue/cli-plugin-router: 4.5.15
@vue/cli-plugin-typescript: ~4.5.0 => 4.5.15
@vue/cli-plugin-unit-jest: ~4.5.0 => 4.5.15
@vue/cli-plugin-vuex: 4.5.15
@vue/cli-service: ~4.5.0 => 4.5.15
@vue/cli-shared-utils: 4.5.15
@vue/component-compiler-utils: 3.3.0
@vue/eslint-config-prettier: ^6.0.0 => 6.0.0
@vue/eslint-config-typescript: ^7.0.0 => 7.0.0
@vue/preload-webpack-plugin: 1.1.2
@vue/test-utils: ^1.0.3 => 1.2.2
@vue/web-component-wrapper: 1.3.0
eslint-plugin-vue: ^6.2.2 => 6.2.2
jest-serializer-vue: 2.0.2
typescript: ~4.1.5 => 4.1.6
vue: ^2.6.11 => 2.6.14
vue-class-component: ^7.2.3 => 7.2.6
vue-cli-plugin-electron-builder: ~2.1.1 => 2.1.1
vue-eslint-parser: 7.11.0
vue-hot-reload-api: 2.3.4
vue-jest: 3.0.7
vue-loader: 15.9.8 (16.8.3)
vue-property-decorator: ^9.1.2 => 9.1.2
vue-style-loader: 4.1.3
vue-template-compiler: ^2.6.11 => 2.6.14
vue-template-es2015-compiler: 1.9.1
npmGlobalPackages:
@vue/cli: Not Found
Additional context I have a file that was shared between contexts, TS should have caught that it could not be used in both. Unfortunately this doesn't get caught until runtime.
