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 Boilerplate with Custom Window and Titlebar Menus.
License: MIT License
Would be cool to have the option to set the target in the webpack config to electron/electron-renderer
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?
Hi, looks great! Where do I change the devserver port?
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'
Why only functional React components are rendered?
Old class components just dosen't show up.
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.
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
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.
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!
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
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.
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$/,
},
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.
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.
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.
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)
Not being able to import ipcRenderer in any of the components. I think it's a webpack issue, but I'm not sure
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?
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?
npx asar extract app.asar ./content
I 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
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)
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
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
})
}
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? :)
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.