Electron App Not Starting after I build it - deployment

I have installed the electron-packager npm module globally and run npm run build to build my application.
When I do this, the app seems to build properly and it outputs an application (see picture). However, the date/time on the application is from over a month ago. Furthermore, when I open the application, it simply presents a blank screen.
Below, please find my package.json and accompanying pictures.
{
"name": "turtlecreeklane",
"version": "0.0.1",
"author": "Tanner Houghton <houta483#uchicago.edu>",
"description": "An electron-vue project",
"license": "ISC",
"main": "./dist/electron/main.js",
"scripts": {
"build": "electron-packager . TCL",
"build:dir": "node .electron-vue/build.js && electron-builder --dir",
"build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
"build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
"dev": "./start_backend.sh& node .electron-vue/dev-runner.js",
"pack": "npm run pack:main && npm run pack:renderer",
"pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
"postinstall": ""
},
"build": {
"productName": "turtlecreeklane",
"appId": "com.example.yourapp",
"directories": {
"output": "build"
},
"files": [
"dist/electron/**/*"
],
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/Icon-48"
},
"win": {
"icon": "build/icons/icon.ico"
},
"linux": {
"icon": "build/icons"
}
},
"dependencies": {
"axios": "^0.19.2",
"body-parser": "^1.19.0",
"cookie-parser": "^1.4.5",
"ejs": "^3.0.2",
"electron-unhandled": "^3.0.2",
"express": "^4.17.1",
"multer": "^1.4.2",
"path": "^0.12.7",
"pillow": "0.0.9",
"vue": "^2.5.16",
"vue-axios": "^2.1.5",
"vuex": "^3.1.3"
},
"devDependencies": {
"ajv": "^6.5.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-minify-webpack-plugin": "^0.3.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"cfonts": "^2.1.2",
"chalk": "^2.4.1",
"copy-webpack-plugin": "^4.5.1",
"cross-env": "^5.1.6",
"css-loader": "^0.28.11",
"del": "^3.0.0",
"devtron": "^1.4.0",
"electron": "^2.0.4",
"electron-builder": "^20.19.2",
"electron-debug": "^1.5.0",
"electron-devtools-installer": "^2.2.4",
"electron-packager": "^14.2.1",
"electron-prebuilt": "^1.4.13",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "0.4.0",
"multispinner": "^0.2.1",
"node-loader": "^0.6.0",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.2.4",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4",
"webpack-hot-middleware": "^2.22.2",
"webpack-merge": "^4.1.3"
}
}
Picture showing that the project seems to be built but the date if for over a month ago...
Picture showing that the app looks blank after it is opened
Thanks,
Tanner

Related

#sveltejs/adapter-cloudflare. I get many error while run `npm run build`

I'm Using #sveltejs/adapter-cloudflare to deploy my project to Cloudflare Pages.
I'm tried to use this package for a simple sveletKit app. It can success deploy to Pages.
But with more complex project, I got many many ERROR log while run build.
This is the log: https://pastebin.com/Yhw1Gu0c
And this is my package.json
"name": "app",
"version": "0.0.1",
"scripts": {
"dev": "vite dev --port 3331",
"build": "vite build",
"package": "svelte-kit package",
"preview": "vite preview",
"test": "playwright test",
"check": "svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check --plugin-search-dir=. . && eslint .",
"format": "prettier --write --plugin-search-dir=. ."
},
"devDependencies": {
"#carbon/colors": "^11.3.0",
"#firebase/app-types": "^0.7.0",
"#playwright/test": "^1.22.2",
"#solana/qr-code-styling": "1.6.0-beta.0",
"#sveltejs/adapter-auto": "next",
"#sveltejs/adapter-cloudflare": "^1.0.0-next.31",
"#sveltejs/kit": "next",
"#typescript-eslint/eslint-plugin": "^5.27.0",
"#typescript-eslint/parser": "^5.27.0",
"bignumber.js": "^9.0.2",
"carbon-components-svelte": "^0.67.4",
"carbon-icons-svelte": "^11.2.0",
"carbon-preprocess-svelte": "^0.9.1",
"cookie": "^0.5.0",
"eslint": "^8.16.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^4.0.0",
"firebase-admin": "^11.0.1",
"prettier": "^2.6.2",
"prettier-plugin-svelte": "^2.7.0",
"sass": "^1.54.0",
"svelte": "^3.44.0",
"svelte-check": "^2.7.1",
"svelte-preprocess": "^4.10.6",
"tslib": "^2.3.1",
"typescript": "^4.7.4",
"vite": "^3.0.0"
},
"type": "module",
"dependencies": {
"#solana/web3.js": "^1.50.1",
"firebase": "^9.9.1"
}
}

