"Error: Unable to locate module - 'electron-is-dev'" in my web development project using electron, typescript, and webpack

I'm currently working on a project using Electron, Typescript, and webpack. I am planning to integrate react.js into the project.

However, when I ran "npx webpack" in the terminal, I encountered an error message.

The error stated that the "electron-is-dev" module could not be found, even though I had already installed it.

 ERROR in ./src/main/window.ts
    Module not found: Error: Can't resolve 'electron-is-dev' in 'project-path/src/main'
     @ ./src/main/window.ts 2:0-36 12:35-40
     @ ./src/main/app.ts

I have been unable to find a solution to this issue.

window.ts

import { app, BrowserWindow } from 'electron';
import isDev from 'electron-is-dev';

(...)

webpack.config.js

const path = require('path');

module.exports = [
    {
        target: 'electron-main',
        entry: path.join(__dirname, 'src/main/app.ts'),
        mode: 'development',
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    include: path.join(__dirname, 'src/main'),
                    use: 'ts-loader',
                    exclude: [
                        /node_modules/,
                        path.join(__dirname, 'src/renderer')
                    ]
                }
            ]
        },
        output: {
            path: path.join(__dirname, 'build'),
            filename: 'electron.js'
        },
        resolve: {
            extensions: ['.tsx', '.ts', 'js']
        },
        node: {
            __dirname: false
        }
    }
];

package.json:

{
    "name": "electron-react-typescript",
    "version": "0.0.1",
    "description": "",
    "main": "build/electron.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@types/electron-devtools-installer": "^2.2.0",
        "@types/react": "^16.9.19",
        "@types/react-dom": "^16.9.5",
        "@typescript-eslint/eslint-plugin": "2.x",
        "@typescript-eslint/parser": "2.x",
        "babel-eslint": "10.x",
        (...)
    },
    "dependencies": {
        "electron-devtools-installer": "^2.2.4",
        "electron-is-dev": "^1.1.0",
        "react": "^16.12.0",
        "react-dom": "^16.12.0"
    }
}

Additionally, I am utilizing eslint and prettier in my development workflow.

Answer №1

One day, as I was working on a project, I came across my webpack.config.js file from a previous project. Feeling lazy to create a new one from scratch, I decided to simply copy and edit it. Surprisingly, everything worked perfectly! Curious about why they both functioned the same way, I compared the two files and spotted a minuscule mistake.

(...)
resolve: {
    extensions: ['.ts', 'js', '.tsx']
},
(...)

Turns out, instead of writing ['.ts', 'js', '.tsx'], I mistakenly typed ['.ts', '.js', 'tsx']. This small error arose simply because I forgot to include a dot before 'js'.

Answer №2

Dealing with a similar problem, I discovered that the root cause was having electron-is-dev listed as a development dependency.

After removing it and re-adding it as a standard dependency, the issue appeared to be resolved.

Although this thread may be outdated, I wanted to contribute my solution for anyone encountering the same issue.

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

The TSX file is encountering difficulty rendering an imported React Component

Upon attempting to import the Day component into the Week component (both .tsx files), an error is thrown: Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. ...

Custom Joi middleware in Express v4 is failing to pass the Request, Response, and Next objects

I am currently in the process of developing a unique middleware function to work with Joi that will be placed on my routes for validating a Joi schema. In the past, I have created middlewares for JWT validation without passing any parameters, and they wor ...

Webpack, Gulp, and Express are encountering an issue: File or directory does not exist

I'm currently working on a project that involves a file upload form, an express router, and jade/pug template rendering for two different views. To streamline my workflow, I am using webpack to compile all my javascript files into one file named back ...

Tips for building an effective delete function in Angular for eliminating a single record from a table

I've been working on creating a method to delete an employee by their ID, and I've tried various approaches in my VS Code. Unfortunately, all of them have resulted in errors except for this specific method. Whenever I click on the delete button, ...

Creating a custom `onSubmit` function with Formik, TypeScript, and hooks can be a powerful way

