We Keep Coding

Electron - Typescript - Cannot find module

Trying to build my electron app with typescript generated from the electron-quick-start-typescript project. I have added an additional module called auth.ts which is not recognised when I start the app. I am trying to reference it in renderer.ts with
import { myfunction } from './auth'
However I can see that it is getting converted into js. What could be causing this issue? Why can't my application see my new module?
Additionally here is my package.json file if that helps.
{
"name": "electron-quick-start-typescript",
"version": "1.0.0",
"description": "A minimal Electron application written with Typescript",
"scripts": {
"build": "tsc",
"watch": "tsc -w",
"lint": "eslint -c .eslintrc --ext .ts ./src",
"start": "npm run build && electron ./dist/main.js"
},
"repository": "https://github.com/electron/electron-quick-start-typescript",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo",
"typescript"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.33.0",
"#typescript-eslint/parser": "^4.33.0",
"electron": "^16.0.2",
"eslint": "^7.32.0",
"typescript": "^4.5.2"
},
"dependencies": {
"node-fetch": "^2.6.1"
}
}

Found the answer. For anyone else having the same issue this resolved the issue -
Make sure nodeIntegration is enabled in main.js
webPreferences: {
nodeIntegration: true,
preload: path.join(__dirname, "preload.js"),
},
Index.html
replace:
<script src="./dist/renderer.js"></script>
with:
<script>
require("./dist/renderer.js");
</script>

Error importing a package that was forked and edited in a Next.JS project

I'm using react-headroom for this project and needed to edit its code so the <header> wouldn't adjust height for pages. Therefore, I forked the original repo and made the change on my version so I could install it in my project using yarn add <my-git-repo-url> and then normally import it as any other library:
// src/components/layout.js
import { useState } from "react"
import { Box, Flex } from "#chakra-ui/react"
import Footer from "../footer"
import Header from "../header"
import Headroom from "react-headroom" // react-headroom imported here
(...)
However, I'm getting this error telling me that module was not found:
I'm not sure if there's any mistake with this process (I think not) but was unable to fix this. I ran yarn install in both ./ and ./node_modules/react-headroom with no changes at all for this result.
As #novonimo asked, here it is the module's package.json:
{
"name": "react-headroom",
"description": "Hide your header until you need it. React.js port of headroom.js",
"version": "3.2.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"bugs": {
"url": "https://github.com/KyleAMathews/react-headroom/issues"
},
"dependencies": {
"prop-types": "^15.5.8",
"raf": "^3.3.0",
"shallowequal": "^1.1.0"
},
"devDependencies": {
"babel-cli": "^6.16.0",
"babel-core": "^6.17.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-undefined-to-void": "^6.8.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-1": "^6.16.0",
"chai": "^3.5.0",
"eslint": "^3.8.0",
"eslint-config-airbnb": "^12.0.0",
"eslint-config-airbnb-base": "^9.0.0",
"eslint-config-prettier": "^6.13.0",
"eslint-plugin-import": "^2.0.1",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.4.1",
"mocha": "^3.1.2",
"mocha-unfunk-reporter": "^0.4.0",
"pre-commit": "^1.0.5",
"prettier": "2.1.2"
},
"directories": {
"example": "examples"
},
"homepage": "https://github.com/KyleAMathews/react-headroom",
"keywords": [
"headroom",
"react",
"react-component"
],
"license": "MIT",
"main": "dist/index.js",
"peerDependencies": {
"react": "^16.3.0 || ^17"
},
"repository": {
"type": "git",
"url": "https://github.com/KyleAMathews/react-headroom.git"
},
"scripts": {
"build": "babel --copy-files src --out-dir dist",
"test-watch": "NODE_ENV=test node_modules/.bin/mocha -w --recursive --compilers coffee:babel-core/register -R mocha-unfunk-reporter",
"unit-test": "NODE_ENV=test node_modules/.bin/mocha --recursive --compilers coffee:babel-core/register -R mocha-unfunk-reporter",
"test": "npm run unit-test && npm run lint",
"watch": "./node_modules/.bin/webpack-dev-server --hot",
"publish-patch": "npm run build && npm version patch && npm publish; git push; git push --tags",
"lint": "eslint --ignore-path .gitignore src/*",
"lint:fix": "eslint --ignore-path .gitignore . --fix",
"format": "prettier --config .prettierrc --write 'src/**/*.{js,jsx}'"
}
}

