We Keep Coding

How to run nodejs with es6 syntax

I am trying to run node.js project. I added "type":"module" in my package.json, it worked for import syntax. Next, I initialised my app with .babelrc. It seems to work but, I am expected to add .js extension at the end of my import statements. How can I avoid adding .js extension in import statements? Below is the error that I get when I run npm run dev:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/nabeel.77.dev/Desktop/chat/graphql/resolvers' imported from /Users/nabeel.77.dev/Desktop/chat/server.js
Did you mean to import ../graphql/resolvers.js?
at new NodeError (node:internal/errors:387:5)
at finalizeResolution (node:internal/modules/esm/resolve:404:11)
at moduleResolve (node:internal/modules/esm/resolve:965:10)
at defaultResolve (node:internal/modules/esm/resolve:1173:11)
at nextResolve (node:internal/modules/esm/loader:173:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:852:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:439:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
at link (node:internal/modules/esm/module_job:75:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
Node.js v18.7.0
[nodemon] app crashed - waiting for file changes before starting...
my Package.json
{
"type": "module",
"dependencies": {
"apollo-server": "^3.10.0",
"esm": "^3.2.25",
"graphql": "^16.5.0",
"mysql2": "^2.3.3",
"sequelize": "^6.21.3"
},
"scripts": {
"dev": "nodemon server.js --exec babel-node",
"start": "node server.js"
},
"name": "chat",
"version": "1.0.0",
"main": "server.js",
"devDependencies": {
"#babel/cli": "^7.1.2",
"#babel/core": "^7.1.2",
"#babel/node": "^7.0.0",
"#babel/polyfill": "^7.0.0",
"#babel/preset-env": "^7.1.0",
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"nodemon": "^2.0.19",
"rimraf": "^3.0.2"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
Node version: 18.7.0

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>

#parcel/core: Failed to resolve 'index.html' Getting this error

My package.json file
{
"name": "aiky",
"version": "1.0.0",
"description": "Recipe application",
"default": "index.html",
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html --dist-dir ./dist"
},
"author": "Akash Kesharwani",
"license": "ISC",
"devDependencies": {
"#parcel/resolver-glob": "^2.0.0-rc.0",
"#parcel/transformer-image": "^2.0.0-rc.0",
"#parcel/transformer-sass": "^2.0.0-rc.0",
"parcel": "^2.0.0-rc.0",
"sass": "^1.26.10"
},
"dependencies": {
"core-js": "^3.6.5",
"fractional": "^1.0.0",
"regenerator-runtime": "^0.13.7"
},
"main": "index.js"
}
I can't find the solution over the internet.
Before this, I was getting this error
#parcel/core: Failed to resolve 'src/img/test-1.jpg' from './index.html'
#parcel/resolver-default: Cannot load file './src/img/test-1.jpg' in './'.
So, I installed #parcel/resolver-glob and also added .parcelrc in root with this text
{
"extends": "#parcel/config-default",
"resolvers": ["#parcel/resolver-glob"]
}

It's not very obvious from the Parcel documentation, but you will need to include the default resolvers by adding the literal string "..." to the resolvers array.
The "..." syntax can be used to extend the default resolvers. This allows you to override the resolution for certain dependencies, but fall back to the default for others. Generally, you'll want to add your custom resolvers before running the default ones.
{
"extends": "#parcel/config-default",
"resolvers": ["#parcel/resolver-glob", "..."]
^^^^^
}

"CDK deploy" doesn't start

Hi everyone I'm pretty new in AWS CDK and wanted to create a simple app (javaScript) with AWS developer guide :
https://docs.aws.amazon.com/cdk/latest/guide/hello_world.html
it seems like everything is work fine but when I'm trying to run "cdk deploy" command the deploy is not even starting and is stack in this stage:
does somebody know what I'm doing wrong or how to get the actual error?

using -vvv and --debug options will help you identify the potential issues.

For me, I had to go into my package.json file and remove the bin node. So I changed this...
{
"name": "cdk",
"version": "0.1.0",
"bin": {
"cdk": "bin/cdk.js"
},
"scripts": {
"build": "tsc && npx cdk synth",
"watch": "tsc -w",
"cdk": "cdk"
},
"devDependencies": {
"#types/node": "10.17.27",
"#types/prettier": "2.6.0",
"aws-cdk": "2.55.1",
"ts-node": "^10.9.1",
"typescript": "~3.9.7"
},
"dependencies": {
"aws-cdk-lib": "2.55.1",
"constructs": "^10.0.0",
"source-map-support": "^0.5.21"
}
}
To this...
{
"name": "cdk",
"version": "0.1.0",
"scripts": {
"build": "tsc && npx cdk synth",
"watch": "tsc -w",
"cdk": "cdk"
},
"devDependencies": {
"#types/node": "10.17.27",
"#types/prettier": "2.6.0",
"aws-cdk": "2.55.1",
"ts-node": "^10.9.1",
"typescript": "~3.9.7"
},
"dependencies": {
"aws-cdk-lib": "2.55.1",
"constructs": "^10.0.0",
"source-map-support": "^0.5.21"
}
}

Electron react build not launching

I'm having some issues while trying to glue together this two things.
Let me give you some context: I'm trying to build a desktop application based on a web application that I've developed in react and it's fully operative and the build process of react is done without any errors nor issues. The problem comes when I try to glue Electron + a React Built Project.
I'm having the following structure:
/ dist
/ node_modules
/ react-mobx-router
/ build
/ static
/ js
main.05ef4655.js
/ css
main.9d8efafe.css
index.html
index.js
At the index.js i have the following code that's basically the sample boilerplate code from electron demo app:
'use strict';
const electron = require('electron');
const app = electron.app;
// adds debug features like hotkeys for triggering dev tools and reload
require('electron-debug')();
// prevent window being garbage collected
let mainWindow;
function onClosed() {
// dereference the window
// for multiple windows store them in an array
mainWindow = null;
}
function createMainWindow() {
const win = new electron.BrowserWindow({
width: 1280,
height: 720,
minWidth: 1280,
minHeight: 720
});
win.loadURL(`file://${__dirname}/react-mobx-router/build/index.html`);
//win.loadURL(`http://localhost:3000`);
win.on('closed', onClosed);
return win;
}
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (!mainWindow) {
mainWindow = createMainWindow();
}
});
app.on('ready', () => {
mainWindow = createMainWindow();
});
I also have to manually change some paths at the react built index.html so it will look like:
<link href="./static/css/main.9d8efafe.css" rel="stylesheet">
instead of:
<link href="/static/css/main.9d8efafe.css" rel="stylesheet">
The second one get's the following errors:
file:///D:/static/css/main.9d8efafe.css Failed to load resource: net::ERR_FILE_NOT_FOUND
main.05ef4655.js Failed to load resource: net::ERR_FILE_NOT_FOUND
The point is that, when I launch the Electron app with yarn start (changing the paths I've told you previously) it launches without any error nor issue but only a blank screen, if I go to the files and look for them, they are correct and the code is inside, bundled and all that react-create-app stuff does.
This is the default configuration of the package.json that comes with Electron and I haven't modified:
{
"name": "app",
"productName": "App",
"version": "0.0.0",
"description": "",
"license": "MIT",
"repository": "user/repo",
"author": {
"name": "",
"email": "",
"url": ""
},
"scripts": {
"test": "xo",
"start": "electron .",
"build": "electron-packager . --out=dist --asar --overwrite --all"
},
"files": [
"index.js",
"index.html",
"index.css"
],
"keywords": [
"electron-app",
"electron"
],
"dependencies": {
"electron-debug": "^1.0.0"
},
"devDependencies": {
"devtron": "^1.1.0",
"electron-packager": "^8.0.0",
"electron": "^1.0.1",
"xo": "^0.16.0"
},
"xo": {
"esnext": true,
"envs": [
"node",
"browser"
]
}
}
Also this is the package.json of my React Project:
{
"name": "react-mobx",
"version": "0.1.0",
"private": true,
"devDependencies": {
"custom-react-scripts": "0.0.23",
"mobx-react-devtools": "^4.2.11"
},
"dependencies": {
"mobx": "^3.1.4",
"mobx-react": "^4.1.2",
"mobx-react-router": "latest",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Note that the React App is fully functional if I don't make use of Electron.
That's why I ask for your wisdom, mates. I need some light here so I can keep moving on with this project. Hope you can help me with this issue and I've provided you with enough information. If you need more info, just let me know.
Warm regards,
Alex.

I'm no React hero (by a long chalk) but I am able to run, hot reload and release build using the schema set out by this boilerplate: electron-es6-react. I added some conditional code to main.js (below) for builds. There are no doubt much better solutions.
You definitely need to merge your React package.json with Electron's.
var isDev = process.env.APP_DEV ? (process.env.APP_DEV.trim() == "true") : false;
if (isDev) {
// only add this during development
require('electron-reload')(__dirname, {
electron: path.join(__dirname, 'node_modules', '.bin', 'electron')
});
}
package.json
{
"name": "electron-es6-react",
"version": "0.1.0",
"description": "template",
"license": "MIT",
"production": false,
"version-string": {
"CompanyName": "Cool Co.",
"FileDescription": "template",
"OriginalFilename": "template",
"ProductName": "template",
"InternalName": "template"
},
"main": "main.js",
"scripts": {
"start": "APP_DEV=true electron -r babel-register .",
"package-mac": "electron-packager . --overwrite --tmpdir=false --platform=darwin --arch=x64 --prune=true --out=release-builds",
"package-win": "electron-packager . --overwrite --tmpdir=false --asar=true --platform=win32 --arch=ia32 --prune=true --out=release-builds"
},
"dependencies": {
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-register": "^6.3.13",
"fs-jetpack": "^0.12.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-images": "^0.5.2"
},
"devDependencies": {
"electron": "^1.4.3",
"electron-packager": "^8.5.2",
"electron-reload": "^1.1.0"
}
}