Could not find a declaration file for module 'react-map-gl-geocoder'

Hi I am trying to use Mapbox geocoder for my react-project. I am always getting those two errors.
Could not find a declaration file for module 'react-map-gl-geocoder'. 'Git/react-excercises/node_modules/react-map-gl-geocoder/dist/index.js' implicitly has an 'any' type.
Try npm i --save-dev #types/react-map-gl-geocoder if it exists or add a new declaration (.d.ts) file containing declare module 'react-map-gl-geocoder';ts(7016)
./node_modules/react-map-gl-geocoder/dist/index.m.js
Attempted import error: 'FlyToInterpolator' is not exported from 'react-map-gl' (imported as 'r').
This is my package.json
{
"name": "react-excercises",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.26.0",
"bootstrap": "^5.1.3",
"mapbox": "^1.0.0-beta10",
"mapbox-gl": "^2.7.0",
"mapbox-gl-geocoder": "^2.0.1",
"prop-types": "^15.8.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-icons": "^4.3.1",
"react-map-gl": "^7.0.9",
"react-map-gl-geocoder": "^2.2.0",
"react-mapbox-gl-geocoder": "^1.1.0",
"react-scripts": "4.0.3",
"reactstrap": "^9.0.1",
"styled-components": "^5.3.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}

Host React App with Parcel Build on gh pages?

Can someone please help me figure out how to host my app on gh pages. All I am getting when I deploy it is the ReadMe file.
My app is deployed using parcel build, and it works perfectly fine when ran locally.
This is my package.js:
{
"name": "myflix-client",
"version": "1.0.0",
"description": "",
"default": "src/index.html",
"dependencies": {
"#fortawesome/free-regular-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.16",
"axios": "^0.24.0",
"font-awesome": "^4.7.0",
"js-tokens": "^4.0.0",
"loose-envify": "^1.4.0",
"moment": "^2.29.1",
"object-assign": "^4.1.1",
"parcel": "^2.0.0-rc.0",
"parcel-bundler": "^1.12.5",
"prop-types": "^15.8.0",
"react": "^17.0.2",
"react-bootstrap": "^2.1.2",
"react-dom": "^17.0.2",
"react-paginate": "^8.1.0",
"react-redux": "^7.2.6",
"react-router-dom": "^5.2.0",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9",
"scheduler": "^0.20.2",
"uuid": "^8.3.2"
},
"scripts": {
"start": "parcel src/index.html",
"build": "parcel-build src/index.html",
"test": "echo \"Error: no test specified\" && exit 1",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"repository": {
"type": "git",
"url": "git+https://github.com/johannesvw3/myFlix-client-react.git"
},
"author": "Deepthi Rao",
"license": "ISC",
"bugs": {
"url": "https://github.com/johannesvw3/myFlix-client-react"
},
"homepage": "https://github.com/johannesvw3/myFlix-client-react",
"devDependencies": {
"#parcel/transformer-image": "^2.0.0-rc.0",
"#parcel/transformer-sass": "^2.0.0-rc.0",
"gh-pages": "^3.2.3"
}
}
Thanks!

Ember: Uncaught Error: Cannot find module "apollo-cache"

I have tried to run an older ember project.
I have updated the project with yarn and after tried and run it with ember serve
When I try and run the app on localhost:4200 I get the following error in the console and the screen in the view is grey:
Uncaught Error: Cannot find module "apollo-cache"
at webpackMissingModule
I am not sure what is happening and if dependencies are correct.
From:
{
"name": "",
"version": "0.0.0",
"description": "Small description for goes here",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"repository": "",
"scripts": {
"build": "ember build",
"start": "ember server",
"test": "ember test",
"schema": "node retrieve-fragment-types.js"
},
"devDependencies": {
"apollo-absinthe-upload-link": "^1.2.2",
"apollo-cache-inmemory": "^1.2.9",
"broccoli-asset-rev": "^2.4.5",
"ember-ajax": "^3.0.0",
"ember-apollo-client": "^1.0.1",
"ember-auto-import": "^1.2.20",
"ember-body-class": "^1.1.3",
"ember-cli": "3.3.0",
"ember-cli-app-version": "^3.1.0",
"ember-cli-babel": "^6.8.2",
"ember-cli-dependency-checker": "^3.0.0",
"ember-cli-deploy": "^1.0.0",
"ember-cli-deploy-build": "^1.0.0",
"ember-cli-deploy-cloudfront": "^1.1.0",
"ember-cli-deploy-display-revisions": "^1.0.0",
"ember-cli-deploy-gzip": "^1.0.0",
"ember-cli-deploy-revision-data": "^1.0.0",
"ember-cli-deploy-s3": "^1.0.0",
"ember-cli-deploy-s3-index": "^1.0.0",
"ember-cli-eslint": "^4.2.0",
"ember-cli-htmlbars": "^2.0.3",
"ember-cli-htmlbars-inline-precompile": "^1.0.2",
"ember-cli-inject-live-reload": "^1.4.1",
"ember-cli-json-module": "^1.0.0",
"ember-cli-moment-shim": "^3.1.0",
"ember-cli-qunit": "^4.0.1",
"ember-cli-sass": "^7.0.0",
"ember-cli-shims": "^1.0.2",
"ember-cli-sri": "^2.1.0",
"ember-cli-uglify": "^2.1.0",
"ember-composable-helpers": "^2.0.3",
"ember-crumbly": "ivanvanderbyl/ember-crumbly#use-router-infos-for-crumb-generation",
"ember-export-application-global": "^2.0.0",
"ember-fetch": "^5.1.1",
"ember-href-to": "^1.15.1",
"ember-leaflet": "^3.0.11",
"ember-leaflet-marker-cluster": "^0.2.0",
"ember-load-initializers": "^1.0.0",
"ember-moment": "^7.3.0",
"ember-paper": "^1.0.0-beta.8",
"ember-resolver": "^5.0.0",
"ember-simple-auth": "^1.2.2",
"ember-source": "~3.3.1",
"ember-truth-helpers": "^2.0.0",
"ember-uploader": "^2.0.0",
"graphql-tag": "^2.9.2",
"graphql-tools": "^3.1.1",
"leaflet": "^1.0.3",
"loader.js": "^4.2.3",
"moment-timezone": "^0.5.13"
},
"engines": {
"node": ">= 4"
},
"private": true,
"dependencies": {
"#sentry/browser": "^5.5.0",
"#sentry/integrations": "^5.5.0"
}
}
To:
{
"name": "",
"version": "0.0.0",
"description": "Small description for goes here",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"repository": "",
"scripts": {
"build": "ember build",
"start": "ember server",
"test": "ember test",
"schema": "node retrieve-fragment-types.js"
},
"devDependencies": {
"apollo-absinthe-upload-link": "^1.2.2",
"apollo-cache-inmemory": "^1.2.9",
"broccoli-asset-rev": "^2.4.5",
"ember-ajax": "^3.0.0",
"ember-apollo-client": "^1.0.1",
"ember-auto-import": "^1.2.20",
"ember-body-class": "^1.1.3",
"ember-cli-app-version": "^3.1.0",
"ember-cli-babel": "^6.8.2",
"ember-cli-dependency-checker": "^3.0.0",
"ember-cli-deploy": "^1.0.0",
"ember-cli-deploy-build": "^1.0.0",
"ember-cli-deploy-cloudfront": "^1.1.0",
"ember-cli-deploy-display-revisions": "^1.0.0",
"ember-cli-deploy-gzip": "^1.0.0",
"ember-cli-deploy-revision-data": "^1.0.0",
"ember-cli-deploy-s3": "^1.0.0",
"ember-cli-deploy-s3-index": "^1.0.0",
"ember-cli-eslint": "^4.2.0",
"ember-cli-htmlbars": "^2.0.3",
"ember-cli-htmlbars-inline-precompile": "^1.0.2",
"ember-cli-inject-live-reload": "^1.10.1",
"ember-cli-json-module": "^1.0.0",
"ember-cli-moment-shim": "^3.1.0",
"ember-cli-qunit": "^4.0.1",
"ember-cli-shims": "^1.0.2",
"ember-cli-sri": "^2.1.0",
"ember-cli-uglify": "^2.1.0",
"ember-composable-helpers": "^2.0.3",
"ember-crumbly": "ivanvanderbyl/ember-crumbly#use-router-infos-for-crumb-generation",
"ember-export-application-global": "^2.0.0",
"ember-fetch": "^5.1.1",
"ember-href-to": "^1.15.1",
"ember-leaflet": "^3.0.11",
"ember-leaflet-marker-cluster": "^0.2.0",
"ember-load-initializers": "^1.0.0",
"ember-moment": "^7.3.0",
"ember-paper": "^1.0.0-beta.8",
"ember-resolver": "^5.0.0",
"ember-simple-auth": "^1.2.2",
"ember-source": "~3.3.1",
"ember-truth-helpers": "^2.0.0",
"ember-uploader": "^2.0.0",
"graphql-tag": "^2.9.2",
"graphql-tools": "^3.1.1",
"leaflet": "^1.0.3",
"loader.js": "^4.2.3",
"moment-timezone": "^0.5.13",
"sass": "^1.43.4",
"apollo-cache": "^1.3.5",
"ember-cli": "^3.28.3",
"ember-cli-sass": "^10.0.1"
},
"engines": {
"node": ">= 4"
},
"private": true,
"dependencies": {
"#sentry/browser": "^5.5.0",
"#sentry/integrations": "^5.5.0"
}
}

#capacitor-community/electron gives Unhandled Promise Rejection on built package

When I pack my Ionic project with #capacitor-community/electron packager (using electron-builder), I get the following error:
Unhandled Promise Rejection
Error: ENOENT: no such file or directory, open 'D:/Users/.../example/electron/dist/win-unpacked/resources/app-update.yml'
Steps to reproduce the problem:
# create generic ionic example
ionic start example tabs --type angular
cd example
npm i #capacitor-community/electron --save-dev
# required to add electron
ionic build
npx cap add #capacitor-community/electron
cd electron
# runs npm run build && electron-builder build --dir -c ./builder-effective-config.yaml
npm run electron:pack
Here is the package.json of main ./example project:
{
"name": "example",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/common": "~12.1.1",
"#angular/core": "~12.1.1",
"#angular/forms": "~12.1.1",
"#angular/platform-browser": "~12.1.1",
"#angular/platform-browser-dynamic": "~12.1.1",
"#angular/router": "~12.1.1",
"#capacitor-community/electron": "^4.0.3",
"#capacitor/app": "1.0.3",
"#capacitor/core": "3.2.4",
"#capacitor/haptics": "1.1.0",
"#capacitor/keyboard": "1.1.0",
"#capacitor/status-bar": "1.0.3",
"#ionic/angular": "^5.5.2",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~12.1.1",
"#angular-eslint/builder": "~12.0.0",
"#angular-eslint/eslint-plugin": "~12.0.0",
"#angular-eslint/eslint-plugin-template": "~12.0.0",
"#angular-eslint/template-parser": "~12.0.0",
"#angular/cli": "~12.1.1",
"#angular/compiler": "~12.1.1",
"#angular/compiler-cli": "~12.1.1",
"#angular/language-service": "~12.0.1",
"#capacitor/cli": "3.2.4",
"#ionic/angular-toolkit": "^4.0.0",
"#types/jasmine": "~3.6.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"#typescript-eslint/eslint-plugin": "4.16.1",
"#typescript-eslint/parser": "4.16.1",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.2.4"
},
"description": "An Ionic project"
}
Here is package.json of ./example/electron project:
{
"name": "example",
"version": "1.0.0",
"description": "An Amazing Capacitor App",
"author": {
"name": "",
"email": ""
},
"repository": {
"type": "git",
"url": ""
},
"license": "MIT",
"main": "build/src/index.js",
"scripts": {
"build": "tsc && electron-rebuild",
"electron:start-live": "node ./live-runner.js",
"electron:start": "npm run build && electron --inspect=5858 ./",
"electron:pack": "npm run build && electron-builder build --dir -c ./electron-builder.config.json",
"electron:make": "npm run build && electron-builder build -c ./electron-builder.config.json -p always"
},
"dependencies": {
"#capacitor-community/electron": "^4.0.1",
"chokidar": "~3.5.2",
"electron-is-dev": "~2.0.0",
"electron-serve": "~1.1.0",
"electron-unhandled": "~3.0.2",
"electron-updater": "~4.3.9",
"electron-window-state": "~5.0.3"
},
"devDependencies": {
"electron": "~13.1.9",
"electron-builder": "~22.11.7",
"electron-rebuild": "~2.3.5",
"typescript": "~4.3.5"
},
"keywords": [
"capacitor",
"electron"
]
}
And here is electron-builder.config.json file:
{
"appId": "com.yourdoamnin.yourapp",
"directories": {
"buildResources": "resources"
},
"files": [
"assets/**/*",
"build/**/*",
"capacitor.config.*",
"app/**/*"
],
"publish": {
"provider": "github"
},
"nsis": {
"allowElevation": true,
"oneClick": false,
"allowToChangeInstallationDirectory": true
},
"win": {
"target": "nsis",
"icon": "assets/appIcon.ico"
},
"mac": {
"category": "your.app.category.type",
"target": "dmg"
}
}
So, apparently problem lies in default publish method. You need to change your electron-builder.config.json file to the following form (without the comment):
{
"appId": "com.yourdoamnin.yourapp",
"directories": {
"buildResources": "resources"
},
"files": [
"assets/**/*",
"build/**/*",
"capacitor.config.*",
"app/**/*"
],
"publish": {
"provider": "github",
"publishAutoUpdate": false // This is the line you need to add!
},
"extends":null,
"nsis": {},
"win": {
"target": "nsis",
"icon": "assets/appIcon.ico"
}
}