You have forgotten to build your forked library with the build command.
So, build it:
npm build
// or
yarn build
Now use it without any issues on your application:
import Headroom from "react-headroom"
Note: you need to run the above command in your forked directory not the root of your project.

getting rid of relative path react (removing "../..")

I have downloaded a react project with the following package.json :
{
"private": true,
"main": "src/index.js",
"dependencies": {
"#material-ui/core": "4.10.0",
"#material-ui/icons": "4.9.1",
"classnames": "2.2.6",
"history": "4.10.1",
"moment": "2.26.0",
"node-sass": "4.14.1",
"nouislider": "14.5.0",
"prop-types": "15.7.2",
"react": "16.13.1",
"react-datetime": "2.16.3",
"react-dom": "16.13.1",
"react-router-dom": "5.2.0",
"react-scripts": "3.4.1",
"react-slick": "0.26.1",
"react-swipeable-views": "0.13.9"
},
"devDependencies": {
"#babel/cli": "7.10.1",
"#babel/plugin-proposal-class-properties": "7.10.1",
"#babel/preset-env": "7.10.1",
"#babel/preset-react": "7.10.1",
"eslint-config-prettier": "6.11.0",
"eslint-plugin-prettier": "3.1.3",
"eslint-plugin-react": "7.20.0",
"gulp": "4.0.2",
"gulp-append-prepend": "1.0.8",
"prettier": "2.0.5"
},
"optionalDependencies": {
"typescript": "3.9.3"
},
"scripts": {
"start": "NODE_PATH=src/ react-scripts start",
"build": "react-scripts build && gulp licenses",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint:check": "eslint . --ext=js,jsx; exit 0",
"lint:fix": "eslint . --ext=js,jsx --fix; exit 0",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
"build-package-css": "node-sass src/assets/scss/material-kit-react.scss dist/material-kit-react.css",
"build-package": "npm run build-package-css && babel src --out-dir dist",
"compile-sass": "node-sass src/assets/scss/material-kit-react.scss src/assets/css/material-kit-react.css",
"minify-sass": "node-sass src/assets/scss/material-kit-react.scss src/assets/css/material-kit-react.min.css --output-style compressed",
"map-sass": "node-sass src/assets/scss/material-kit-react.scss src/assets/css/material-kit-react.css --source-map true"
}
}
I dont know how the developer got rid of relative path in his code.
for example he imports modules like:import Header from "components/Header/Header.js";
although if I try to the same , i should do it like:import header from "../../../src/components/Header/header.js".
the link to the original github:
https://github.com/creativetimofficial/material-kit-react/
i have downloaded and installed this one , it works fine.
but when i try to copy some of the codes,it doesnt work.

use the jsconfig.json to set absolute path instead of reletive , as described in documentation
in the provided project he used
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"*": ["src/*"]
}
}
}
so he could accees all files using a absolute path , in all folder and subfolders of the project like
import file from "component/file/file.js"

In the root directory of your project, create a jsconfig.json file and save this;
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"],
"exclude": ["node_modules"]
}
If you are using eslint in your project, you'll need to add this in your .eslintrc.js file;
...
settings: {
'import/resolver': {
node: {
paths: ['src'],
},
},
},
...
You should be able to import files by their absolute path now.

Error: Cloud function needs to be called with an event parameter. Firebase console error,

