I am creating a desktop application for Windows using NodeJS, React, Electron and a SQLite database. My configuration is:
- Windows 10 Pro
- Node v14.17.4
- Electron v13.1.7
- Webpack v5.46.0
- React v16.14.0
- SQLite3 v5.0.0
In order to clean and run the app I execute the following cmd script:
:: clean dist folder
del /q "%DIR_ROOT%\dist"
:: clean node_modules folder
del /q /s "%DIR_ROOT%\node_modules"
:: remove package-lock.json
del /q "%DIR_ROOT%\package-lock.json"
call npm install
call npm run build:react
call npm run build
call npm start
The whole script runs correctly apart for step call npm run build:react which returns the following errors:
WARNING in ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/util/compile.js 39:27-49
Module not found: Error: Can't resolve 'npm' in 'D:\Projects\test\node_modules\sqlite3\node_modules\node-pre-gyp\lib\util'
@ ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/ sync ^\.\/.*$ ./util/compile.js ./util/compile
@ ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/node-pre-gyp.js 52:13-36 184:38-55
@ ./node_modules/sqlite3/lib/sqlite3-binding.js 1:13-36
@ ./node_modules/sqlite3/lib/sqlite3.js 2:14-45
@ ./src/components/Dashboard.tsx 57:13-31
@ ./src/index.tsx 7:18-51
WARNING in ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/util/versioning.js 17:20-67
Critical dependency: the request of a dependency is an expression
@ ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/ sync ^\.\/.*$ ./util/versioning.js ./util/versioning
@ ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/node-pre-gyp.js 52:13-36 184:38-55
@ ./node_modules/sqlite3/lib/sqlite3-binding.js 1:13-36
@ ./node_modules/sqlite3/lib/sqlite3.js 2:14-45
@ ./src/components/Dashboard.tsx 57:13-31
@ ./src/index.tsx 7:18-51
4 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
ERROR in ./node_modules/sqlite3/node_modules/node-gyp/lib/Find-VS2017.cs 7:6
Module parse failed: Unexpected token (7:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // Usage:
| // powershell -ExecutionPolicy Unrestricted -Version "2.0" -Command "&{Add-Type -Path Find-VS2017.cs; [VisualStudioConfiguration.Main]::Query()}"
> using System;
| using System.Text;
| using System.Runtime.InteropServices;
@ ./node_modules/sqlite3/node_modules/node-gyp/lib/ sync ^\.\/.*$ ./Find-VS2017.cs
@ ./node_modules/sqlite3/node_modules/node-gyp/lib/node-gyp.js 55:13-36 197:38-55
@ ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/util/compile.js 29:28-55
@ ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/ sync ^\.\/.*$ ./util/compile.js ./util/compile
@ ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/node-pre-gyp.js 52:13-36 184:38-55
@ ./node_modules/sqlite3/lib/sqlite3-binding.js 1:13-36
@ ./node_modules/sqlite3/lib/sqlite3.js 2:14-45
@ ./src/components/Dashboard.tsx 57:13-31
@ ./src/index.tsx 7:18-51
ERROR in ./node_modules/sqlite3/node_modules/node-gyp/lib/node-gyp.js 67:16-37
Module not found: Error: Can't resolve '../package' in 'D:\Projects\test\node_modules\sqlite3\node_modules\node-gyp\lib'
@ ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/util/compile.js 29:28-55
@ ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/ sync ^\.\/.*$ ./util/compile.js ./util/compile
@ ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/node-pre-gyp.js 52:13-36 184:38-55
@ ./node_modules/sqlite3/lib/sqlite3-binding.js 1:13-36
@ ./node_modules/sqlite3/lib/sqlite3.js 2:14-45
@ ./src/components/Dashboard.tsx 57:13-31
@ ./src/index.tsx 7:18-51
ERROR in ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/info.js 14:14-32
Module not found: Error: Can't resolve 'aws-sdk' in 'D:\Projects\test\node_modules\sqlite3\node_modules\node-pre-gyp\lib'
@ ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/ sync ^\.\/.*$ ./info.js ./info
@ ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/node-pre-gyp.js 52:13-36 184:38-55
@ ./node_modules/sqlite3/lib/sqlite3-binding.js 1:13-36
@ ./node_modules/sqlite3/lib/sqlite3.js 2:14-45
@ ./src/components/Dashboard.tsx 57:13-31
@ ./src/index.tsx 7:18-51
ERROR in ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/publish.js 18:14-32
Module not found: Error: Can't resolve 'aws-sdk' in 'D:\Projects\test\node_modules\sqlite3\node_modules\node-pre-gyp\lib'
@ ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/ sync ^\.\/.*$ ./publish.js ./publish
@ ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/node-pre-gyp.js 52:13-36 184:38-55
@ ./node_modules/sqlite3/lib/sqlite3-binding.js 1:13-36
@ ./node_modules/sqlite3/lib/sqlite3.js 2:14-45
@ ./src/components/Dashboard.tsx 57:13-31
@ ./src/index.tsx 7:18-51
ERROR in ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/unpublish.js 16:14-32
Module not found: Error: Can't resolve 'aws-sdk' in 'D:\Projects\test\node_modules\sqlite3\node_modules\node-pre-gyp\lib'
@ ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/ sync ^\.\/.*$ ./unpublish.js ./unpublish
@ ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/node-pre-gyp.js 52:13-36 184:38-55
@ ./node_modules/sqlite3/lib/sqlite3-binding.js 1:13-36
@ ./node_modules/sqlite3/lib/sqlite3.js 2:14-45
@ ./src/components/Dashboard.tsx 57:13-31
@ ./src/index.tsx 7:18-51
ERROR in ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/util/nw-pre-gyp/index.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <!doctype html>
| <html>
| <head>
@ ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/ sync ^\.\/.*$ ./util/nw-pre-gyp/index.html
@ ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/node-pre-gyp.js 52:13-36 184:38-55
@ ./node_modules/sqlite3/lib/sqlite3-binding.js 1:13-36
@ ./node_modules/sqlite3/lib/sqlite3.js 2:14-45
@ ./src/components/Dashboard.tsx 57:13-31
@ ./src/index.tsx 7:18-51
4 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
webpack 5.50.0 compiled with 6 errors and 4 warnings in 8308 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! bank-account@1.0.0 build:react: `webpack --mode development --config webpack.react.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the bank-account@1.0.0 build:react script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\admin\AppData\Roaming\npm-cache\_logs\2021-08-13T10_35_36_250Z-debug.log
Nonetheless, the application starts but instruction import * as sqlite from 'sqlite3' returns the following error:
Uncaught Error: Cannot find module 'D:\Projects\test\package.json'
at webpackEmptyContext (lib|sync:2)
at Object.exports.find (pre-binding.js:20)
at Object../node_modules/sqlite3/lib/sqlite3-binding.js (sqlite3-binding.js:3)
at __webpack_require__ (bootstrap:19)
at Object../node_modules/sqlite3/lib/sqlite3.js (sqlite3.js:2)
at __webpack_require__ (bootstrap:19)
at Object../src/components/Dashboard.tsx (Dashboard.tsx:3)
at __webpack_require__ (bootstrap:19)
at index.tsx:5
at index.tsx:7
package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "dist/main.js",
"scripts": {
"build:react": "webpack --mode development --config webpack.react.config.js",
"build": "webpack --mode development",
"start": "electron ./dist/main.js",
"package-win": "electron-packager . electron-demo --overwrite --asar=true --platform=win32 --arch=ia32 --icon=src/assets/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron-demo\""
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"@types/react": "^16.14.11",
"@types/react-dom": "^16.9.14",
"@types/sqlite3": "^3.1.7",
"bootstrap": "4.6.0",
"bootstrap-css": "^4.0.0-alpha.5",
"css-loader": "^6.2.0",
"electron": "^13.1.7",
"electron-cgi": "^1.0.6",
"electron-packager": "^13.1.1",
"html-webpack-plugin": "^5.3.2",
"prettier": "^2.3.2",
"react": "^16.14.0",
"react-bootstrap": "^1.6.1",
"react-dom": "^16.14.0",
"sqlite3": "^5.0.0",
"style-loader": "^3.2.1",
"ts-loader": "^9.2.4",
"tslint": "^6.1.3",
"typescript": "^4.3.5",
"webpack": "^5.46.0",
"webpack-cli": "^4.7.2"
}
}
webpack.config.js
const path = require("path");
const config = {
target: "electron-main",
devtool: "source-map",
entry: "./src/main.ts",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.(jsx|tsx|js|ts)$/,
use: [ "ts-loader" ],
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
]
},
resolve: {
extensions: [".ts", ".tsx", ".js", '.css']
},
node: {
__dirname: false,
__filename: false
}
};
module.exports = (env, argv) => {
return config;
};
webpack.react.config.js
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
const config = {
target: "electron-renderer",
devtool: "source-map",
entry: "./src/index.tsx",
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.(jsx|tsx|js|ts)$/,
use: [ "ts-loader" ],
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
]
},
resolve: {
extensions: [".ts", ".tsx", ".js", '.css']
},
plugins: [htmlPlugin],
stats: {
children: false
}
};
module.exports = (env, argv) => {
return config;
};