{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 闹够了就滚 的问题《Uncaught ReferenceError: require is not defined; w》','https://www.manongdao.com/q-712710.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am trying to create an application using Electron, React and TypeScript (and my idea seems to be a nightmare to me now). I am using electron-prebuilt-compile to transpile my code. My intention is to keep nodeIntegration as false. However, if I do that, it shows me error:
Uncaught ReferenceError: require is not defined at index.html:inline_0.js:2
I have tried to add a few babel presets but those are not helping me. I have added CommonJS preset as well there. But it still fails.
Reason behind keeping nodeIntegration false is that I do not want it to be accessible in renderer.js because of security hazards it brings with it.
//.compilerc
"env": {
"development": {
"application/javascript": {
"presets": [
[
"env",
{
"targets": {
"electron": "4.1.3"
}
}
],
"react",
"es2016-node5"
],
"plugins": [
"react-hot-loader/babel",
"dynamic-import-node",
["transform-es2015-modules-commonjs", {
"allowTopLevelThis": true
}],
"transform-async-to-generator",
"transform-es2015-modules-commonjs"
],
"sourceMaps": "inline"
},
"text/html": {
"pretty": true
}
},
//package.json
{
"name": "master-dashboard",
"version": "1.0.0",
"description": "Master Dashboard",
"main": "app/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron .",
"postinstall": "electron-rebuild"
},
"keywords": [
],
"author": "Kaustav Sarkar",
"license": "MIT",
"dependencies": {
"electron": "^4.1.3",
"electron-compile": "^6.4.4",
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"devDependencies": {
"babel-plugin-dynamic-import-node": "^2.2.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"electron-prebuilt-compile": "^4.0.0",
"electron-rebuild": "^1.8.4",
"react-hot-loader": "^4.8.2"
}
}
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="index.css">
</head>
<body>
<div id="master"></div>
</body>
<script type="application/javascript">
require('./renderers/renderer')
</script>
</html>
//index.js gist
const createWindow = () => {
win = new BrowserWindow({
center: true,
resizable: true,
webPreferences: {
nodeIntegrationInWorker: false,
nodeIntegration: false,
show: false
}
});
win.maximize();
win.webContents.openDevTools();
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
slashes: true,
protocol: 'file'
}), { "extraHeaders": "Cache-Control: no-cache\n" });