I've upgraded firebase node version from 6 to 8 also firebase-functions, typescript version as well as firebase-admin upgraded.
But I'm getting this error on few triggers.
Error: Cloud function needs to be called with an event parameter.If >you are writing unit tests, please use the Node module firebase-?>functions-fake.
at Object. (/srv/node_modules/firebase->functions/lib/cloud-functions.js:84:19)
exports.userFollowingChanged = functions.firestore
.document("Db1/{domainName}/Users/{byUser}/toIds/{toId}")
.onWrite((change, context) => {
return wasTriggered(context.eventId, 'userFollowingChanged').then(() => {
return userFollowingChanged(change, context)
});
});
my package.json is as follows
{
"name": "functions",
"scripts": {
"lint": "tslint --project tsconfig.json",
"build": "tsc --skipLibCheck",
"serve": "npm run build && firebase serve --only functions",
"shell": "npm run build && firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"main": "lib/index.js",
"dependencies": {
"#firebase/database": "0.1.9",
"cors": "^2.8.4",
"elasticsearch": "^15.1.1",
"firebase-admin": "~5.13.0",
"firebase-functions": "^2.0.0",
"moment": "^2.20.1",
"nodemailer": "^4.6.0",
"request": "^2.83.0",
"request-promise": "^4.2.2",
"stripe": "^5.5.0",
"twilio": "^3.12.0",
"twitter": "^1.7.1"
},
"devDependencies": {
"tslint": "^5.8.0",
"typescript": "^3.1.3"
},
"private": true,
"engines": {
"node": "8"
}
}
Can some one explain me what wrong with this trigger?
It was working well in node :6
I saw the same questions in stack overflow, regarding version issues.

upgrade firebase-functions .

Clean package.json before packing

Let's say you have a npm project with the following package.json:
{
"name": "XXX",
"version": "YYY",
"license": "ZZZ",
"scripts": {
"scriptA": "...",
"scriptB": "...",
"preinstall": "...",
"postinstall": "..."
},
"devDependencies": {
"depA": "vA",
"depB": "vB"
},
"dependencies": {
"depC": "vC",
"depD": "vD"
}
}
When packing/publishing your package, you don't need the scripts or devDependencies keys. But more dangerously, the preinstall and postinstall scripts could trigger weird/unwanted actions when people install your package as a dependency.
So how do you clean your package.json, ie remove the keys that you don't need?
I'm currently using npm 3.10. If I use the npm pack command, according to the npm documentation it will simply pack the current package if no arguments are provided (therefore taking the raw package.json from disk) and there is no options I can provide to clean it up.
I can of course write my own scripts that would zip the package and generate my own package.json. Is it the way to go?

I have created clean-package to do this.
The most simple usage is just three steps:
npm install clean-package --save-dev
Hook clean-package into the prepack and postpack scripts
"scripts": {
"prepack": "clean-package",
"postpack": "clean-package restore"
}
Configure clean-package as root property in your package.json
"clean-package": {
"remove": [
"script",
"devDependencies",
"preinstall",
"postinstall",
]
}
There are many more options and extended uses, so there is more information on the repo: https://github.com/roydukkey/clean-package.

Using npm itself, this does not seem possible. As of npm 3.10, npm publish or npm pack will indeed just include a pure copy of your package.json in your tgz.
The solution is therefore to generate its own packaged file to have full control over the included package.json.
Basic example
Note: this is using the shell and synchronous method from npm fs
const fs = require('fs');
const os = require('os');
const shell = require('shelljs');
const targz = require('tar.gz');
// create temp directory
const tempDirectory = fs.mkdtempSync(`${os.tmpdir()}/your-project-tarball-`);
const packageDirectory = `${tempDirectory}/package`;
// create subfolder package
fs.mkdirSync(packageDirectory);
// read existing package.json
const packageJSON = require('./package.json');
// copy all necessary files
// https://docs.npmjs.com/files/package.json#files
shell.cp('-R', packageJSON.files, packageDirectory);
shell.cp('-R', ['README.md', 'CHANGELOG.md', 'LICENSE'], packageDirectory);
// create your own package.json or modify it here
Reflect.deleteProperty(packageJSON, 'scripts');
fs.writeFileSync(`${packageDirectory}/package.json`, JSON.stringify(packageJSON, null, 2));
// create tgz and put it in dist folder
targz().compress(packageDirectory, 'your-package.tgz');
Real life example with Lodash
This is for example what the lodash lib does in version 4.17.2. Their original package.json looks like (cf https://github.com/lodash/lodash/blob/4.17.2/package.json):
{
"name": "lodash",
"version": "4.17.2",
"license": "MIT",
"private": true,
"main": "lodash.js",
"engines": { "node": ">=4.0.0" },
"scripts": {
"build": "npm run build:main && npm run build:fp",
"build:fp": "node lib/fp/build-dist.js",
"build:fp-modules": "node lib/fp/build-modules.js",
"build:main": "node lib/main/build-dist.js",
"build:main-modules": "node lib/main/build-modules.js",
"doc": "node lib/main/build-doc github && npm run test:doc",
"doc:fp": "node lib/fp/build-doc",
"doc:site": "node lib/main/build-doc site",
"doc:sitehtml": "optional-dev-dependency marky-markdown#^9.0.1 && npm run doc:site && node lib/main/build-site",
"pretest": "npm run build",
"style": "npm run style:main && npm run style:fp && npm run style:perf && npm run style:test",
"style:fp": "jscs fp/*.js lib/**/*.js",
"style:main": "jscs lodash.js",
"style:perf": "jscs perf/*.js perf/**/*.js",
"style:test": "jscs test/*.js test/**/*.js",
"test": "npm run test:main && npm run test:fp",
"test:doc": "markdown-doctest doc/*.md",
"test:fp": "node test/test-fp",
"test:main": "node test/test",
"validate": "npm run style && npm run test"
},
"devDependencies": {
"async": "^2.1.2",
"benchmark": "^2.1.2",
"chalk": "^1.1.3",
"cheerio": "^0.22.0",
"codecov.io": "~0.1.6",
"coveralls": "^2.11.15",
"curl-amd": "~0.8.12",
"docdown": "~0.7.1",
"dojo": "^1.11.2",
"ecstatic": "^2.1.0",
"fs-extra": "~1.0.0",
"glob": "^7.1.1",
"istanbul": "0.4.5",
"jquery": "^3.1.1",
"jscs": "^3.0.7",
"lodash": "4.17.1",
"lodash-doc-globals": "^0.1.1",
"markdown-doctest": "^0.9.0",
"optional-dev-dependency": "^2.0.0",
"platform": "^1.3.3",
"qunit-extras": "^3.0.0",
"qunitjs": "^2.0.1",
"request": "^2.78.0",
"requirejs": "^2.3.2",
"sauce-tunnel": "^2.5.0",
"uglify-js": "2.7.4",
"webpack": "^1.13.3"
},
"greenkeeper": {
"ignore": [
"lodash"
]
}
}
But the published package.json looks like (cf https://unpkg.com/lodash#4.17.2/package.json)
{
"name": "lodash",
"version": "4.17.2",
"description": "Lodash modular utilities.",
"keywords": "modules, stdlib, util",
"homepage": "https://lodash.com/",
"repository": "lodash/lodash",
"icon": "https://lodash.com/icon.svg",
"license": "MIT",
"main": "lodash.js",
"author": "John-David Dalton <john.david.dalton#gmail.com> (http://allyoucanleet.com/)",
"contributors": [
"John-David Dalton <john.david.dalton#gmail.com> (http://allyoucanleet.com/)",
"Mathias Bynens <mathias#qiwi.be> (https://mathiasbynens.be/)"
],
"scripts": { "test": "echo \"See https://travis-ci.org/lodash/lodash-cli for testing details.\"" }
}
where you can see the scripts and devDependencies keys for example are not there anymore. This is done using a JavaScript Template package.jst as long as a nodejs script Lodash CLI