codesbiome / electron-react-webpack-typescript-2024 Goto Github PK
View Code? Open in Web Editor NEWElectron React Webpack Typescript Boilerplate with Custom Window and Titlebar Menus.
License: MIT License
electron-react-webpack-typescript-2024's People
Contributors
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Stargazers
Watchers
Forkers
thearchibold dvx bberrybberry thinkfeed guasam ptlzc msylvia iamtheprogram wann100 bpetrified ritapetillo realpensive reud martinlowe222 ufosky kartset luncert hasnhasan ppotara ouyangjunyi pepsiamir codedepon nyandika mungaihehe madalucard peterjkirby hasokeric dominusmars addyinstereo rufrage 13dante04 quanzhitong michaelkheel yonatanmgr winetree94 rikkapro0128 yjung199 huyle2405 joyousdevil andrewgraber spankders wysrocket koppel-zhou moudjuu-averly artmann vickp muriloneo lazarencjusz mareanalitica bluesealjs liprikon2 bruce9000 level56 mynameisjohndev luankcf5 hajime-matsumoto burneroff athletic-geek made-by-j-org ra1nux yoahmads trongnhantaisacventoan askomyagin foos-webdev-archive arfin6900 chriskulesza imam76 eyupcetin02 skipperia mateuslucari coldmind-dev cdth14a oagr aesir-development isaac-health dielect amertmelectron-react-webpack-typescript-2024's Issues
White screen in app after npm run make
In dev environment app is work correctly, but after making it displays white screen only.
Using Dev Tools i had received that div.app is empty.
If launch exe in package folder, received the same issue.
Note:
Path to app dir contain no spaces and non-latinic symbols
Console didn't threw any errors
Screenshot :)
Support for target: "electron"
Would be cool to have the option to set the target in the webpack config to electron/electron-renderer
What does misc mean?
Hey great project, seriously awesome and clean! But I can't figure out what misc means... Could you give a quick explanation why you called that folder that way?
dev server port
Hi, looks great! Where do I change the devserver port?
Module not found: Error: Can't resolve './src' in 'electron-react-webpack-typescript-2021'
Running npx webpack (https://webpack.js.org/guides/getting-started/#creating-a-bundle) I get this error:
(base) marco@pc01:~/webMatters/electronMatters/electron-react-webpack-typescript-2021$ npx webpack
Module not found: Error: Can't resolve './src' in '/home/marco/webMatters/electronMatters/electron-react-webpack-
typescript-2021'
Also modifying the webpack.main.js resolve path:
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
//alias: require('./webpack.aliases'),
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
},
doesn't resolve the problem: Module not found: Error: Can't resolve './src' in '/home/marco/webMatters/electronMatters/Ipfs-Webpack'
Electron- access process.env
Why only functional React components are rendered?
Old class components just dosen't show up.
New project files before a single line of code has been added.
Installed the boilerplate following the guide:
> git clone https://github.com/codesbiome/electron-react-webpack-typescript-2024 my-project-name
> npm install
> npm start
Got the following error:
✖ [plugin-webpack] Launching dev servers for renderer process code
› Compilation errors in the preload: group_0:
asset app_window/preload.js 1.24 MiB [emitted] (name: app_window)
runtime modules 28.4 KiB 14 modules
modules by path ./node_modules/core-js-pure/ 128…
An unhandled rejection has occurred inside Forge:
Error: Compilation errors in the preload: group_0:
asset app_window/preload.js 1.24 MiB [emitted] (name: app_window)
runtime modules 28.4 KiB 14 modules
modules by path ./node_modules/core-js-pure/ 128 KiB 126 modules
modules by path ./node_modules/@pmmmwh/react-refresh-webpack-plugin/ 53.3 KiB 23 modules
modules by path ./node_modules/webpack-dev-server/client/ 71.8 KiB 16 modules
modules by path ./node_modules/webpack/hot/*.js 5.18 KiB 4 modules
modules by path ./node_modules/html-entities/lib/*.js 78.9 KiB
./node_modules/html-entities/lib/index.js 4.84 KiB [built] [code generated]
+ 3 modules
modules by path ./src/ 5.77 KiB
./src/renderer/appPreload.tsx 2 KiB [built] [code generated]
+ 2 modules
modules by path ./node_modules/react-refresh/ 20.2 KiB
./node_modules/react-refresh/runtime.js 222 bytes [built] [code generated]
./node_modules/react-refresh/cjs/react-refresh-runtime.development.js 19.9 KiB [built] [code generated]
+ 5 modules
ERROR in webpack/runtime/compat
The installed version of @vercel/webpack-asset-relocator-loader does not appear to be compatible with Forge
Error: The installed version of @vercel/webpack-asset-relocator-loader does not appear to be compatible with Forge
at tapInfo.fn (E:\repos\splatform-editor\node_modules\@electron-forge\plugin-webpack\dist\util\AssetRelocatorPatch.js:36:39)
at Hook.eval [as call] (eval at create (E:\repos\splatform-editor\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:9:16)
at CompatRuntimeModule.generate (E:\repos\splatform-editor\node_modules\webpack\lib\runtime\CompatRuntimeModule.js:46:66)
at CompatRuntimeModule.getGeneratedCode (E:\repos\splatform-editor\node_modules\webpack\lib\RuntimeModule.js:184:44)
at CompatRuntimeModule.codeGeneration (E:\repos\splatform-editor\node_modules\webpack\lib\RuntimeModule.js:139:30)
at E:\repos\splatform-editor\node_modules\webpack\lib\Compilation.js:3463:22
at E:\repos\splatform-editor\node_modules\webpack\lib\Cache.js:97:34
at Array.<anonymous> (E:\repos\splatform-editor\node_modules\webpack\lib\cache\MemoryCachePlugin.js:45:13)
at E:\repos\splatform-editor\node_modules\webpack\lib\Cache.js:97:19
at Hook.eval [as callAsync] (eval at create (E:\repos\splatform-editor\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:19:1)
at Cache.get (E:\repos\splatform-editor\node_modules\webpack\lib\Cache.js:81:18)
at ItemCacheFacade.get (E:\repos\splatform-editor\node_modules\webpack\lib\CacheFacade.js:115:15)
at Compilation._codeGenerationModule (E:\repos\splatform-editor\node_modules\webpack\lib\Compilation.js:3456:9)
at E:\repos\splatform-editor\node_modules\webpack\lib\Compilation.js:3361:11
at arrayIterator (E:\repos\splatform-editor\node_modules\neo-async\async.js:3467:9)
at timesSync (E:\repos\splatform-editor\node_modules\neo-async\async.js:2297:7)
group_0 (webpack 5.91.0) compiled with 1 error in 1947 ms
group_0:
asset app_window/index.js 4.31 MiB [emitted] (name: app_window)
asset assets/c617fbcf9f2482dea988.png 8.14 KiB [emitted] [immutable] [from: assets/icons/electron.png] (auxiliary name: app_window)
asset app_window/index.html 219 bytes [emitted]
runtime modules 28.6 KiB 16 modules
modules by path ./node_modules/ 1.47 MiB 195 modules
modules by path ./src/ 71.1 KiB
modules by path ./src/renderer/ 65.3 KiB 11 modules
modules by path ./src/main/window/*.ts 5.82 KiB
./src/main/window/titlebarMenus.ts 4.39 KiB [built] [code generated]
./src/main/window/titlebarContextApi.ts 1.43 KiB [built] [code generated]
asset modules 23.5 KiB (javascript) 8.14 KiB (asset)
./assets/images/logo.png 4.53 KiB [built] [code generated]
./assets/icons/chrome.png 1.78 KiB [built] [code generated]
./assets/icons/react.png 2.06 KiB [built] [code generated]
./assets/icons/typescript.png 3.49 KiB [built] [code generated]
./assets/icons/erwt.png 4.53 KiB [built] [code generated]
./assets/icons/electron.png 42 bytes (javascript) 8.14 KiB (asset) [built] [code generated]
+ 3 modules
ERROR in webpack/runtime/compat
The installed version of @vercel/webpack-asset-relocator-loader does not appear to be compatible with Forge
Error: The installed version of @vercel/webpack-asset-relocator-loader does not appear to be compatible with Forge
at tapInfo.fn (E:\repos\splatform-editor\node_modules\@electron-forge\plugin-webpack\dist\util\AssetRelocatorPatch.js:36:39)
at Hook.eval [as call] (eval at create (E:\repos\splatform-editor\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:9:16)
at CompatRuntimeModule.generate (E:\repos\splatform-editor\node_modules\webpack\lib\runtime\CompatRuntimeModule.js:46:66)
at CompatRuntimeModule.getGeneratedCode (E:\repos\splatform-editor\node_modules\webpack\lib\RuntimeModule.js:184:44)
at CompatRuntimeModule.codeGeneration (E:\repos\splatform-editor\node_modules\webpack\lib\RuntimeModule.js:139:30)
at E:\repos\splatform-editor\node_modules\webpack\lib\Compilation.js:3463:22
at E:\repos\splatform-editor\node_modules\webpack\lib\Cache.js:97:34
at Array.<anonymous> (E:\repos\splatform-editor\node_modules\webpack\lib\cache\MemoryCachePlugin.js:45:13)
at E:\repos\splatform-editor\node_modules\webpack\lib\Cache.js:97:19
at Hook.eval [as callAsync] (eval at create (E:\repos\splatform-editor\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:19:1)
at Cache.get (E:\repos\splatform-editor\node_modules\webpack\lib\Cache.js:81:18)
at ItemCacheFacade.get (E:\repos\splatform-editor\node_modules\webpack\lib\CacheFacade.js:115:15)
at Compilation._codeGenerationModule (E:\repos\splatform-editor\node_modules\webpack\lib\Compilation.js:3456:9)
at E:\repos\splatform-editor\node_modules\webpack\lib\Compilation.js:3361:11
at arrayIterator (E:\repos\splatform-editor\node_modules\neo-async\async.js:3467:9)
at timesSync (E:\repos\splatform-editor\node_modules\neo-async\async.js:2297:7)
group_0 (webpack 5.91.0) compiled with 1 error in 1924 ms
at E:\repos\splatform-editor\node_modules\@electron-forge\plugin-webpack\dist\WebpackPlugin.js:220:43
at Hook.eval [as call] (eval at create (E:\repos\splatform-editor\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
at Hook.CALL_DELEGATE [as _call] (E:\repos\splatform-editor\node_modules\tapable\lib\Hook.js:14:14)
at E:\repos\splatform-editor\node_modules\webpack\lib\MultiCompiler.js:100:22
at Hook.eval [as callAsync] (eval at create (E:\repos\splatform-editor\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:29:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (E:\repos\splatform-editor\node_modules\tapable\lib\Hook.js:18:14)
at Watching._done (E:\repos\splatform-editor\node_modules\webpack\lib\Watching.js:309:28)
at E:\repos\splatform-editor\node_modules\webpack\lib\Watching.js:224:21
at Compiler.emitRecords (E:\repos\splatform-editor\node_modules\webpack\lib\Compiler.js:1028:5)
at E:\repos\splatform-editor\node_modules\webpack\lib\Watching.js:200:22
at E:\repos\splatform-editor\node_modules\webpack\lib\Compiler.js:990:14
at Hook.eval [as callAsync] (eval at create (E:\repos\splatform-editor\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (E:\repos\splatform-editor\node_modules\tapable\lib\Hook.js:18:14)
at E:\repos\splatform-editor\node_modules\webpack\lib\Compiler.js:987:27
at E:\repos\splatform-editor\node_modules\neo-async\async.js:2818:7
at done (E:\repos\splatform-editor\node_modules\neo-async\async.js:3522:9)
Thanks for reading this, I'm not sure if there's something obvious I'm missing, or if this repo is broken right now, so any answer is appreciated.
react-native-reanimated
Add to the project react-native-web, I set this
alias: {
// Custom Aliases
'react-native$': 'react-native-web', //this
...require('./webpack.aliases'),
},
in webpack.renderer.js
Now I'm trying to use react-native reanimated but I'm having difficulties, the installation is like this: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation
I created a .babelrc file this is the content:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
["react-native-web", { "commonjs": true }],
"@babel/plugin-proposal-export-namespace-from",
["react-native-reanimated/plugin", {
"relativeSourceLocation": true
}]
]
}
and specify it in webpack.rules.js:
module.exports = [
{
test: /\.(tsx|ts|jsx|js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
...
];
But I get the following error:
Module parse failed: Unexpected token (511:20)
node_modules/react-native-reanimated/lib/createAnimatedComponent.js
File was processed with these loaders:
* ../../node_modules/@vercel/webpack-asset-relocator-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| default: { collapsable: false },
| });
> return ();
| }
| }
Any idea how to fix it?
I tried it in a next.js project it works without problems
Native modules support
Can i know whether this boilerplate supports configurations to handle native node modules to be used in Electron?
I saw that the same electrovite-react project has mentioned it in the features but i didn't see it in here.
Package cannot run after using typeorm+better-sqlite3
When I use this framework for development, I use typeorm+better-sqlite3, and it runs normally during debugging. But after performing npm run package packaging operation, the database cannot be accessed. My development environment is windows 10. How to solve it? Thanks!
Viewing logs in terminal
Is there any way to view the console logs from the main process? I used npm start and tried two approaches (1) appending "--enable-logging" to the front of "electron-forge start" and (2) setting the env variable ELECTRON_ENABLE_LOGGING=1
What's wrong with this webpack configuration?
I used your electron-react-webpack-typescript "template" but I'm having some problems.
/tools/webpack/webpack.main.js :
module.exports = {
/**
* This is the main entry point for your application, it's the first file
* that runs in the main process.
*/
entry: ['./src/main.ts'],
// Put your normal webpack config below here
module: {
rules: require('./webpack.rules'),
},
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
alias: require('./webpack.aliases'),
},
// https://github.com/electron/electron/issues/9920
target: 'electron-main',
node: {
global: true,
__dirname: true,
__filename: true
},
externals: {
"pouchdb": "require('pouchdb')"
}
};
/tools/webpack/webpack.renderer.js :
/* eslint-disable @typescript-eslint/no-var-requires */
const rules = require('./webpack.rules');
const plugins = require('./webpack.plugins');
const aliases = require('./webpack.aliases');
module.exports = {
// https://github.com/electron/electron/issues/9920
target: 'electron-renderer',
module: {
rules,
},
plugins: plugins,
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
alias: {
// React Hot Loader Patch
'react-dom': '@hot-loader/react-dom',
// Custom Aliases
...aliases,
},
},
};
/tools/webpack/webpack.plugins.js :
// eslint-disable-next-line @typescript-eslint/no-var-requires
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
// https://stackoverflow.com/questions/44008674/how-to-import-the-electron-ipcrenderer-in-
a-react-webpack-2-setup
const webpack = require('webpack');
module.exports = [
new ForkTsCheckerWebpackPlugin(),
new webpack.ExternalsPlugin('commonjs', [
'electron'
]),
new webpack.ExternalsPlugin("commonjs", [
'leveldown'
])
];
/tools/webpack/webpack.rules :
const inDev = process.env.NODE_ENV === 'development';
module.exports = [
{
// Add support for native node modules
test: /\.node$/,
use: 'node-loader',
},
{
// Typescript loader
test: /\.tsx?$/,
exclude: /(node_modules|\.webpack)/,
use: {
loader: 'ts-loader',
options: {
transpileOnly: true,
},
},
},
{
// CSS Loader
test: /\.css$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
},
{
// Less loader
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' },
],
},
{
// Images Loader
test: /\.(gif|jpe?g|tiff|png|webp|bmp)$/,
use: [
{
loader: 'file-loader',
options: {
publicPath: 'images',
outputPath: inDev ? 'images' : './main_window/images',
},
},
],
},
];
/tools/webpack/webpack.helpers.js :
/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable @typescript-eslint/explicit-function-return-type */
const path = require('path');
const cwd = process.cwd();
// Creates Webpack Aliases using CWD path
const createWebpackAliases = (als) => {
const result = {};
for (const name in als) {
result[name] = path.join(cwd, als[name]);
}
return result;
};
// Export webpack helpers
module.exports = {
createWebpackAliases,
};
/tools/webpack/webpack.aliases.js :
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { createWebpackAliases } = require('./webpack.helpers');
// Webpack aliases to resolve
const aliases = createWebpackAliases({
'@src': 'src',
'@app': 'src/app',
'@static': 'src/static',
'jsonfile': './node_modules/fs-extra/node_modules/jsonfile',
'nanoid/random': './node_modules/nanoid',
'nanoid/format': './node_modules/nanoid'
//'main' : './.webpack/main'
});
// Export aliases
module.exports = aliases;
This is the /tools/forge/forge.config.js
/* eslint-disable @typescript-eslint/no-var-requires */
// Forge Configuration
const path = require('path');
const rootDir = process.cwd();
module.exports = {
// Packager Config
packagerConfig: {
// Create asar archive for main, renderer process files
asar: true,
},
// Forge Makers
makers: [
{
// Squirrel.Windows is a no-prompt, no-hassle, no-admin method of installing
// Windows applications and is therefore the most user friendly you can get.
name: '@electron-forge/maker-squirrel',
config: {
name: 'electron_react_typescript_webpack_2020',
},
},
{
// The Zip target builds basic .zip files containing your packaged application.
// There are no platform specific dependencies for using this maker and it will run on
any platform.
name: '@electron-forge/maker-zip',
platforms: ['darwin'],
},
{
// The deb target builds .deb packages, which are the standard package format for
Debian-based
// Linux distributions such as Ubuntu.
name: '@electron-forge/maker-deb',
config: {},
},
{
// The RPM target builds .rpm files, which is the standard package format for
// RedHat-based Linux distributions such as Fedora.
name: '@electron-forge/maker-rpm',
config: {},
},
],
// Forge Plugins
plugins: [
[
// The Webpack plugin allows you to use standard Webpack tooling to compile both your
main process code
// and your renderer process code, with built in support for Hot Module Reloading in
the renderer
// process and support for multiple renderers.
'@electron-forge/plugin-webpack',
{
// Main process webpack configuration
mainConfig: path.join(rootDir, 'tools/webpack/webpack.main.js'),
// Renderer process webpack configuration
renderer: {
// Configuration file path
config: path.join(rootDir, 'tools/webpack/webpack.renderer.js'),
// Entrypoints of the application
entryPoints: [
{
// React Hot Module Replacement (HMR)
rhmr: 'react-hot-loader/patch',
// HTML index file template
html: path.join(rootDir, 'src/html/index.html'),
// Renderer
js: path.join(rootDir, 'src/renderers/renderer.ts'),
// Main Window
name: 'main_window',
// Preload
preload: {
js: path.join(rootDir, 'src/preload.ts'),
},
},
{
// React Hot Module Replacement (HMR)
rhmr: 'react-hot-loader/patch',
// HTML index file template
html: path.join(rootDir, 'src/html/index_A.html'),
// Renderer
js: path.join(rootDir, 'src/renderers/renderer_A.ts'),
// Main Window
name: 'main_window2',
// Preload
preload: {
js: path.join(rootDir, 'src/preload.ts'),
},
},
{
// React Hot Module Replacement (HMR)
rhmr: 'react-hot-loader/patch',
// HTML index file template
html: path.join(rootDir, 'src/html/index_B.html'),
// Renderer
js: path.join(rootDir, 'src/renderers/renderer_B.ts'),
// Main Window
name: 'main_window3',
// Preload
preload: {
js: path.join(rootDir, 'src/preload.ts'),
},
},
],
},
},
],
],
When running the app I'm getting this error:
TypeError: get is not a function
at getPubsubRouter (/home/marco/webMatters/electronMatters/IPFS-Forge/.webpack
/main/index.js:103294:20)
at getLibp2pOptions (/home/marco/webMatters/electronMatters/IPFS-Forge/.webpack
/main/index.js:103311:15)
at module.exports../node_modules/ipfs-core/src/components/libp2p.js.module.exports
(/home/marco/webMatters/electronMatters/IPFS-Forge/.webpack/main/index.js:103262:25)
at configureRepo (/home/marco/webMatters/electronMatters/IPFS-Forge/.webpack
/main/index.js:107188:18)
at async loadRepo (/home/marco/webMatters/electronMatters/IPFS-Forge/.webpack
/main/index.js:107037:17)
at async Function.start (/home/marco/webMatters/electronMatters/IPFS-Forge/.webpack
/main/index.js:107018:41)
at async Object.create (/home/marco/webMatters/electronMatters/IPFS-Forge/.webpack
/main/index.js:102486:21)
this is the tsconfig.json :
{
"compilerOptions": {
"jsx": "react",
"allowJs": true,
"target": "ES6",
"module": "ESNext",
"skipLibCheck": true,
"esModuleInterop": true,
"noImplicitAny": false,
"sourceMap": true,
"baseUrl": ".",
"outDir": "dist",
"moduleResolution": "node",
"resolveJsonModule": true,
// https://www.typescriptlang.org/tsconfig#suppressExcessPropertyErrors
"suppressExcessPropertyErrors": true,
"paths": {
"*": ["node_modules/*"],
"@app/*": ["./src/app/*"],
"@static/*": ["./src/static/*"],
"@src/*": ["./src/*"]
}
},
"include": ["src/**/*"]
}
This is package.json:
{
"name": "IPFS-Forge",
"description": "IPF-Forge",
"version": "1.0.0",
"main": "./.webpack/main",
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "eslint --ext .ts ."
},
"config": {
"forge": "./tools/forge/forge.config.js"
},
"devDependencies": {
"@electron-forge/cli": "^6.0.0-beta.54",
"@electron-forge/maker-deb": "^6.0.0-beta.54",
"@electron-forge/maker-rpm": "^6.0.0-beta.54",
"@electron-forge/maker-squirrel": "^6.0.0-beta.54",
"@electron-forge/maker-zip": "^6.0.0-beta.54",
"@electron-forge/plugin-webpack": "^6.0.0-beta.54",
"@types/react": "^17.0.1",
"@types/react-dnd": "^3.0.2",
"@types/react-dnd-html5-backend": "^3.0.2",
"@types/react-dom": "^17.0.0",
"@types/webpack-env": "^1.16.0",
"@typescript-eslint/eslint-plugin": "^4.14.2",
"@typescript-eslint/parser": "^4.14.2",
"copy-webpack-plugin": "^7.0.0",
"cross-env": "^7.0.3",
"electron": "^11.2.2",
"electron-rebuild": "^2.3.4",
"eslint": "^7.19.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-react": "^7.22.0",
"fork-ts-checker-webpack-plugin": "^6.1.0",
"ipfs": "^0.54.1",
"less": "^4.1.1",
"node-loader": "^1.0.2",
"react-hot-loader": "^4.13.0",
"test-ipfs-example": "^2.0.3",
"ts-loader": "^8.0.14",
"typescript": "^4.1.3",
"webpack": "4"
},
"greenkeeper": {
"ignore": [
"electron"
]
},
"dependencies": {
"@hot-loader/react-dom": "^17.0.1",
"electron-squirrel-startup": "^1.0.0",
"ipfs-http-client": "^49.0.1",
"ipfs-utils": "^6.0.0",
"react": "^17.0.1",
"react-dnd": "^11.1.3",
"react-dnd-html5-backend": "^11.1.3"
}
}
According to ipfs people the problems I'm having are due to the webpack configuration: ipfs/js-ipfs#3531 (comment)
But I do not understand where the problem is.
- node: v14.5.0
- O.S.: Ubuntu 18.04.4 Desktop
Tailwind CSS
Hello! This looks like a fantastic template. So far ive got everything working except tailwindcss. Is there a guide on how to integrate it?
Edit:
Just gotta add this to webpack.rules.js
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [require('tailwindcss'), require('autoprefixer')],
},
},
},
],
exclude: /\.module\.s?(c|a)ss$/,
},
Cannot find module 'serialport'
I need to use this module in my electron application. Looking around, I understand that I need to insert the code below in webpack.main.js because serialport is a native module.
externals: {
serialport: 'serialport',
},
I can run the application in developement mode, no problem. But when iItried to run npm run make or npm run pacakge, and when I click on the executable, it will show the error as the on in the title.
Error . I cant use images in application (no images)
Hi,
I write the following code:
import avril from '../avril.jpg';
In render i put:
<img src={avril} />
And i get the error:
ERROR in ./src/app/components/App.tsx Module not found: Error: Can't resolve '../avril.jpg' in 'C:\Users\fredc\Documents\Projetos\teste\src\app\components
Well, maybe the webpack not possible to user images with electron and react configuration.
I never see one boilerplate (React+Webpack+Electron) with images OK.
Webpack entryPoints name
can we move files from .webpack/renderer/app_window/ to .webpack/renderer/
I try to use react-router with nested routes and to avoid problems it can be better to have files at the root of renderer folder.
Best Regards.
When I install a new module, just use it, Electron crashes
I have installed your magnificent boilerplate following the steps you indicate.
So I wanted to use the "ini" module to read .ini files
I had to install:
npm install ini
npm install @types/ini
and added it to my app.tsx:
import ini from 'ini'
So far so good.
But when i use the ini class, Electron crash with a:
App threw an error during load
Error: Module build failed (from ./node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js):
SyntaxError: Unexpected token (189:12)
at module.exports.pp$4.raise (D:\PROYECTOS\Electron\Fracture2\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:20834:13)
at module.exports.pp.unexpected (D:\PROYECTOS\Electron\Fracture2\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:18680:8)
at module.exports.pp$1.parseTryStatement (D:\PROYECTOS\Electron\Fracture2\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:19069:49)
at module.exports.pp$1.parseStatement (D:\PROYECTOS\Electron\Fracture2\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:18834:32)
at _class.parseStatement (D:\PROYECTOS\Electron\Fracture2\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:4539:118)
at _class.parseStatement (D:\PROYECTOS\Electron\Fracture2\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:42314:22)
at module.exports.pp$1.parseBlock (D:\PROYECTOS\Electron\Fracture2\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:19157:23)
at module.exports.pp$1.parseStatement (D:\PROYECTOS\Electron\Fracture2\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:18841:34)
at _class.parseStatement (D:\PROYECTOS\Electron\Fracture2\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:4539:118)
at _class.parseStatement (D:\PROYECTOS\Electron\Fracture2\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:42314:22)
at module.exports.pp$1.parseIfStatement (D:\PROYECTOS\Electron\Fracture2\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:18981:26)
at module.exports.pp$1.parseStatement (D:\PROYECTOS\Electron\Fracture2\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:18830:31)
at _class.parseStatement (D:\PROYECTOS\Electron\Fracture2\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:4539:118)
at _class.parseStatement (D:\PROYECTOS\Electron\Fracture2\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:42314:22)
at module.exports.pp$1.parseBlock (D:\PROYECTOS\Electron\Fracture2\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:19157:23)
at module.exports.pp$3.parseFunctionBody (D:\PROYECTOS\Electron\Fracture2\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:20675:22)
at ./node_modules/ini/lib/ini.js (D:\PROYECTOS\Electron\Fracture2\.webpack\main\index.js:903:7)
at __webpack_require__ (D:\PROYECTOS\Electron\Fracture2\.webpack\main\index.js:1167:41)
at D:\PROYECTOS\Electron\Fracture2\.webpack\main\index.js:1226:61
at D:\PROYECTOS\Electron\Fracture2\.webpack\main\index.js:1279:3
at Object.<anonymous> (D:\PROYECTOS\Electron\Fracture2\.webpack\main\index.js:1282:12)
at Module._compile (node:internal/modules/cjs/loader:1120:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1175:10)
at Module.load (node:internal/modules/cjs/loader:988:32)
at Module._load (node:internal/modules/cjs/loader:829:12)
at c._load (node:electron/js2c/asar_bundle:5:13343)
Can't import ipcRenderer
Not being able to import ipcRenderer in any of the components. I think it's a webpack issue, but I'm not sure
Unable to import ipcMain
Error:
How to remove the `Typescript` Feature?
you made a good scaffolding! thank you very much!
but I don't wanna use Typescript，how can i remove it?
by the way，how can i add scss supporting in this scaffolding？
Multiple Window Close/Enlarge buttons
Hello,
I've just cloned the repo and launched the demo without editing any files and this is what I see in the generated window on macOs
As you can see the window has the default MacOs window buttons on the left AND the default Windows buttons on the right.
Is this something expected on dev mode or it is due to the inclusion of the Custom Window module?
looking app.asar content after make
npx asar extract app.asar ./contentI can see :
app.asar
content/ (app.asar extracted)
├─ .webpack/
│ ├─ main/
│ │ ├─ ....
│ ├─ renderer/
│ │ ├─ ....
├─ node_modules/ (empty)
├─ package.json
can we change the .webpack folder name ?
do you know if package.json is really used and can be removed ?
can we remove the empty node_modules folder ?
Regards <3
How to replace typescript with javascript?
It seems to me that I have done everything necessary to remove TypeScript from the project and replace it with JavaScript. I changed .tsx to .jsx, .ts to .js, converted the components' syntax from TypeScript to JavaScript, added babel-loader, and included the appropriate rule in webpack for loading .js and .jsx files, but something is still not working. Could you take a look at it?
My repo link: https://github.com/mietekrmd/electron-js
Errors below:
An unhandled rejection has occurred inside Forge:
Error: Compilation errors in the preload: asset app_window/preload.js 1.74 MiB [emitted] (name: app_window)
runtime modules 28.7 KiB 14 modules
modules by path ./node_modules/.pnpm/[email protected]/node_modules/core-js-pure/ 131 KiB 124 modules
modules by path ./node_modules/.pnpm/@[email protected]_react-refresh@0...(truncated) 53 KiB 23 modules
modules by path ./node_modules/.pnpm/[email protected][email protected][email protected]/node_m...(truncated) 78.4 KiB 16 modules
modules by path ./node_modules/.pnpm/[email protected]/node_modules/webpack/hot/*.js 5.34 KiB 4 modules
modules by path ./node_modules/.pnpm/[email protected]/node_modules/html-entities/lib/*.js 115 KiB
./node_modules/.pnpm/[email protected]/node_modules/html-entities/lib/index.js 6.94 KiB [built] [code generated]
+ 3 modules
modules by path ./node_modules/.pnpm/[email protected]/node_modules/react-refresh/ 22.5 KiB
./node_modules/.pnpm/[email protected]/node_modules/react-refresh/runtime.js 221 bytes [built] [code generated]
./node_modules/.pnpm/[email protected]/node_modules/react-refresh/cjs/react-r...(truncated) 22.3 KiB [built] [code generated]
modules by path ./misc/window/*.js 4.15 KiB
./misc/window/windowPreload.js 1.23 KiB [built] [code generated]
./misc/window/titlebarContext.js 2.92 KiB [built] [code generated]
+ 6 modules
webpack 5.89.0 compiled successfully in 6809 ms
assets by path native_modules/dist/locales/*.pak 34.7 MiB 55 assets
assets by path native_modules/dist/*.dll 21 MiB
asset native_modules/dist/libGLESv2.dll 7.26 MiB [emitted] (auxiliary name: app_window)
+ 5 assets
assets by path native_modules/dist/*.pak 5.55 MiB
asset native_modules/dist/resources.pak 5.23 MiB [emitted] (auxiliary name: app_window)
+ 2 assets
assets by path app_window/ 5.7 MiB
asset app_window/index.js 5.7 MiB [emitted] (name: app_window)
asset app_window/index.html 209 bytes [emitted]
assets by path native_modules/dist/*.bin 873 KiB
asset native_modules/dist/v8_context_snapshot.bin 612 KiB [emitted] (auxiliary name: app_window)
asset native_modules/dist/snapshot_blob.bin 261 KiB [emitted] (auxiliary name: app_window)
+ 9 assets
runtime modules 28.8 KiB 16 modules
modules by path ./node_modules/.pnpm/ 1.41 MiB 198 modules
modules by path ./misc/window/ 38.6 KiB
modules by path ./misc/window/components/ 31.1 KiB 6 modules
modules by path ./misc/window/*.js 7.47 KiB 3 modules
asset modules 22.9 KiB (javascript) 8.14 KiB (asset)
./assets/images/logo.png 4.53 KiB [built] [code generated]
./assets/icons/chrome.png 1.78 KiB [built] [code generated]
./assets/icons/react.png 1.41 KiB [built] [code generated]
+ 6 modules
modules by path ./src/renderer/ 40.7 KiB
modules by path ./src/renderer/components/*.jsx 10 KiB 2 modules
modules by path ./src/renderer/components/*.scss 29.1 KiB 2 modules
./src/renderer/appRenderer.jsx 1.58 KiB [built] [code generated]
WARNING in ./node_modules/.pnpm/[email protected]/node_modules/electron/index.js
Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
* "C:/Users/user/Downloads/folder/electron-react-webpack-typescript-2023-master/node_modules/.pnpm/[email protected]/node_modules/electron/dist/LICENSE"
* "C:/Users/user/Downloads/folder/electron-react-webpack-typescript-2023-master/node_modules/.pnpm/[email protected]/node_modules/electron/dist/LICENSES.chromium.html"
* "C:/Users/user/Downloads/folder/electron-react-webpack-typescript-2023-master/node_modules/.pnpm/[email protected]/node_modules/electron/dist/chrome_100_percent.pak"
* and more ...
@ ./misc/window/titlebarContext.js 15:0-39 18:4-22 21:4-22 24:4-22 27:4-22 30:4-22 33:4-22 36:4-22 39:4-22 42:4-22 45:4-22 48:4-22 51:4-22 54:4-22 57:4-22 60:4-22 63:4-22 66:4-22 69:4-22
@ ./misc/window/titlebarContextApi.js 15:0-58
@ ./misc/window/components/Titlebar.jsx 25:0-44 108:12-19
@ ./misc/window/components/WindowFrame.jsx 16:0-34 41:39-47
@ ./src/renderer/appRenderer.jsx 5:0-66 12:43-54
1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
ERROR in ./node_modules/.pnpm/[email protected]/node_modules/electron/index.js 1:9-22
Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\electron'
resolve 'fs' in 'C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\electron'
Parsed request is a module
using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\electron\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
looking for modules in C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\electron\node_modules
single file module
using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\electron\package.json (relative path: ./node_modules/fs)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\electron\node_modules\fs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\electron\node_modules\fs.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\electron\node_modules\fs.jsx doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\electron\node_modules\fs.css doesn't exist
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\electron\node_modules\fs doesn't exist
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\node_modules doesn't exist or is not a directory
looking for modules in C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules
single file module
using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\package.json (relative path: ./node_modules/.pnpm/[email protected]/node_modules/fs)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\fs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\fs.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\fs.jsx doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\fs.css doesn't exist
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\fs doesn't exist
looking for modules in C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\node_modules
single file module
using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\package.json (relative path: ./node_modules/.pnpm/node_modules/fs)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\node_modules\fs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\node_modules\fs.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\node_modules\fs.jsx doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\node_modules\fs.css doesn't exist
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\node_modules\fs doesn't exist
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\node_modules doesn't exist or is not a directory
looking for modules in C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules
single file module
using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\package.json (relative path: ./node_modules/fs)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs is not a file
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs.jsx doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs.css doesn't exist
existing directory C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs
using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\package.json (relative path: .)
using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\package.json (relative path: ./node_modules/fs)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs is not a file
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs.jsx doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs.css doesn't exist
as directory
existing directory C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs
using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\package.json (relative path: .)
use ./index.js from main in package.json
using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\package.json (relative path: ./index.js)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index.js doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index.js.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index.js.jsx doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index.js.css doesn't exist
as directory
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index.js doesn't exist
using path: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index
using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\package.json (relative path: ./index)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index.jsx doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index.css doesn't exist
C:\Users\user\Downloads\folder\node_modules doesn't exist or is not a directory
C:\Users\user\Downloads\node_modules doesn't exist or is not a directory
C:\Users\user\node_modules doesn't exist or is not a directory
C:\Users\node_modules doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory
@ ./misc/window/titlebarContext.js 15:0-39 18:4-22 21:4-22 24:4-22 27:4-22 30:4-22 33:4-22 36:4-22 39:4-22 42:4-22 45:4-22 48:4-22 51:4-22 54:4-22 57:4-22 60:4-22 63:4-22 66:4-22 69:4-22
@ ./misc/window/titlebarContextApi.js 15:0-58
@ ./misc/window/components/Titlebar.jsx 25:0-44 108:12-19
@ ./misc/window/components/WindowFrame.jsx 16:0-34 41:39-47
@ ./src/renderer/appRenderer.jsx 5:0-66 12:43-54
webpack 5.89.0 compiled with 1 error and 1 warning in 8329 ms
at C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\@[email protected]\node_modules\@electron-forge\plugin-webpack\dist\WebpackPlugin.js:209:43
at Hook.eval [as call] (eval at create (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
at Hook.CALL_DELEGATE [as _call] (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\tapable\lib\Hook.js:14:14)
at C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\webpack\lib\MultiCompiler.js:97:22
at Hook.eval [as callAsync] (eval at create (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:29:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\tapable\lib\Hook.js:18:14)
at Watching._done (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\webpack\lib\Watching.js:299:28)
at C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\webpack\lib\Watching.js:213:21
at Compiler.emitRecords (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\webpack\lib\Compiler.js:919:5)
at C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\webpack\lib\Watching.js:191:22
at C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\webpack\lib\Compiler.js:885:14
at Hook.eval [as callAsync] (eval at create (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\tapable\lib\Hook.js:18:14)
at C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\webpack\lib\Compiler.js:882:27
at C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\neo-async\async.js:2818:7
at done (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\neo-async\async.js:3522:9)
at eval (eval at create (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1)
at C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected][email protected]\node_modules\webpack-dev-middleware\dist\utils\setupWriteToDisk.js:101:20
at C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\[email protected]\node_modules\graceful-fs\graceful-fs.js:61:14
at FSReqCallback.oncomplete (node:fs:192:23)
How to make code more protective?
When I finish developing the project, I want the code to be protected. I tried adding bytenode-webpack-plugin and asarmor to the project, but they failed. Can you provide a solution? Thanks
macOS menu support
Love this! I would love to see this handled in a more OS-agnostic manner. For example, on my mac I see:
I think it would be great if this took the OS into consideration.
Problems with adding tedious
Hi!
Just installed dependency using yarn add tedious and yarn add @types/tedious , then tried to do simply connection, but looks like it's not possible cause I got following error:
Uncaught ReferenceError: require is not defined
at Object.events (index.js:140122)
at __webpack_require__ (index.js:790)
at fn (index.js:101)
at Object../node_modules/tedious/lib/bulk-load.js (index.js:99091)
at __webpack_require__ (index.js:790)
at fn (index.js:101)
at Object../node_modules/tedious/lib/tedious.js (index.js:110052)
at __webpack_require__ (index.js:790)
at fn (index.js:101)
at Module../src/app/database/sqlService.ts (index.js:139762)
looks like it comes from module.exports = require("events"); from tedious. There are a lot of answers in google about similar problems, that I should enable nodeIntegration. I don't think so thats it in this case, but anyway I've tried and it didn't work either.
Code:
export const connectToDb = (): Promise<Connection> => {
return new Promise((resolve, reject) => {
const config = {
authentication: {
options: {
userName: "sa", // update me
password: "" // update me
},
type: "default"
},
server: "test_gt_db@localhost", // update me
options: {
database: "test", //update me
encrypt: true
}
}
const connection = new Connection(config) // it breaks here
})
}
Custom Titlebar
I'm trying to use https://github.com/AlexTorresSk/custom-electron-titlebar with this boilerplate, but it's always resulting in errno: -4068. I tried to use this on index.html, but then other errors (such as require is not defined) shows.
How can I implement this package into this boilerplate? :)
Launch error
I cloned repository then i use yarn install, and i get this error:
Launching Application
Webpack Output Available: http://localhost:9000
⠙ Compiling Renderer Code
⠹ Compiling Renderer CodeApp threw an error during load
Error: Cannot find module '@misc/window/titlebarIPC'
at webpackMissingModule (F:\pet\minecraft-launcher\electron-react-webpack-typescript-2022.webpack\main\index.js:912:50)
at Object../src/main/appWindow.ts (F:\pet\minecraft-launcher\electron-react-webpack-typescript-2022.webpack\main\index.js:912:149)
at webpack_require (F:\pet\minecraft-launcher\electron-react-webpack-typescript-2022.webpack\main\index.js:1065:41)
at F:\pet\minecraft-launcher\electron-react-webpack-typescript-2022.webpack\main\index.js:1123:68
at F:\pet\minecraft-launcher\electron-react-webpack-typescript-2022.webpack\main\index.js:1168:3
at Object. (F:\pet\minecraft-launcher\electron-react-webpack-typescript-2022.webpack\main\index.js:1171:12)
at Module._compile (node:internal/modules/cjs/loader:1116:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1169:10)
at Module.load (node:internal/modules/cjs/loader:988:32)
at Module._load (node:internal/modules/cjs/loader:829:12)
⠧ Compiling Renderer Code2 assets
73 modules
ERROR in ./src/renderer/appRenderer.tsx 4:0-62
Module not found: Error: Can't resolve '@misc/window/components/WindowFrame' in 'F:\pet\minecraft-launcher\electron-react-webpack-typescript-2022\src\renderer'
webpack 5.70.0 compiled with 1 error in 9338 ms
✖ Compiling Renderer Code
Electron Forge was terminated:
ModuleNotFoundError: Module not found: Error: Can't resolve '@misc/window/components/WindowFrame' in 'F:\pet\minecraft-launcher\electron-react-webpack-typescript-2022\src\renderer'
ERROR in ./src/main/appWindow.ts 3:37-63
TS2307: Cannot find module '@misc/window/titlebarIPC' or its corresponding type declarations.
1 | import { app, BrowserWindow } from 'electron';
2 | import path from 'path';
3 | import { registerTitlebarIpc } from '@misc/window/titlebarIPC';
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
4 |
5 | // Electron Forge automatically creates these entry points
6 | declare const APP_WINDOW_WEBPACK_ENTRY: string;
ERROR in ./src/renderer/appRenderer.tsx 4:25-62
TS2307: Cannot find module '@misc/window/components/WindowFrame' or its corresponding type declarations.
2 | import ReactDOM from 'react-dom';
3 | import { inDev } from '@common/helpers';
4 | import WindowFrame from '@misc/window/components/WindowFrame';
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
5 | import Application from './components/Application';
6 |
7 | // Say something
Found 2 errors in 9823 ms.
ERROR in ./src/main/appWindow.ts 3:37-63
TS2307: Cannot find module '@misc/window/titlebarIPC' or its corresponding type declarations.
1 | import { app, BrowserWindow } from 'electron';
2 | import path from 'path';
3 | import { registerTitlebarIpc } from '@misc/window/titlebarIPC';
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
4 |
5 | // Electron Forge automatically creates these entry points
6 | declare const APP_WINDOW_WEBPACK_ENTRY: string;
ERROR in ./src/renderer/appRenderer.tsx 4:25-62
TS2307: Cannot find module '@misc/window/components/WindowFrame' or its corresponding type declarations.
2 | import ReactDOM from 'react-dom';
3 | import { inDev } from '@common/helpers';
4 | import WindowFrame from '@misc/window/components/WindowFrame';
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
5 | import Application from './components/Application';
6 |
7 | // Say something
Found 2 errors in 8654 ms.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.