I'm currently creating form onSubmit functions utilizing the useCallback hooks specifically designed for use with the formik library. A sample structure of my component using formik would be as follows: import { useContactForm } from './useCon ...

How can you update the property values of a CSS class that already exists in an Angular2+ controller?

In my styles.css file, I have a CSS class called '.users' with a property of color. Now, I am looking to dynamically change the color property value of the 'users' class based on certain conditions in my controller. For instance, I want ...

Show the key and value of a JSON object in a React component

When attempting to parse a JSON data file, I encountered an error message stating: "Element implicitly has an 'any' type because expression of type 'string' can't be used to the index type." The JSON data is sourced locally from a ...

How can a particular route parameter in Vue3 with Typescript be used to retrieve an array of strings?

Encountered a build error: src/views/IndividualProgramView.vue:18:63 - error TS2345: Argument of type 'string | string[]' is not assignable to parameter of type 'string'. Type 'string[]' is not assignable to type 'strin ...

Combining Interfaces in Typescript: Utilizing Union Types with a Base and Extended Interface

I'm facing an issue with the following code snippet interface BaseA { a: number; } interface SpecialA extends BaseA { b: number; } type A = BaseA | SpecialA const a = { a: 5, b: 5 } as A console.log(a.b) Even though I thought the code was ...

The dynamic import() syntax is not compatible with the target environment, preventing the use of external type 'module' in a script

I am currently facing an issue with my React app. The command npm start is working as expected, but when I try to run npm run build, it keeps failing. It's crucial for me to run npm run build in order to deploy the app on a website. I have already sp ...

No issues raised by Typescript/tslint regarding this in arrow function

After making some creative adjustments, this is what I came up with: const TopBar = () => ( <Button onPress={this.onPress} // No errors shown /> ) Although all my other rules in tslint.json are functioning properly. Is there a way to ma ...

Dynamic user input using an enumeration

I am looking to develop a flexible input component (in React) that can dynamically generate different types of inputs based on the enum type provided along with relevant inputProps. The idea is to switch between different input components based on the type ...

ERROR: React Server-Side Rendering - 'document' is Undefined

I'm struggling to implement server-side rendering with React. I keep encountering ^ ReferenceError: document is not defined var root = document.getElementById('root'); I understand that the issue lies in Node not recognizing th ...

Unleashing the Power of Typescript and SolidJS: Expanding the Properties of JSX Elements

Is there a way to enhance the props of an existing JSX element in SolidJS and craft a custom interface similar to the ButtonProps interface shown in this React example below? import Solid from 'solid-js'; interface ButtonProps extends Solid.Butt ...

Tips for mocking a module with a slash character in its name?

When it comes to mocking a standard npm project, the process is simple. Just create a __mocks__ folder next to the node_modules folder, then name the file after the package and insert the mock contents. For example: /__mocks__/axios.ts However, I encount ...

The custom validation in nestjs is throwing an error due to an undefined entity manager

I've been working on developing a custom validation for ensuring unique values in all tables, but I encountered this error: ERROR [ExceptionsHandler] Cannot read properties of undefined (reading 'getRepository') TypeError: Cannot read proper ...

Having trouble accessing store state in Angular with NGXS

In the parent component, I am dispatching an action and hoping to receive the dispatched array in the child component. To achieve this, I have implemented the following code: export class ListComponent implements OnInit { @Select(ProductState.getProductD ...

Button for saving content located in expo-router header

I am a beginner in react native and I am attempting to connect a save button in a modal header using expo-router. I have managed to make the button work within the modal itself, but I would like it to be located in the header set by expo-router. It doesn&a ...

What could be causing the cyclic dependency problem after upgrading to Angular 9?

I am experiencing an issue with a specific file containing the following code: import { Injectable } from '@angular/core'; import { I18n } from '@ngx-translate/i18n-polyfill'; import { isNumber } from 'lodash'; import { Confir ...

Encountering an Uncaught TypeError when attempting to set properties of null with useRef

I've been working on an app that requires access to the user's device camera in order to display live video on the screen. I've managed to achieve this by utilizing a video HTML Object and setting the media stream as its srcObject. Everythin ...