Module Not Found Error: Electron and Typescript Collaboration

I am currently facing an issue while attempting to build my electron application using typescript generated from the electron-quick-start-typescript project. I have included an additional module named auth.ts, but unfortunately, it is not being recognized when I launch the application. In an effort to reference it in renderer.ts, I have used the following code snippet:

import { myfunction } from './auth'

https://i.sstatic.net/3LRa0.png

Despite noticing that it is being converted into js, my application seems unable to detect the new module. What could possibly be causing this issue? Why is my application unable to locate the new module?

https://i.sstatic.net/WGZXY.png

Furthermore, here is a glimpse of my package.json file which may provide some insight.

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

Answer №1

Solution Found: If you are encountering the same issue, make sure to follow these steps -

Verify that nodeIntegration is enabled in your main.js file

webPreferences: {
      nodeIntegration: true,
      preload: path.join(__dirname, "preload.js"),
    },

In your Index.html file

replace:

<script src="./dist/renderer.js"></script>

with:

<script>
    require("./dist/renderer.js");
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using RxJs in an Angular 2 application to enable row selection in a table by detecting mouse movements

Check out this example of an Angular 2 application with row selection in a table: https://plnkr.co/edit/HdQnWqbg9HloWb4eYGHz. The row selection functionality is implemented using mouse event handlers (mousedown, mousemove, mouseup). Below is the template ...

Prevent anchor jumping caused by popstate event in Safari

This situation is really testing my patience. When navigating within the same page using anchors, the browser automatically takes you back/forward to the location of that link in your history when popstate is triggered. One might think that you could prev ...

Synchronization issue between Material UI SelectField component and state is observed in React/Redux setup

My issue involves the LayoutSelector component which contains a drop-down form that updates the state.plate.layout. The state is passed as a prop to the component. On my local machine, the selected menu item accurately reflects the state changes - when a n ...

What is the syntax for passing a generic type to an anonymous function in a TypeScript TSX file?

The issue lies with the function below, which is causing a failure within a .tsx file: export const enhanceComponent = <T>(Component: React.ComponentType<T>) => (props: any) => ( <customContext.Consumer> {addCustomData => ...

Perform subtraction operation between two arrays of objects in Javascript

Hey there, I could use some guidance on the best method for subtracting values between two arrays of objects. In my scenario (backend), I retrieve data on Products from mongodb, and I also fetch Trolley data from MySql. What I'm attempting to achieve ...

What could be causing my ES6 code to fail compilation post npm install?

Check out my npm module built with es6 on Github here. Within the package.json file, there are scripts designed to ensure proper building of the es6 modules. When using npm publish and npm install within the module's directory, everything works fine. ...

How to choose a javascript drop down using selenium?

Here is the HTML code for a JavaScript drop-down menu that contains various options, including "All Resumes". I am attempting to select this option using Selenium WebDriver: <div id="resume_freshness_container"> <div class="dropdown_small_wrapper ...

Incorporating an Ionic application into a Rails 4 application

Seeking guidance on integrating an Ionic 2/3 app with a complex Rails 4 app. What would be the optimal approach for this task? How can I seamlessly add an API to an already intricate application? ...

React - modifying parent's Redux property

After connecting my Container to redux using the following: const mapStateToProps = ({ MyReducer }) => ({ myProp: MyReducer.myProp }); I am wondering if it is possible to manually set the value of myProp from the parent component (bypassing redux) ...

Is it necessary to include a back button when navigating through paginated tables?

Within my AngularJS application, I have implemented pagination on the user list page. This allows me to retrieve ten users at a time from the server, with each click loading another set of ten users on a new page. The user details are presented in a tabl ...

Is there a glitch in my redux-saga?

After developing a React Native app, I encountered an issue with my index.ios.js file where I was adding middlewares to the store. import React, { Component } from 'react' import { AppRegistry, } from 'react-native' import { Provider ...

Learn how to effectively share an image using the Math.random function

Is there a way to display a random number of images on a webpage using JavaScript? Let's say we want to show X number of images, where X is a randomly generated number. For the sake of this example, let's set X to be 10. <input class="randomb ...

Navigating the world of streams in JavaScript

Is there a way to manipulate arrays in JavaScript in a similar manner to Java Streams? For example: arr.map().map().map() Currently, this would only perform a single iteration. How can I accomplish this without using a library? ...

Tips for efficiently delivering the create-react-app index file from your server

I have encountered a challenge in my development work with create-react-app. I am looking to serve the index.html file from the backend initially, but I am facing difficulties in achieving this goal. The main reason behind this desire is to customize the ...

The color of the letters from the user textbox input changes every second

My task is to create a page where the user enters text into a textbox. When the user clicks the enter button, the text appears below the textbox and each letter changes color every second. I am struggling with referencing this jQuery function $(function() ...

Why do static files in Node.js + Express.js on Windows take up to two minutes to load?

I'm encountering an issue in my Windows environment with Node.Js/Express.js where static JS files can sometimes be labeled as 'pending' in the browser (even with caching disabled) for up to two minutes before finally downloading successfully ...

Attempting to achieve a carousel animation using jQuery

Upon loading the page, only one character out of four is displayed. Two arrows are provided - one on the left and one on the right. Clicking on the left arrow causes the current character to fade out and the previous character to fade in. Clicking on the r ...

Revamp the design of the Google image layout

I am trying to replicate the layout of a Google search results page. My goal is to have a full-width div appear on screen when an image is clicked, with a small triangle at the bottom of the clicked image. I attempted to place the img inside another div, ...

"Uh-oh, looks like my computer is having trouble locating those scripts - I

I am in the process of creating a small website and have listed my script references below. <!doctype html> <html class="no-js" lang="en" ng-app="App"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device- ...

NextJS: encountered an error with fallback enabled

I have my NextJS setup on Vercel and here is how I configured getStaticPaths: const paths = posts.map((post) => ({ params: { player: post.player, id: post.id }, })) return { paths, fallback: true } However, when I set the fallback to true, I ...