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>

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.

How do I connect React component to cucumber.js?

I want to run React in Cucumberjs
I have made a Word class where I connected the App compnent
import { setWorldConstructor } from 'cucumber'
import {render } from '#testing-library/react'
import React from 'react'
import App from '../../App'
class AppWorld {
constructor () {
let {queryByText,queryByLabelText,queryByTestId} = render(<App/>)
this._queryByText = queryByText
this._queryByLabelText = queryByLabelText
this._gueryByTestId = queryByTestId
}
getQueryByText() {
return this._queryByText
}
getQueryByLabelText() {
return this._queryByLableText
}
getQueryByTestId() {
return this._queryByTestId
}
}
setWorldConstructor(AppWorld);
I also made a config file cucumber js
module.exports = {
default: [
'src/features/**/*.feature',
'--require ./features/worlds/AppWorld.js',
'--require ./features/support/index.js',
'--require src/features/**/*.js',
'--require-module #babel/register'
].join(' '),
};
> The package.json is
"name": "todofrontenf",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/preset-env": "^7.11.0",
"#babel/preset-react": "^7.10.4",
"bootstrap": "^4.5.0",
"dotenv": "^8.2.0",
"jest-fetch-mock": "^3.0.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.1",
"use-react-router": "^1.0.7",
"winston": "^3.3.3",
"winston-elasticsearch": "^0.7.12"
},
"scripts": {
"start:devsource": "DOTENV_CONFIG_BACKEND_URL=http://localhost:8080 node -r dotenv/config ./node_modules/react-scripts/bin/react-scripts.js start",
"start:devbuild": "PORT=9000 node -r dotenv/config server.js dotenv_config_path=.env.dev",
"prestart": "npm build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"cucumber": "./node_modules/.bin/cucumber-js src/features/**/*.feature --require=src/features/**/*.js --require-module #babel/register",
"test:build": "node -r dotenv/config ./node_modules/react-scripts/bin/react-scripts.js test ./src dotenv_config_path=.env.build",
"test:dev": "node -r dotenv/config ./node_modules/react-scripts/bin/react-scripts.js test ./src dotenv_config_path=.env.dev",
"test:test": "node -r dotenv/config ./node_modules/react-scripts/bin/react-scripts.js test ./src dotenv_config_path=.env.test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/register": "^7.10.5",
"#reportportal/agent-js-jest": "^5.0.1",
"#testing-library/jest-dom": "^5.11.0",
"#testing-library/react": "^10.4.6",
"cucumber": "^6.0.5",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"jest-sonar-reporter": "^2.0.0"
}
}
I recive following message when I execute the npm run cucumber
Steins-MacBook-Air:todofrontend steinkorsveien$ npm run cucumber
> todofrontenf#0.1.0 cucumber /Users/steinkorsveien/Development/todo/todofrontend
> cucumber-js src/features/**/*.feature --require=src/features/**/*.js --require-module #babel/register
ReferenceError: document is not defined
at render (/Users/steinkorsveien/Development/todo/todofrontend/node_modules/#testing-library/react/dist/pure.js:82:5)
at new AppWorld (/Users/steinkorsveien/Development/todo/todofrontend/src/features/worlds/AppWorld.js:11:60)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! todofrontenf#0.1.0 cucumber: `cucumber-js src/features/**/*.feature --require=src/features/**/*.js --require-module #babel/register`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the todofrontenf#0.1.0 cucumber 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:
How should I configure Cucumberjs to test React?

You need to register JSDOM so that #testing-library/react has a DOM to render the component to.
Firstly
npm install jsdom-global
Then, add this to your cucumber.js file
--require-module jsdom-global/register

Javascript systemJS Error Cannot find module

I have a little not project where I have installed systemJS.
Here is package.json:
{
"name": "mytest",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4",
"systemjs": "^0.20.13"
},
"devDependencies": {
"react-scripts": "1.0.7"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
In app.js I have done this:
import React, { Component } from 'react';
import './App.css';
var SystemJS = require('systemjs');
When I run the project it's giving me this error:
Error: Cannot find module "."
I'm following the instructions here:
https://github.com/systemjs/systemjs
This part:
var SystemJS = require('systemjs');
// loads './app.js' from the current directory
SystemJS.import('./app.js').then(function (m) {
console.log(m);
});
What I'm I doing wrong?

Your problems could be due to the fact that you have missed to configure systemjs - that is instruct it where to look for modules to load.
For example the configuration can look something like this:
System.config({
baseURL: './lib',
// Set paths your modules
paths: {
'angular': 'mode_modules/angular/angular.js',
'angular-route': 'node_modules/angular-route/angular-route.js'
}
});
If you would like to skip the tedious configuration part - you might want to look at JSMP - it takes care of configuration part automatically.

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"
}
}