I am tryin to make a electron - react application and while running i am getting a error on the console of the browser.
Uncaught ReferenceError: require is not defined
at Object.events (bundle.js:265:1)
at __webpack_require__ (bundle.js:410:32)
at fn (bundle.js:535:21)
at ./node_modules/webpack/hot/emitter.js (bundle.js:93:20)
at __webpack_require__ (bundle.js:410:32)
at fn (bundle.js:535:21)
at ./node_modules/webpack/hot/dev-server.js (bundle.js:73:19)
at __webpack_require__ (bundle.js:410:32)
at bundle.js:1352:11
at bundle.js:1355:12
webpack.config.js file
import { join } from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import {fileURLToPath} from 'url';
const __filename = fileURLToPath(import.meta.url);
import path from 'node:path';
const __dirname = path.dirname(__filename);
export default {
//This property defines where the application starts
entry:'./public/main.js',
//This property defines the file path and the file name which will be used for deploying the bundled file
output:{
path: path.join(__dirname, '/dist'),
filename: 'bundle.js',
},
mode: "development",
devtool: 'source-map',
target: 'electron-main',
//Setup loaders
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
resolve: {
extensions: [".js", ".jsx", ".json"]
}
},
{
test: /\.(png|svg|jpg|jpeg|gif|ico|json)$/,
exclude: /node_modules/,
use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
},
{
test: /\.?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
},
{
// loads .html files
test: /\.(html)$/,
include: [path.resolve(__dirname, "app/src")],
use: {
loader: "html-loader"
}
},
{
// loads .css files
test: /\.css$/,
include: [path.resolve(__dirname, "app/src")],
use: [
"style-loader",
"css-loader"
]
}
],
},
// Setup plugin to use a HTML file for serving bundled js files
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html',
favicon: './public/favicon.ico',
manifest: './public/manifest.json'
})
]
}
package.json file
{
"name": "app3",
"version": "0.1.0",
"private": true,
"main": "./public/main.js",
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"nodemon": "^3.1.4",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
"webpack": "^5.92.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4"
},
"scripts": {
"start": "webpack-dev-server --config webpack.config.js --port 3000",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"start-dev": "electron .",
"start:nodemon": " nodemon --watch main.js --exec npm run start-dev"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.24.7",
"@babel/preset-env": "^7.24.7",
"@babel/preset-react": "^7.24.7",
"babel-loader": "^9.1.3",
"electron": "^31.0.2",
"electron-builder": "^24.13.3",
"electron-is-dev": "^3.0.1",
"html-loader": "^5.0.0",
"html-webpack-plugin": "^5.6.0"
},
"dist": "electron-builder",
"build": {
"appId": "com.example.myapp",
"productName": "My Electron App",
"directories": {
"output": "dist"
}
},
"type": "module",
"targets": {
"default": {
"distDir": "./public"
}
}
}
.babaelrc file
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
I am using es6 hence the "type":"module" in package.json
also when i run npm start i do not get any error in my console
> [email protected] start
> webpack-dev-server --config webpack.config.js --port 3000
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:3000/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.103:3000/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\electron_projects\app3\public' directory
asset bundle.js 46.4 KiB [emitted] (name: main) 1 related asset
asset favicon.ico 3.78 KiB [emitted]
asset ./index.html 1.75 KiB [emitted]
runtime modules 23.2 KiB 8 modules
built modules 6.9 KiB [built]
cacheable modules 6.69 KiB
modules by path ./node_modules/webpack/hot/*.js 5.18 KiB
./node_modules/webpack/hot/dev-server.js 1.94 KiB [built] [code generated]
./node_modules/webpack/hot/log.js 1.74 KiB [built] [code generated]
./node_modules/webpack/hot/log-apply-result.js 1.43 KiB [built] [code generated]
./node_modules/webpack/hot/emitter.js 75 bytes [built] [code generated]
./public/main.js 1.12 KiB [built] [code generated]
./node_modules/electron-is-dev/index.js 406 bytes [built] [code generated]
external "electron" 42 bytes [built] [code generated]
external "path" 42 bytes [built] [code generated]
external "node:path" 42 bytes [built] [code generated]
external "url" 42 bytes [built] [code generated]
external "events" 42 bytes [built] [code generated]
webpack 5.92.1 compiled successfully in 1100 ms
main.js for electron
import { app, BrowserWindow } from 'electron';
import { join } from 'path';
import isDev from 'electron-is-dev';
import path from 'node:path';
import {fileURLToPath} from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
import {ipcMain} from 'electron';
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
preload: path.join(__dirname + 'src/others/preload.js'),
contextIsolation: true,
enableRemoteModule: true,
webSecurity: false,
},
});
const startURL = isDev
? 'http://localhost:3000'
: `file://${join(__dirname, '../build/index.html')}`;
mainWindow.loadURL(startURL);
mainWindow.on('closed', () => (mainWindow = null));
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
ipcMain.handle("get/data", async(event,args)=>{
return await readFromDb();
})
app.on('activate', () => {
if (mainWindow === null) {
createWindow();
}
});
I have specified Node.js integration as true.
This is my folder structure. we can ignore backend, fronted and others as they are not in use right now.
I am not sure how to proceed with this error as this is in bundle.js. Can someone pls guide me. Any assistance would be greatly appreciated !!
