In my express app I use Import and Export statements. I have the "type": "module" line in my package.json file. I can run the app using Node before bundling it with Webpack.
After I've bundled it into one JS file, Webpack converts the Imports to "require". Then I get the "ReferenceError: require is not defined" error when I try to run the bundled JS file using Node.I would like to use modules instead of converting my project to commonjs.
Webpack v.5
Node v.14
Express v.4
I'm using the zerorpc package within an Electron-Vue project as a client to communicate with a remove server. Before using webpack to bundle the project, I was able to call these functions both in the main process and in the renderer process of Electron but after using vue command line to create a project which automatically adds in webpack and babel, it cannot load the module.
I've created a basic Vue.js project using its command line interface and then installed vue-electron-builder plugin and selected electron 5 using the following commands:
vue create myproject
yarn install
vue add electron-builder
yarn install zerorpc --save
yarn electron:serve
Some had suggested to rebuild the zeromq library against the Electron headers for a similar problem but that didn't solve the problem.
When I run yarn electron:serve, it finishes the normal serving procedure successfully but faces an error it's bundling the main process:
error in ./node_modules/zeromq/build/Release/zmq.node
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. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
My Electron app uses a nodejs dependency (in my case it's mysqljs) and it works fine when running on development mode.
However when I build it and launch as a native desktop app, it fails with:
Electron ERROR Error: Cannot find module 'mysql' Require stack: ...
The problem was that I accidentally placed mysql between the devDependencies of my package.json file.
It should instead be placed within the dependencies since it is supposed to be shipped with the app.
I have a Node JS web app that I've recently decided to add ReactJS to. I can use regular React, but using JSX throws an unexpected token < error as Babel doesn't seem to be transpiling it.
I have Babel 7 installed, and have been using it on this project for a while.
I added #babel/plugin-transform-react-jsx" and "#babel/plugin-syntax-jsx" to my package.json, and listed them in my .babelrc file.
I tried adding type='text/babel' to the script link but the file didn't even run then.
I know the React code is valid as it's just dummy-code I pulled directly off the React website to test that it's working.
I'm not sure what else I need to do to get Babel to transpile the JSX.
I'm trying to prototype an Electron app using Angular 2 (configured with the latest webpack-based angular cli) for the gui, but I'm stuck since I don't get how to import Electron api in my angular2 components. Specifically I want to be able to open a new BrowserWindow at the click on a button in the ui... so:
<button type="button" (click)="openNewWindow()">
open
</button>
and in my component:
openNewWindow() {
let appWindow = new BrowserWindow({width: 800, height: 600});
appWindow.loadUrl('http://www.google.com');
}
but... how can I import BrowserWindow?!
By using:
import { BrowserWindow } from 'electron';
I get a "no module error" and by following the answer to this question: Webpack cannot find module 'electron' I get:
syntax error near unexpected token ( var electron = require('./')
What should I do?
ps. by running "electron ." without the BrowserWindow import the app is working properly
Run the command npm install electron #types/electron
Then import it normally using
import { ipcRenderer } from 'electron'.
If you run into any problems, try to run npm eject, a webpack.config.js will be generated, add "target": "electron-renderer" at the top of module.exports
Set this in index.html
<script>
var electron=require("electron");
</script>
Add this line in typings.d.ts file
declare var electron: any;
Use inside the component like this example:
const {ipcRenderer, clipboard} = electron;
clipboard.writeText('Electron is ready!!');
I tried to work with angular-cli and Electron and was not able to make them to work together. It's the reason why I started the following project: https://github.com/osechet/angular-tour-of-heroes-webpack
It integrates Angular 2 with webpack and Electron. It's based on the Angular 2 tutorial (with unit tests). When running Electron in dev mode (npm run start.desktop), it livereloads the sources.
To complete the answer given by chaouechi souhail.
As I understand his answer aims to solve the situation where the angular app is directly embedded in the electron app.
If for some reason you are using two separate projects whereof one is the electron app which embeds the other as a web app using one of electron's webview components you might find the following approach helpful aswell.
In your electron app you'll have something like
<webview id="webview" src="http://localhost:4200/" nodeintegration></webview>
In your angular project you
install the electron nodejs module, ie npm install electron . The types module mentioned by chaouechi might suffice, I do not know.
you eject the webpack config through ng eject
in webpack's config (webpack.config.js) you define electron as an external module such that webpack does not attempt to build it into the ng app, extend the exports as below
module.exports = {
//...
externals: {
electron: "require('electron')", // tell's webpack how to import the electron module within your angular app after being packed
//...
},
//...
}
Now, in your ng components, it should be possible to include electron classes as follows: import { remote } from "electron";
Update as of 3/20/2021
Angular CLI v11
This information was pretty hard to find so I'm answering in as many places as I can that has outdated info.
There are a few simple steps.
Add #angular-builders/custom-webpack (this saves you from ejecting angular's current webpack file which we don't really want to touch).
npm i -D #angular-builders/custom-webpack
Modify your angular.json to use the package you installed and a custom webpack file that you create (more detailed instructions on the package's readme)
Make your custom webpack file look like this:
module.exports = {
target: "electron-renderer",
};
literally that's it. You don't need anything else in your webpack file and you should be all set to use electron as you expect. No need to create your own typings file or anything.