Explore all Electron open source software, libraries, packages, source code, cloud functions and APIs.

Popular New Releases in Electron

vscode

March 2022 Recovery 2

electron

electron v19.0.0-alpha.4

PowerToys

Release v0.57.2

atom

1.61.0-beta0

tauri

tauri-driver v0.1.2

Popular Libraries in Electron

vscode

by microsoft doticontypescriptdoticon

star image 130477 doticonMIT

Visual Studio Code

electron

by electron doticonc++doticon

star image 101364 doticonMIT

:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS

PowerToys

by microsoft doticoncsharpdoticon

star image 72026 doticonMIT

Windows system utilities to maximize productivity

atom

by atom doticonjavascriptdoticon

star image 57308 doticonMIT

:atom: The hackable text editor

tauri

by tauri-apps doticonrustdoticon

star image 36698 doticonApache-2.0

Build smaller, faster, and more secure desktop applications with a web frontend.

marktext

by marktext doticonjavascriptdoticon

star image 31047 doticonMIT

📝A simple and elegant markdown editor, available for Linux, macOS and Windows.

Motrix

by agalwood doticonjavascriptdoticon

star image 30721 doticonMIT

A full-featured download manager.

nativefier

by nativefier doticontypescriptdoticon

star image 30239 doticonMIT

Make any web page a desktop application

joplin

by laurent22 doticontypescriptdoticon

star image 29233 doticonNOASSERTION

Joplin - an open source note taking and to-do application with synchronization capabilities for Windows, macOS, Linux, Android and iOS.

Trending New libraries in Electron

YesPlayMusic

by qier222 doticonjavascriptdoticon

star image 14385 doticonMIT

高颜值的第三方网易云播放器,支持 Windows / macOS / Linux :electron:

deskreen

by pavlobu doticontypescriptdoticon

star image 12515 doticonAGPL-3.0

Deskreen turns any device with a web browser into a secondary screen for your computer

macintosh.js

by felixrieseberg doticonjavascriptdoticon

star image 7642 doticon

🖥 A virtual Apple Macintosh with System 8, running in Electron. I'm sorry.

dev-sidecar

by docmirror doticonjavascriptdoticon

star image 7624 doticonMPL-2.0

开发者边车,github打不开,github加速,git clone加速,git release下载加速,stackoverflow加速

tenacity

by tenacityteam doticonc++doticon

star image 6744 doticonNOASSERTION

Tenacity is an easy-to-use, privacy-friendly, FLOSS, cross-platform multi-track audio editor/recorder for Windows, macOS, Linux and other operating systems. Contributions welcome!

h5-Dooring

by MrXujiang doticonjavascriptdoticon

star image 5202 doticonGPL-3.0

H5 Page Maker, H5 Editor, LowCode. Make H5 as easy as building blocks. | 让H5制作像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站,LowCode平台.

ExplorerPatcher

by valinet doticoncdoticon

star image 4732 doticonGPL-2.0

This project aims to enhance the working environment on Windows

windows11

by blueedgetechno doticoncssdoticon

star image 4719 doticonCC0-1.0

windows 11 in React 💻🌈⚡

winbox

by nextapps-de doticonjavascriptdoticon

star image 4598 doticonApache-2.0

WinBox is a professional HTML5 window manager for the web: lightweight, outstanding performance, no dependencies, fully customizable, open source!

Top Authors in Electron

1

electron

46 Libraries

star icon146462

2

sindresorhus

40 Libraries

star icon26479

3

os-js

25 Libraries

star icon5907

4

quasarframework

23 Libraries

star icon1235

5

electron-userland

22 Libraries

star icon26874

6

azu

21 Libraries

star icon455

7

felixrieseberg

21 Libraries

star icon31091

8

microsoft

19 Libraries

star icon227194

9

rhysd

16 Libraries

star icon4115

10

Azure-Samples

15 Libraries

star icon323

1

46 Libraries

star icon146462

2

40 Libraries

star icon26479

3

25 Libraries

star icon5907

4

23 Libraries

star icon1235

5

22 Libraries

star icon26874

6

21 Libraries

star icon455

7

21 Libraries

star icon31091

8

19 Libraries

star icon227194

9

16 Libraries

star icon4115

10

15 Libraries

star icon323

Trending Kits in Electron

No Trending Kits are available at this moment for Electron

Trending Discussions on Electron

Cannot load inline font in Electron-Forge/Webpack

Vuejs Webpack Compression Plugin not compressing

'GetContents' in 'v8::ArrayBuffer'

enableRemoteModule is missing from Electron v14 TypeScript type definitions

How do I get file names from a directory in a repository using Github API

Win10 Electron Error: Passthrough is not supported, GL is disabled, ANGLE is

Electron: print iframe given reference to it

How to remove cpp files from production build via webpack?

How to make the body transparent with daisyUI (Tailwind CSS)?

Running Cypress on WSL

QUESTION

Cannot load inline font in Electron-Forge/Webpack

Asked 2022-Mar-29 at 03:04

When import 'semantic-ui-css/semantic.min.css' into a brand new Electron-Forge/Webpack5 project, I get the following:

1UnhandledSchemeError: Reading from "data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAO...
2Webpack supports "data:" and "file:" URIs by default.
3You may need an additional plugin to handle "data:" URIs.
4

After stepping through the code, it appears that the data:uri format here does not match the regex extracting its format in NormalModule: https://github.com/webpack/webpack/blob/e5570ab5230e98e1030d696e84465b5f533fdae9/lib/schemes/DataUriPlugin.js#L16. Note the double ;; in the data URI, that breaks the RegEx linked.

However, this CSS file loads fine in my website. When stepping through the webpack build, they both load the CSS file (as verified by breakpoints in https://github.com/webpack/webpack/blob/e83587cfef25db91dc5b86be5b729288fd1bafdd/lib/NormalModule.js#L761), but then the website just... doesn't load this data URL??? I tried replacing the webpack config for Electron with the one from the website, but no joy.

I'm all out of ideas after a day or 4 digging into this. I don't even know where to poke next. Any suggestions on where I can dig/what I can check to get this CSS file loading in Electron?

A minimal demo repo can be found here: https://github.com/FrozenKiwi/data-url-loading, only difference is pulled the offending CSS declaration out into the local CSS file

ANSWER

Answered 2021-Jul-26 at 17:05

Finally fixed it...

Electron-Forge installs a recent version of CSS-Loader, whereas the website still has quite an old version. Downgrading fixed the issue.

Source https://stackoverflow.com/questions/68532968

QUESTION

Vuejs Webpack Compression Plugin not compressing

Asked 2022-Mar-28 at 12:53

I need help debugging Webpack's Compression Plugin.

SUMMARY OF PROBLEM

  • Goal is to enable asset compression and reduce my app's bundle size. Using the Brotli algorithm as the default, and gzip as a fallback for unsupported browsers.
  • I expected a content-encoding field within an asset's Response Headers. Instead, they're loaded without the field. I used the Chrome dev tools' network tab to confirm this. For context, see the following snippet: example asset request
  • No errors show in my browser or IDE when running locally.

WHAT I TRIED

  • Using different implementations for the compression plugin. See below list of approaches:
    1. (With Webpack Chain API)
1config
2 .plugin('brotliCompress')
3     .use(CompressionWebpackPlugin, [{
4       exclude: /.map$/,
5       cache: true,
6       algorithm: 'brotliCompress',
7       test: /\.(js|css|html|svg)$/,
8       threshold: 10240,
9       minRatio: 0.8,
10     }])
11
  1. (With Webpack Chain API)
1config
2 .plugin('brotliCompress')
3     .use(CompressionWebpackPlugin, [{
4       exclude: /.map$/,
5       cache: true,
6       algorithm: 'brotliCompress',
7       test: /\.(js|css|html|svg)$/,
8       threshold: 10240,
9       minRatio: 0.8,
10     }])
11config
12  .plugin('gzip')
13      .use(CompressionWebpackPlugin, [{
14        algorithm: 'gzip',
15        test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
16        threshold: 8192, // Assets larger than 8192 bytes are not processed
17        minRatio: 0.8, // Assets compressing worse that this ratio are not processed
18      }])
19
  1. (With Webpack Chain API)
1config
2 .plugin('brotliCompress')
3     .use(CompressionWebpackPlugin, [{
4       exclude: /.map$/,
5       cache: true,
6       algorithm: 'brotliCompress',
7       test: /\.(js|css|html|svg)$/,
8       threshold: 10240,
9       minRatio: 0.8,
10     }])
11config
12  .plugin('gzip')
13      .use(CompressionWebpackPlugin, [{
14        algorithm: 'gzip',
15        test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
16        threshold: 8192, // Assets larger than 8192 bytes are not processed
17        minRatio: 0.8, // Assets compressing worse that this ratio are not processed
18      }])
19config
20  .plugin('CompressionPlugin')
21      .use(CompressionWebpackPlugin)
22
  1. (Using vue-cli-plugin: compression) This fails due to a Missing generator error when I use vue invoke compression in response to an IDE console message after I run vue add compression as an alternative to using Webpack Chain API for compression configuration.
1config
2 .plugin('brotliCompress')
3     .use(CompressionWebpackPlugin, [{
4       exclude: /.map$/,
5       cache: true,
6       algorithm: 'brotliCompress',
7       test: /\.(js|css|html|svg)$/,
8       threshold: 10240,
9       minRatio: 0.8,
10     }])
11config
12  .plugin('gzip')
13      .use(CompressionWebpackPlugin, [{
14        algorithm: 'gzip',
15        test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
16        threshold: 8192, // Assets larger than 8192 bytes are not processed
17        minRatio: 0.8, // Assets compressing worse that this ratio are not processed
18      }])
19config
20  .plugin('CompressionPlugin')
21      .use(CompressionWebpackPlugin)
22  pluginOptions: {
23    compression: {
24      brotli: {
25        filename: '[file].br[query]',
26        algorithm: 'brotliCompress',
27        include: /\.(js|css|html|svg|json)(\?.*)?$/i,
28        minRatio: 0.8,
29      },
30      gzip: {
31        filename: '[file].gz[query]',
32        algorithm: 'gzip',
33        include: /\.(js|css|html|svg|json)(\?.*)?$/i,
34        minRatio: 0.8
35      }
36    }
37  },
38
  1. Lastly, I tried setting the threshold field to 0 as well as raising it larger than 10k bytes.

POINTS OF SIGNIFICANCE

  • The above attempts didn't achieve the goal I stated in the first summary bullet and were used in place of the previous approaches tested.
  • I prioritized my efforts with Webpack Chain API since it resulted in no errors when rebuilding and running the app.

REFERENCED LINKS/DOCS

CODE

vue.config.js

1config
2 .plugin('brotliCompress')
3     .use(CompressionWebpackPlugin, [{
4       exclude: /.map$/,
5       cache: true,
6       algorithm: 'brotliCompress',
7       test: /\.(js|css|html|svg)$/,
8       threshold: 10240,
9       minRatio: 0.8,
10     }])
11config
12  .plugin('gzip')
13      .use(CompressionWebpackPlugin, [{
14        algorithm: 'gzip',
15        test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
16        threshold: 8192, // Assets larger than 8192 bytes are not processed
17        minRatio: 0.8, // Assets compressing worse that this ratio are not processed
18      }])
19config
20  .plugin('CompressionPlugin')
21      .use(CompressionWebpackPlugin)
22  pluginOptions: {
23    compression: {
24      brotli: {
25        filename: '[file].br[query]',
26        algorithm: 'brotliCompress',
27        include: /\.(js|css|html|svg|json)(\?.*)?$/i,
28        minRatio: 0.8,
29      },
30      gzip: {
31        filename: '[file].gz[query]',
32        algorithm: 'gzip',
33        include: /\.(js|css|html|svg|json)(\?.*)?$/i,
34        minRatio: 0.8
35      }
36    }
37  },
38const path = require('path')
39const CompressionWebpackPlugin = require('compression-webpack-plugin')
40
41function resolve (dir) {
42  return path.join(__dirname, dir)
43}
44
45module.exports = {
46  /* ....shortened for brevity */
47
48  // Compress option VI (with vue cli plugin, generator bug when invoked)
49  // pluginOptions: {
50  //   compression: {
51  //     brotli: {
52  //       filename: '[file].br[query]',
53  //       algorithm: 'brotliCompress',
54  //       include: /\.(js|css|html|svg|json)(\?.*)?$/i,
55  //       minRatio: 0.8,
56  //     },
57  //     gzip: {
58  //       filename: '[file].gz[query]',
59  //       algorithm: 'gzip',
60  //       include: /\.(js|css|html|svg|json)(\?.*)?$/i,
61  //       minRatio: 0.8
62  //     }
63  //   }
64  // },
65
66  chainWebpack: config => {
67    config
68      .resolve.alias
69        .set('@', resolve('src'))
70
71    config
72      .plugins.delete('prefetch') 
73        
74    config
75      .optimization.splitChunks()
76
77    config
78      .output
79      .chunkFilename('[id].js')
80
81    // The below configurations are recommeneded only in prod.
82    // config.when(process.env.NODE_ENV === 'production', config => { config... })
83
84    // Compress option VII
85    // config
86      // .plugin('gzip')
87      // .use(CompressionWebpackPlugin, [{
88      //   algorithm: 'gzip',
89      //   test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
90      //   threshold: 8192, // Assets larger than 8192 bytes are not processed
91      //   minRatio: 0.8, // Assets compressing worse that this ratio are not processed
92      // }])
93
94    // Compress option VIII
95    // config
96      // .plugin('CompressionPlugin')
97      // .use(CompressionWebpackPlugin)
98
99    config
100      .plugin('brotliCompress')
101      .use(CompressionWebpackPlugin, [{
102        exclude: /.map$/,
103        // deleteOriginalAssets: true,
104        cache: true,
105        algorithm: 'brotliCompress',
106        test: /\.(js|css|html|svg)$/,
107        threshold: 10240,
108        minRatio: 0.8,
109      }])
110  },
111}
112

package.json

1config
2 .plugin('brotliCompress')
3     .use(CompressionWebpackPlugin, [{
4       exclude: /.map$/,
5       cache: true,
6       algorithm: 'brotliCompress',
7       test: /\.(js|css|html|svg)$/,
8       threshold: 10240,
9       minRatio: 0.8,
10     }])
11config
12  .plugin('gzip')
13      .use(CompressionWebpackPlugin, [{
14        algorithm: 'gzip',
15        test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
16        threshold: 8192, // Assets larger than 8192 bytes are not processed
17        minRatio: 0.8, // Assets compressing worse that this ratio are not processed
18      }])
19config
20  .plugin('CompressionPlugin')
21      .use(CompressionWebpackPlugin)
22  pluginOptions: {
23    compression: {
24      brotli: {
25        filename: '[file].br[query]',
26        algorithm: 'brotliCompress',
27        include: /\.(js|css|html|svg|json)(\?.*)?$/i,
28        minRatio: 0.8,
29      },
30      gzip: {
31        filename: '[file].gz[query]',
32        algorithm: 'gzip',
33        include: /\.(js|css|html|svg|json)(\?.*)?$/i,
34        minRatio: 0.8
35      }
36    }
37  },
38const path = require('path')
39const CompressionWebpackPlugin = require('compression-webpack-plugin')
40
41function resolve (dir) {
42  return path.join(__dirname, dir)
43}
44
45module.exports = {
46  /* ....shortened for brevity */
47
48  // Compress option VI (with vue cli plugin, generator bug when invoked)
49  // pluginOptions: {
50  //   compression: {
51  //     brotli: {
52  //       filename: '[file].br[query]',
53  //       algorithm: 'brotliCompress',
54  //       include: /\.(js|css|html|svg|json)(\?.*)?$/i,
55  //       minRatio: 0.8,
56  //     },
57  //     gzip: {
58  //       filename: '[file].gz[query]',
59  //       algorithm: 'gzip',
60  //       include: /\.(js|css|html|svg|json)(\?.*)?$/i,
61  //       minRatio: 0.8
62  //     }
63  //   }
64  // },
65
66  chainWebpack: config => {
67    config
68      .resolve.alias
69        .set('@', resolve('src'))
70
71    config
72      .plugins.delete('prefetch') 
73        
74    config
75      .optimization.splitChunks()
76
77    config
78      .output
79      .chunkFilename('[id].js')
80
81    // The below configurations are recommeneded only in prod.
82    // config.when(process.env.NODE_ENV === 'production', config => { config... })
83
84    // Compress option VII
85    // config
86      // .plugin('gzip')
87      // .use(CompressionWebpackPlugin, [{
88      //   algorithm: 'gzip',
89      //   test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
90      //   threshold: 8192, // Assets larger than 8192 bytes are not processed
91      //   minRatio: 0.8, // Assets compressing worse that this ratio are not processed
92      // }])
93
94    // Compress option VIII
95    // config
96      // .plugin('CompressionPlugin')
97      // .use(CompressionWebpackPlugin)
98
99    config
100      .plugin('brotliCompress')
101      .use(CompressionWebpackPlugin, [{
102        exclude: /.map$/,
103        // deleteOriginalAssets: true,
104        cache: true,
105        algorithm: 'brotliCompress',
106        test: /\.(js|css|html|svg)$/,
107        threshold: 10240,
108        minRatio: 0.8,
109      }])
110  },
111}
112"dependencies": {
113    "@auth0/auth0-spa-js": "^1.15.0",
114    "audio-recorder-polyfill": "^0.4.1",
115    "compression-webpack-plugin": "^6.0.0",
116    "core-js": "^3.6.5",
117    "dotenv": "^8.2.0",
118    "dotenv-expand": "^5.1.0",
119    "moment": "^2.29.1",
120    "register-service-worker": "^1.7.1",
121    "uuid": "^3.4.0",
122    "vue": "^2.6.11",
123    "vue-loader": "^15.9.8",
124    "vue-router": "^3.5.1",
125    "vuex": "^3.6.2"
126  },
127  "devDependencies": {
128    "@vue/cli-plugin-babel": "~4.5.0",
129    "@vue/cli-plugin-eslint": "~4.5.0",
130    "@vue/cli-plugin-pwa": "~4.5.0",
131    "@vue/cli-service": "~4.5.0",
132    "babel-eslint": "^10.1.0",
133    "eslint": "^6.7.2",
134    "eslint-plugin-vue": "^6.2.2",
135    "vue-cli-plugin-compression": "~1.1.5",
136    "vue-template-compiler": "^2.6.11",
137    "webpack": "^4.46.0"
138  }
139

I appreciate all input. Thanks.

ANSWER

Answered 2021-Sep-30 at 14:59

It's not clear which server is serving up these assets. If it's Express, looking at the screenshot with the header X-Powered-By, https://github.com/expressjs/compression/issues/71 shows that Brotli support hasn't been added to Express yet.

There might be a way to just specify the header for content-encoding manually though.

Source https://stackoverflow.com/questions/69288974

QUESTION

'GetContents' in 'v8::ArrayBuffer'

Asked 2022-Mar-11 at 16:42

I'm using Mac M1 and I've just upgraded to Node 14.17.6LTS.

I tried to rebuild better_sqlite3 (7.4.3) using with electron builder (22.11.7) and I'm getting the following errors:

no member named 'GetContents' in 'v8::ArrayBuffer'

Any ideas how to solve this? Thanks in advance!

1gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
2  SOLINK_MODULE(target) Release/.node
3  CXX(target) Release/obj.target/fse/fsevents.o
4In file included from ../fsevents.cc:6:
5In file included from ../../nan/nan.h:2884:
6../../nan/nan_typedarray_contents.h:34:43: error: no member named 'GetContents' in 'v8::ArrayBuffer'
7      data   = static_cast<char*>(buffer->GetContents().Data()) + byte_offset;
8

ANSWER

Answered 2021-Sep-23 at 01:15

I'm using Mac M1 and I've just upgraded to Node 14.17.6LTS.

An interesting choice, given that Node 16 officially introduced M1 support.

no member named 'GetContents' in 'v8::ArrayBuffer'

See this doc. In short, GetContents was replaced by GetBackingStore in late 2019. Being a compatibility layer, nan adapted to this in early 2020.

So you'll probably have to ensure that the versions of all involved packages (Node, nan, electron, ...) match each other (in the sense of having been released around the same time and targeting each other).

Source https://stackoverflow.com/questions/69290893

QUESTION

enableRemoteModule is missing from Electron v14 TypeScript type definitions

Asked 2022-Feb-07 at 22:01

I've upgraded to Electron 14, refactored my project to accomodate for the "Removed: remote module" breaking change, but I'm unable to compile it due to the following TypeScript error:

1Type '{ plugins: true; nodeIntegration: true; contextIsolation: false; enableRemoteModule: true; backgroundThrottling: false; webSecurity: false; }' is not assignable to type 'WebPreferences'.
2
3Object literal may only specify known properties, and 'enableRemoteModule' does not exist in type 'WebPreferences'.ts(2322)
4
5electron.d.ts(12612, 5): The expected type comes from property 'webPreferences' which is declared here on type 'BrowserWindowConstructorOptions'
6

The affected code:

1Type '{ plugins: true; nodeIntegration: true; contextIsolation: false; enableRemoteModule: true; backgroundThrottling: false; webSecurity: false; }' is not assignable to type 'WebPreferences'.
2
3Object literal may only specify known properties, and 'enableRemoteModule' does not exist in type 'WebPreferences'.ts(2322)
4
5electron.d.ts(12612, 5): The expected type comes from property 'webPreferences' which is declared here on type 'BrowserWindowConstructorOptions'
6const window = new electron.BrowserWindow({
7    // ...
8    webPreferences: { 
9      plugins: true, 
10      nodeIntegration: true, 
11      contextIsolation: false,
12      enableRemoteModule: true, 
13      backgroundThrottling: false,
14      webSecurity: false 
15    }, 
16    // ...
17  });
18
19

Is this a bug or an intentional change in Electron v14? What's a workaround?

ANSWER

Answered 2021-Sep-27 at 11:31

Now Electron 14.0.1 is out, and this is how I could enable remote modules for both Main and Renderer processes (your webPreferences settings may vary).

First, install @electron/remote package (important: no --save-dev, as it needs to be bundled):

1Type '{ plugins: true; nodeIntegration: true; contextIsolation: false; enableRemoteModule: true; backgroundThrottling: false; webSecurity: false; }' is not assignable to type 'WebPreferences'.
2
3Object literal may only specify known properties, and 'enableRemoteModule' does not exist in type 'WebPreferences'.ts(2322)
4
5electron.d.ts(12612, 5): The expected type comes from property 'webPreferences' which is declared here on type 'BrowserWindowConstructorOptions'
6const window = new electron.BrowserWindow({
7    // ...
8    webPreferences: { 
9      plugins: true, 
10      nodeIntegration: true, 
11      contextIsolation: false,
12      enableRemoteModule: true, 
13      backgroundThrottling: false,
14      webSecurity: false 
15    }, 
16    // ...
17  });
18
19npm install "@electron/remote"@latest
20

Then, for Main process:

1Type '{ plugins: true; nodeIntegration: true; contextIsolation: false; enableRemoteModule: true; backgroundThrottling: false; webSecurity: false; }' is not assignable to type 'WebPreferences'.
2
3Object literal may only specify known properties, and 'enableRemoteModule' does not exist in type 'WebPreferences'.ts(2322)
4
5electron.d.ts(12612, 5): The expected type comes from property 'webPreferences' which is declared here on type 'BrowserWindowConstructorOptions'
6const window = new electron.BrowserWindow({
7    // ...
8    webPreferences: { 
9      plugins: true, 
10      nodeIntegration: true, 
11      contextIsolation: false,
12      enableRemoteModule: true, 
13      backgroundThrottling: false,
14      webSecurity: false 
15    }, 
16    // ...
17  });
18
19npm install "@electron/remote"@latest
20  // from Main process
21  import * as electron from 'electron';
22  import * as remoteMain from '@electron/remote/main';
23  remoteMain.initialize();
24  // ...
25
26  const window = new electron.BrowserWindow({
27    webPreferences: { 
28      plugins: true, 
29      nodeIntegration: true, 
30      contextIsolation: false,
31      backgroundThrottling: false,
32      nativeWindowOpen: false,
33      webSecurity: false 
34    } 
35    // ...
36  });
37
38  remoteMain.enable(window.webContents);
39

For Renderer process:

1Type '{ plugins: true; nodeIntegration: true; contextIsolation: false; enableRemoteModule: true; backgroundThrottling: false; webSecurity: false; }' is not assignable to type 'WebPreferences'.
2
3Object literal may only specify known properties, and 'enableRemoteModule' does not exist in type 'WebPreferences'.ts(2322)
4
5electron.d.ts(12612, 5): The expected type comes from property 'webPreferences' which is declared here on type 'BrowserWindowConstructorOptions'
6const window = new electron.BrowserWindow({
7    // ...
8    webPreferences: { 
9      plugins: true, 
10      nodeIntegration: true, 
11      contextIsolation: false,
12      enableRemoteModule: true, 
13      backgroundThrottling: false,
14      webSecurity: false 
15    }, 
16    // ...
17  });
18
19npm install "@electron/remote"@latest
20  // from Main process
21  import * as electron from 'electron';
22  import * as remoteMain from '@electron/remote/main';
23  remoteMain.initialize();
24  // ...
25
26  const window = new electron.BrowserWindow({
27    webPreferences: { 
28      plugins: true, 
29      nodeIntegration: true, 
30      contextIsolation: false,
31      backgroundThrottling: false,
32      nativeWindowOpen: false,
33      webSecurity: false 
34    } 
35    // ...
36  });
37
38  remoteMain.enable(window.webContents);
39  // from Renderer process
40  import * as remote from '@electron/remote';
41
42  const window = new remote.BrowserWindow({
43    webPreferences: { 
44      plugins: true, 
45      nodeIntegration: true, 
46      contextIsolation: false,
47      backgroundThrottling: false,
48      nativeWindowOpen: false,
49      webSecurity: false 
50    } 
51    // ...
52  });
53
54  // ...
55  // note we call `require` on `remote` here
56  const remoteMain = remote.require("@electron/remote/main");
57  remoteMain.enable(window.webContents);
58

Or, as one-liner:

1Type '{ plugins: true; nodeIntegration: true; contextIsolation: false; enableRemoteModule: true; backgroundThrottling: false; webSecurity: false; }' is not assignable to type 'WebPreferences'.
2
3Object literal may only specify known properties, and 'enableRemoteModule' does not exist in type 'WebPreferences'.ts(2322)
4
5electron.d.ts(12612, 5): The expected type comes from property 'webPreferences' which is declared here on type 'BrowserWindowConstructorOptions'
6const window = new electron.BrowserWindow({
7    // ...
8    webPreferences: { 
9      plugins: true, 
10      nodeIntegration: true, 
11      contextIsolation: false,
12      enableRemoteModule: true, 
13      backgroundThrottling: false,
14      webSecurity: false 
15    }, 
16    // ...
17  });
18
19npm install "@electron/remote"@latest
20  // from Main process
21  import * as electron from 'electron';
22  import * as remoteMain from '@electron/remote/main';
23  remoteMain.initialize();
24  // ...
25
26  const window = new electron.BrowserWindow({
27    webPreferences: { 
28      plugins: true, 
29      nodeIntegration: true, 
30      contextIsolation: false,
31      backgroundThrottling: false,
32      nativeWindowOpen: false,
33      webSecurity: false 
34    } 
35    // ...
36  });
37
38  remoteMain.enable(window.webContents);
39  // from Renderer process
40  import * as remote from '@electron/remote';
41
42  const window = new remote.BrowserWindow({
43    webPreferences: { 
44      plugins: true, 
45      nodeIntegration: true, 
46      contextIsolation: false,
47      backgroundThrottling: false,
48      nativeWindowOpen: false,
49      webSecurity: false 
50    } 
51    // ...
52  });
53
54  // ...
55  // note we call `require` on `remote` here
56  const remoteMain = remote.require("@electron/remote/main");
57  remoteMain.enable(window.webContents);
58require("@electron/remote").require("@electron/remote/main").enable(window.webContents);
59

It's important to note, if created from a Renderer process like that, BrowserWindow is a remote object, i.e. a Renderer proxy to a BrowserWindow object created inside the Main process.

Source https://stackoverflow.com/questions/69059668

QUESTION

How do I get file names from a directory in a repository using Github API

Asked 2022-Feb-01 at 17:57

I'm trying to make an electron app that gets the file names of a directory in a repository. I just don't know how to do this with the api. I know there is a way, I just don't know how.

For example:

I want to get the file names in the src/ directory of a github repository using the api.

I use axios to make api requests.

ANSWER

Answered 2022-Feb-01 at 17:57

Use Get repository content endpoint, documented here

Check out an example using Octokit

List Repository contents                                                                                 View in Fusebit
1// If you don't send the path property, by default will send the contents from the root level
2const repoContent = await github.rest.repos.getContent({
3  owner: 'repo-owner',
4  repo: 'repo-name'
5});
6  
7console.log('Files found at root level', repoContent.data.map((file) => file.name));
8
9

Source https://stackoverflow.com/questions/70935023

QUESTION

Win10 Electron Error: Passthrough is not supported, GL is disabled, ANGLE is

Asked 2022-Jan-03 at 01:54

I have an electron repo (https://github.com/MartinBarker/RenderTune) which used to work on windows 10 fine when ran with command prompt. After a couple months I come back on a new fresh windows 10 machine with an Nvidia GPU, and the electron app prints an error in the window when starting up:

1Uncaught TypeError: Cannot read properties of undefined (reading 'getCurrentWindow')
2

Running ffmpeg shell commands results in an error as well, and in the command prompt terminal this message is outputted:

1Uncaught TypeError: Cannot read properties of undefined (reading 'getCurrentWindow')
2[14880:1207/145651.085:ERROR:gpu_init.cc(457)] Passthrough is not supported, GL is disabled, ANGLE is
3

I checked on my other Windows laptop machines running the same exact code from the master branch of my repo, and it works perfectly fine when running locally.

It seems like this might be a recent issue? I have found it discussed in various forums: https://bugs.launchpad.net/ubuntu/+source/glibc/+bug/1944468

https://www.reddit.com/r/electronjs/comments/qdauhu/passthrough_is_not_supported_gl_is_disabled_angle/

I tried upgrading my global electron npm package to a more recent version: electron@16.0.4 , but the errors still appear.

ANSWER

Answered 2022-Jan-03 at 01:54

You can try disabling hardware acceleration using app.disableHardwareAcceleration() (See the docs). I don't think this is a fix though, it just makes the message go away for me.


Example Usage

main.js

1Uncaught TypeError: Cannot read properties of undefined (reading 'getCurrentWindow')
2[14880:1207/145651.085:ERROR:gpu_init.cc(457)] Passthrough is not supported, GL is disabled, ANGLE is
3import { app, BrowserWindow } from 'electron'
4import isDev from 'electron-is-dev'
5
6app.disableHardwareAcceleration()
7
8let win = null
9
10async function createWindow() {
11  win = new BrowserWindow({
12    title: 'My Window'
13  })
14
15  const winURL = isDev
16    ? 'http://localhost:9080'
17    : `file://${__dirname}/index.html`
18  win.loadURL(url)
19
20  win.on('ready-to-show', async () => {
21    win.show()
22    win.maximize()
23  })
24}
25
26app.whenReady().then(createWindow)
27
28app.on('window-all-closed', () => {
29  win = null
30  if (process.platform !== 'darwin') {
31    app.quit()
32  }
33})
34

Source https://stackoverflow.com/questions/70267992

QUESTION

Electron: print iframe given reference to it

Asked 2022-Jan-01 at 12:22

I would like to use the react-to-print library to print an iframe from my Electron app. How can I use the iframe reference to get the correct window/element to print?

1const handleElectronPrint = async (target: HTMLIFrameElement) {
2  // Instead of this (printing the whole page)
3  // let win = BrowserWindow.getFocusedWindow();
4
5  // How do I print just the referenced iframe?
6  // `target` iframe has id="printWindow", how to select it?
7  let win = BrowserWindow.getMyIframe();
8  
9  // Is this the right way to do the print once we have the iframe?
10  const options = { printBackground: true };
11  win.webContents.print(options, (success, failureReason) => {
12    if (!success) console.log(failureReason);
13  
14    console.log('Print Initiated');
15  }); 
16};
17
18<ReactToPrint
19 ...
20 print={handleElectronPrint}
21/>
22

ANSWER

Answered 2022-Jan-01 at 12:22

You need to convert the iframe object to Data URL. And load the URL in a new hidden BrowserWindow object.
Build data URL in Renderer process and send the URL to Main process using preload. In main process do the BrowserWindow.loadURL and printing.

App.js

1const handleElectronPrint = async (target: HTMLIFrameElement) {
2  // Instead of this (printing the whole page)
3  // let win = BrowserWindow.getFocusedWindow();
4
5  // How do I print just the referenced iframe?
6  // `target` iframe has id="printWindow", how to select it?
7  let win = BrowserWindow.getMyIframe();
8  
9  // Is this the right way to do the print once we have the iframe?
10  const options = { printBackground: true };
11  win.webContents.print(options, (success, failureReason) => {
12    if (!success) console.log(failureReason);
13  
14    console.log('Print Initiated');
15  }); 
16};
17
18<ReactToPrint
19 ...
20 print={handleElectronPrint}
21/>
22  // Send print request to the Main process
23  this.handlePrint = function (target) {
24   return new Promise(() => {
25    console.log('forwarding print request to the main process...');
26
27    // convert the iframe into data url
28    // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
29    let data = target.contentWindow.document.documentElement.outerHTML;
30    //console.log(data);
31    var blob = new Blob([data], { type: 'text/html' });
32    var url = URL.createObjectURL(blob);
33
34    window.electronAPI.printComponent(url, (response) => {
35     console.log('Main: ', response);
36    });
37   });
38  };
39

main.js

1const handleElectronPrint = async (target: HTMLIFrameElement) {
2  // Instead of this (printing the whole page)
3  // let win = BrowserWindow.getFocusedWindow();
4
5  // How do I print just the referenced iframe?
6  // `target` iframe has id="printWindow", how to select it?
7  let win = BrowserWindow.getMyIframe();
8  
9  // Is this the right way to do the print once we have the iframe?
10  const options = { printBackground: true };
11  win.webContents.print(options, (success, failureReason) => {
12    if (!success) console.log(failureReason);
13  
14    console.log('Print Initiated');
15  }); 
16};
17
18<ReactToPrint
19 ...
20 print={handleElectronPrint}
21/>
22  // Send print request to the Main process
23  this.handlePrint = function (target) {
24   return new Promise(() => {
25    console.log('forwarding print request to the main process...');
26
27    // convert the iframe into data url
28    // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
29    let data = target.contentWindow.document.documentElement.outerHTML;
30    //console.log(data);
31    var blob = new Blob([data], { type: 'text/html' });
32    var url = URL.createObjectURL(blob);
33
34    window.electronAPI.printComponent(url, (response) => {
35     console.log('Main: ', response);
36    });
37   });
38  };
39// List of all options at -
40// https://www.electronjs.org/docs/latest/api/web-contents#contentsprintoptions-callback
41const printOptions = {
42 silent: false,
43 printBackground: true,
44 color: true,
45 margin: {
46  marginType: 'printableArea',
47 },
48 landscape: false,
49 pagesPerSheet: 1,
50 collate: false,
51 copies: 1,
52 header: 'Page header',
53 footer: 'Page footer',
54};
55
56ipcMain.handle('printComponent', (event, url) => {
57 let win = new BrowserWindow({ show: false });
58 win.loadURL(url);
59
60 win.webContents.on('did-finish-load', () => {
61  win.webContents.print(printOptions, (success, failureReason) => {
62   console.log('Print Initiated in Main...');
63   if (!success) console.log(failureReason);
64  });
65 });
66 return 'done in main';
67});
68

preload.js

1const handleElectronPrint = async (target: HTMLIFrameElement) {
2  // Instead of this (printing the whole page)
3  // let win = BrowserWindow.getFocusedWindow();
4
5  // How do I print just the referenced iframe?
6  // `target` iframe has id="printWindow", how to select it?
7  let win = BrowserWindow.getMyIframe();
8  
9  // Is this the right way to do the print once we have the iframe?
10  const options = { printBackground: true };
11  win.webContents.print(options, (success, failureReason) => {
12    if (!success) console.log(failureReason);
13  
14    console.log('Print Initiated');
15  }); 
16};
17
18<ReactToPrint
19 ...
20 print={handleElectronPrint}
21/>
22  // Send print request to the Main process
23  this.handlePrint = function (target) {
24   return new Promise(() => {
25    console.log('forwarding print request to the main process...');
26
27    // convert the iframe into data url
28    // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
29    let data = target.contentWindow.document.documentElement.outerHTML;
30    //console.log(data);
31    var blob = new Blob([data], { type: 'text/html' });
32    var url = URL.createObjectURL(blob);
33
34    window.electronAPI.printComponent(url, (response) => {
35     console.log('Main: ', response);
36    });
37   });
38  };
39// List of all options at -
40// https://www.electronjs.org/docs/latest/api/web-contents#contentsprintoptions-callback
41const printOptions = {
42 silent: false,
43 printBackground: true,
44 color: true,
45 margin: {
46  marginType: 'printableArea',
47 },
48 landscape: false,
49 pagesPerSheet: 1,
50 collate: false,
51 copies: 1,
52 header: 'Page header',
53 footer: 'Page footer',
54};
55
56ipcMain.handle('printComponent', (event, url) => {
57 let win = new BrowserWindow({ show: false });
58 win.loadURL(url);
59
60 win.webContents.on('did-finish-load', () => {
61  win.webContents.print(printOptions, (success, failureReason) => {
62   console.log('Print Initiated in Main...');
63   if (!success) console.log(failureReason);
64  });
65 });
66 return 'done in main';
67});
68const { contextBridge, ipcRenderer } = require('electron');
69
70contextBridge.exposeInMainWorld('electronAPI', {
71 printComponent: async (url, callback) => {
72  let response = await ipcRenderer.invoke('printComponent', url);
73  callback(response);
74 },
75});
76


Here is the list of all print options. Some options like page size, margins, orientation can be set in CSS @page rule refer App.css in my demo app.

Here is demo app on GitHub electron-react-to-print-demo.


Print Preview: There is no, Chrome browser style, inbuilt print preview feature due to these reasons. We need to implement our own workaround. Like print to PDF and show pdf in new window: enter image description here

1const handleElectronPrint = async (target: HTMLIFrameElement) {
2  // Instead of this (printing the whole page)
3  // let win = BrowserWindow.getFocusedWindow();
4
5  // How do I print just the referenced iframe?
6  // `target` iframe has id="printWindow", how to select it?
7  let win = BrowserWindow.getMyIframe();
8  
9  // Is this the right way to do the print once we have the iframe?
10  const options = { printBackground: true };
11  win.webContents.print(options, (success, failureReason) => {
12    if (!success) console.log(failureReason);
13  
14    console.log('Print Initiated');
15  }); 
16};
17
18<ReactToPrint
19 ...
20 print={handleElectronPrint}
21/>
22  // Send print request to the Main process
23  this.handlePrint = function (target) {
24   return new Promise(() => {
25    console.log('forwarding print request to the main process...');
26
27    // convert the iframe into data url
28    // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
29    let data = target.contentWindow.document.documentElement.outerHTML;
30    //console.log(data);
31    var blob = new Blob([data], { type: 'text/html' });
32    var url = URL.createObjectURL(blob);
33
34    window.electronAPI.printComponent(url, (response) => {
35     console.log('Main: ', response);
36    });
37   });
38  };
39// List of all options at -
40// https://www.electronjs.org/docs/latest/api/web-contents#contentsprintoptions-callback
41const printOptions = {
42 silent: false,
43 printBackground: true,
44 color: true,
45 margin: {
46  marginType: 'printableArea',
47 },
48 landscape: false,
49 pagesPerSheet: 1,
50 collate: false,
51 copies: 1,
52 header: 'Page header',
53 footer: 'Page footer',
54};
55
56ipcMain.handle('printComponent', (event, url) => {
57 let win = new BrowserWindow({ show: false });
58 win.loadURL(url);
59
60 win.webContents.on('did-finish-load', () => {
61  win.webContents.print(printOptions, (success, failureReason) => {
62   console.log('Print Initiated in Main...');
63   if (!success) console.log(failureReason);
64  });
65 });
66 return 'done in main';
67});
68const { contextBridge, ipcRenderer } = require('electron');
69
70contextBridge.exposeInMainWorld('electronAPI', {
71 printComponent: async (url, callback) => {
72  let response = await ipcRenderer.invoke('printComponent', url);
73  callback(response);
74 },
75});
76//handle preview
77ipcMain.handle('previewComponent', (event, url) => {
78 let win = new BrowserWindow({ title: 'Preview', show: false, autoHideMenuBar: true });
79
80 win.loadURL(url);
81
82 win.webContents.once('did-finish-load', () => {
83  win.webContents.printToPDF(printOptions).then((data) => {
84    let buf = Buffer.from(data);
85    var data = buf.toString('base64');
86    let url = 'data:application/pdf;base64,' + data;
87
88    win.webContents.on('ready-to-show', () => {
89     win.show();
90     win.setTitle('Preview');
91    });
92    win.webContents.on('closed', () => win = null;);
93    win.loadURL(url);
94
95   })
96   .catch((error) => {
97    console.log(error);
98   });
99 });
100 return 'shown preview window';
101});
102
103

I've added above preview feature in electron-react-to-print-demo.

Source https://stackoverflow.com/questions/68751490

QUESTION

How to remove cpp files from production build via webpack?

Asked 2021-Dec-25 at 05:32

I use webpack 4 and electron-builder to bundle and build my Electron app. I noticed that native node modules inside the node_modules directory of the app.asar bundle still contain their C++ source files.

Is there a way to exclude certain file extensions from the build step?

ANSWER

Answered 2021-Dec-25 at 05:32

electron-builder can exclude files in the files section of your package.json.

Default pattern / is not added to your custom if some of your patterns is not ignore (i.e. not starts with !). package.json and /node_modules// (only production dependencies will be copied) is added to your custom in any case. All default ignores are added in any case — you don’t need to repeat it if you configure own patterns.

Example
1"!**/node_modules/*/{CHANGELOG.md,README.md,README,readme.md,readme}",
2

Source https://stackoverflow.com/questions/70431250

QUESTION

How to make the body transparent with daisyUI (Tailwind CSS)?

Asked 2021-Dec-17 at 01:02

I recently started developing an Electron application, and I am using daisyUI's Tailwind CSS components for the appearance of the user interface. I want to make the main window of the application rounded; however, daisyUI is making this task pretty challenging.

As you can see in the screenshot below, by default, daisyUI adds a background color to the body. I added the .bg-transparent class to the body tag, in order to make the background transparent, but daisyUI does not let the change apply (note the corners):

with daisyUI

On the contrary, if I don't add daisyUI's CSS file to the head tag, the body becomes transparent:

without daisyUI

Here's my HTML code:

1<!DOCTYPE html>
2<html class="h-full">
3    <head>
4        <meta charset="UTF-8">
5        <link href="https://cdn.jsdelivr.net/npm/daisyui@1.16.5/dist/full.css" rel="stylesheet" type="text/css" />
6        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
7        <link href="./renderer/stylesheet/main.css" rel="stylesheet">
8        <title>Widget</title>
9    </head>
10    <body class="select-none h-full bg-transparent">
11        <div class="h-full rounded-xl bg-green-500">
12            <h1 class="text-3xl font-bold underline">HEY</h1>
13        </div>
14        <script src="./renderer/javascript/renderer.js"></script>
15    </body>
16</html>
17

How can I make the body transparent with daisyUI?

ANSWER

Answered 2021-Dec-17 at 01:02

Here you can read that daisyUI adds a few base styles if base is true in the tailwind.config.js file. Thus, I had to set base to false to solve my problem:

1<!DOCTYPE html>
2<html class="h-full">
3    <head>
4        <meta charset="UTF-8">
5        <link href="https://cdn.jsdelivr.net/npm/daisyui@1.16.5/dist/full.css" rel="stylesheet" type="text/css" />
6        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
7        <link href="./renderer/stylesheet/main.css" rel="stylesheet">
8        <title>Widget</title>
9    </head>
10    <body class="select-none h-full bg-transparent">
11        <div class="h-full rounded-xl bg-green-500">
12            <h1 class="text-3xl font-bold underline">HEY</h1>
13        </div>
14        <script src="./renderer/javascript/renderer.js"></script>
15    </body>
16</html>
17module.exports = {
18  ...
19  daisyui: {
20    base: false
21  }
22}
23

Note that, to do this, I had to install Tailwind CSS and daisyUI from npm.

Source https://stackoverflow.com/questions/70373367

QUESTION

Running Cypress on WSL

Asked 2021-Nov-17 at 22:49

I'm trying to run cypress on a WSL with Ubuntu, this is what I'm getting:

1$ cypress run
2[29023:1018/155130.159647:ERROR:bus.cc(392)] Failed to connect to the bus: Failed to connect to socket /var/run/dbus/system_bus_socket: No such file or directory
3[29023:1018/155130.162020:ERROR:bus.cc(392)] Failed to connect to the bus: Could not parse server address: Unknown address type (examples of valid types are "tcp" and on UNIX "unix")
4[29023:1018/155130.162068:ERROR:bus.cc(392)] Failed to connect to the bus: Could not parse server address: Unknown address type (examples of valid types are "tcp" and on UNIX "unix")
5[29211:1018/155130.193707:ERROR:gpu_init.cc(441)] Passthrough is not supported, GL is swiftshader
6
7...
8
9[29023:1018/155132.292604:ERROR:bus.cc(392)] Failed to connect to the bus: Could not parse server address: Unknown address type (examples of valid types are "tcp" and on UNIX "unix")
10
11Timed out waiting for the browser to connect. Retrying...
12[29023:1018/155232.249036:ERROR:bus.cc(392)] Failed to connect to the bus: Could not parse server address: Unknown address type (examples of valid types are "tcp" and on UNIX "unix")
13
14Timed out waiting for the browser to connect. Retrying again...
15[29023:1018/155332.249372:ERROR:bus.cc(392)] Failed to connect to the bus: Could not parse server address: Unknown address type (examples of valid types are "tcp" and on UNIX "unix")
16 (-2) loading 'http://localhost:3000/__/#/tests/integration/simple.spec.ts'
17Error:  (-2) loading 'http://localhost:3000/__/#/tests/integration/simple.spec.ts'
18    at rejectAndCleanup (electron/js2c/browser_init.js:161:7486)
19    at Object.failListener (electron/js2c/browser_init.js:161:7699)
20    at Object.emit (events.js:376:20)
21
22

I couldn't find any related topics, any help?

ANSWER

Answered 2021-Oct-19 at 14:32

Cypress requires the ability to run its GUI. Depending on your Windows version, you likely need some additional configuration in order to run GUI applications in WSL:

1$ cypress run
2[29023:1018/155130.159647:ERROR:bus.cc(392)] Failed to connect to the bus: Failed to connect to socket /var/run/dbus/system_bus_socket: No such file or directory
3[29023:1018/155130.162020:ERROR:bus.cc(392)] Failed to connect to the bus: Could not parse server address: Unknown address type (examples of valid types are "tcp" and on UNIX "unix")
4[29023:1018/155130.162068:ERROR:bus.cc(392)] Failed to connect to the bus: Could not parse server address: Unknown address type (examples of valid types are "tcp" and on UNIX "unix")
5[29211:1018/155130.193707:ERROR:gpu_init.cc(441)] Passthrough is not supported, GL is swiftshader
6
7...
8
9[29023:1018/155132.292604:ERROR:bus.cc(392)] Failed to connect to the bus: Could not parse server address: Unknown address type (examples of valid types are "tcp" and on UNIX "unix")
10
11Timed out waiting for the browser to connect. Retrying...
12[29023:1018/155232.249036:ERROR:bus.cc(392)] Failed to connect to the bus: Could not parse server address: Unknown address type (examples of valid types are "tcp" and on UNIX "unix")
13
14Timed out waiting for the browser to connect. Retrying again...
15[29023:1018/155332.249372:ERROR:bus.cc(392)] Failed to connect to the bus: Could not parse server address: Unknown address type (examples of valid types are "tcp" and on UNIX "unix")
16 (-2) loading 'http://localhost:3000/__/#/tests/integration/simple.spec.ts'
17Error:  (-2) loading 'http://localhost:3000/__/#/tests/integration/simple.spec.ts'
18    at rejectAndCleanup (electron/js2c/browser_init.js:161:7486)
19    at Object.failListener (electron/js2c/browser_init.js:161:7699)
20    at Object.emit (events.js:376:20)
21
22apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
23

This may have been done for you depending on how you installed Cypress. I used the npm directions in the Cypress doc.

  • Windows 11 includes the WSLg feature by default, which allows you to run GUI applications directly on Windows. If you upgraded from Windows 10 to Windows 11, run wsl --update to make sure you have the latest WSL version with WSLg.

    Also make sure, if you've attempted to run an X server on an older release (like in the next suggestion), that you remove any manual configuration of DISPLAY in your startup files (e.g. ~/.bashrc, etc.).

  • For Windows 10, you will need to do some additional configuration. There are really two ways to do this, but it's a better topic for Super User (since it isn't directly related to programming), so I'm going to point you to this Super User question for some details. Either answer there is fine. While I'm partial to my solution, most people opt for running a third-party X server as in harrymc's answer there.

  • Just to make sure there weren't any "hidden tricks" needed to get Cypress running, I can confirm that I was able to successfully ./node_modules/.bin/cypress open using the Cypress instructions and my xrdp technique from the Super User answer.

    Source https://stackoverflow.com/questions/69621197

    Community Discussions contain sources that include Stack Exchange Network

    Tutorials and Learning Resources in Electron

    Tutorials and Learning Resources are not available at this moment for Electron

    Share this Page

    share link

    Get latest updates on Electron