Here is a unique rewrite of the text: "Converting to TypeScript: Add the Node Modules Path to the global paths array in the 'module' module using

Utilizing vue ui, I initiated a vue project with typescript and subsequently integrated electron, iview, and less...

After addressing the lexical issues in the *.ts files, running the vue-cli-service serve task in vue ui yielded the following output:

Total task duration: 1191.84s
$ vue-cli-service serve --mode development --dashboard
 INFO  Starting development server...

Starting type checking and linting service...

 12% building modules 23/53 modules 30 active ...ode_modules/core-js/modules/_perform.jsUsing 1 worker with 2048MB memory limit

 85% chunk order optimization OccurrenceOrderChunkIdsPlugin ERROR  Failed to compile with 1 errors11:31:30 PM


 error  in ./src/iview-variables.less

Module build failed (from ./node_modules/less-loader/dist/cjs.js):


// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
  in /Users/ailete619/landema_electron/node_modules/iview/src/styles/color/bezierEasing.less (line 110, column 0)

 @ ./src/iview-variables.less 4:14-226 14:3-18:5 15:22-234
 @ ./src/plugins/iview.js
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.179.4:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

Type checking and linting in progress...

 WARN
Couldn't parse bundle asset  "/Users/ailete619/landema_electron/dist/about.js".
Analyzer will use module sizes from stats file.


WARNING in /Users/ailete619/landema_electron/src/background.ts
13:3 require statement not part of an import statement
    11 | if (isDevelopment) {
    12 |   // Don't load any native (external) modules until the following line is run:
  > 13 |   require('module').globalPaths.push(process.env.NODE_MODULES_PATH);
       |   ^
    14 | }
    15 | // global reference to mainWindow (necessary to prevent window from being garbage collected)
    16 | let mainWindow: any;    
No type errors found
Version: typescript 3.0.3, tslint 5.11.0
Time: 3084ms

Trying to adjust the mentioned lines resulted in additional errors without a concrete solution:

if (isDevelopment) {
  // Don't load any native (external) modules until the following line is run:
  require('module').globalPaths.push(process.env.NODE_MODULES_PATH)
}

My inquiry: What approach should I take to make that line compatible with typescript?

PS: Regarding the Module build failed error, I am currently addressing it and will seek further assistance if needed...

Installed plugins:

  • @vue/cli-service version 3.01
  • @vue/cli-plugin-babel version 3.0.1
  • @vue/cli-plugin-pwa version 3.0.1
  • @vue/cli-plugin-typescript version 3.0.1
  • vue-cli-plugin-electron-builder version 1.0.0-rc2
  • vue-cli-plugin-iview version 1.0.6

Main dependencies :

  • iview version 3.1.0
  • register-service-worker version 1.5.2
  • vue version 2.5.17
  • vue-class-component version6.2.0
  • vue-property-decorator version 7.0.0
  • vue-router version 3.0.1
  • vuex version 3.0.1
  • electron version 2.0.8
  • less version 3.8.1
  • less-loader version 4.0.1
  • typescript version 3.0.3
  • vue-template-compiler version 2.5.17

Proposed solution 1: Splitting the statement into 2 parts resulted in new errors...

ERROR in /Users/ailete619/landema_electron/src/background.ts
11:1 Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.
     9 | } from 'vue-cli-plugin-electron-builder/lib';
    10 | const isDevelopment = process.env.NODE_ENV !== 'production';
  > 11 | import module = require('module');
       | ^
    12 | if (isDevelopment) {
    13 |   // Don't load any native (external) modules until the following line is run:
    14 |   module.globalPaths.push(process.env.NODE_MODULES_PATH);
ERROR in /Users/ailete619/landema_electron/src/background.ts
14:10 Property 'globalPaths' does not exist on type 'typeof Module'.
    12 | if (isDevelopment) {
    13 |   // Don't load any native (external) modules until the following line is run:
  > 14 |   module.globalPaths.push(process.env.NODE_MODULES_PATH);
       |          ^
    15 | }
    16 | // global reference to mainWindow (necessary to prevent window from being garbage collected)
    17 | let mainWindow: any;

My approach: I removed it and now the only remaining issue is the less-related error... problem resolved?

Answer №1

Here is a suggestion for you:

const myModule = require('module');
if (isEnvironmentDevelopment) {
  // Avoid loading any external native modules until the next line is executed:
  myModule.globalPaths.push(process.env.NODE_MODULES_PATH)
}

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 'getAllByRole' property is not found in the 'Screen' type. TS2339 error

I am currently developing a web application using ReactJs for the front end. While testing the code, I encountered the following error: TypeScript error in My_project/src/unitTestUtils.tsx(79,27): Property 'getAllByRole' does not exist on type & ...

My tests are unable to execute on the test database due to the lack of a defined service

I am currently trying to execute my test file in NestJS. My goal is to connect to a test database and run my service with it. However, I am facing an issue where my service is undefined and the method service.findById is also undefined. How can I obtain an ...

Tips for sending properties to a child component in a React Native project using TypeScript

Here is the setup in my parent component: const [OTPNotify, setOTPNotify] = useState("flex"); const closeOTPNotify = () => { setOTPNotify("none"); } <OTPRibbonComponent onCancel={closeOTPNotify} display={OTPNotify}/> Now, ...

The TypeScript error code TS2345 indicates that the argument type 'JQueryXHR' cannot be assigned to the parameter type 'Promise<any>'

In a coding tutorial, an example code snippet demonstrates how to execute a JQuery getJSON() call and then transform the result into a Promise, which is later converted into an Observable. /// <reference path="../typings/tsd.d.ts" /> import { Compo ...

Combining functions does not result in a callable function, even when the parameters fulfill the constraints of each individual function

I have encountered an issue while trying to compile a Typescript snippet: function foo(v: string) { return 'foo'; } function bar(v: string | number) { return 'bar'; } const notCallable: typeof foo | typeof bar = function() {} as any; ...

There is no such property as formData.delete()

When I am using a FormData object to upload a file, I want to add functionality to delete the file from FormData. However, I encountered an error stating that the delete property does not exist on the FormData object. formData.delete(fileName) Code uplo ...

Utilizing the map function to incorporate numerous elements into the state

I'm struggling with 2 buttons, Single Component and Multiple Component. Upon clicking Multiple Component, my expectation is for it to add 3 components, but instead, it only adds 1. import React, { useState, useEffect } from "react"; import ...

What is the best way to utilize the constructor in a JavaScript object so that only the properties within `this` are utilized?

I am looking to instantiate the following class: class Person { firstName; lastName; birthday; constructor(props: Person) { {firstName, lastName, birthday} = props } } var me = new Person({firstName: "donald", lastName: "trum ...

Encountering an error in Angular where the property does not exist in type

Struggling to create a collapsible menu within my header component in an Angular project, I've hit a snag with proper JSON formatting. The error message that keeps popping up reads: Error: src/app/components/header/header.component.html:48:49 - error ...

Updating the useState() function in React when the value changes can be done by utilizing the

I'm struggling to update the count value in my React project. Within my dynamic set, I aim to display the size of the set whenever it changes! My goal is to continuously update the count variable to match ratedSet.size whenever the set's size c ...

Ensuring thoroughness in validation without the use of specific text strings

Implementing the assignment or assertion of never at the end of a function is a strategy commonly used in Typescript to ensure exhaustive checks at compile time. To enable the compiler to recognize this, explicit strings are needed for it to check against ...

The content security policy is preventing a connection to the signalr hub

Currently, I am developing an application using electron that incorporates React and Typescript. One of the features I am integrating is a SignalR hub for chat functionality. However, when attempting to connect to my SignalR server, I encounter the followi ...

What is the process for mocking a method from a class that is instantiated within another class using ts mockito in typescript?

I have a specific Class that I want to test using the mocha-chai testing framework in TypeScript. My approach involves incorporating ts-mockito for mocking purposes. export class MainClass implements IMainClass { private mainResource: IMainResource; ...

Is it possible for me to choose a specific reducer to dispatch to in ngrx?

Just started exploring Redux and curious about the best way to implement multiple reducers. Specifically, I'm interested in how to direct actions to a specific reducer. For example, if I have two reducers: one for users and one for posts. User Reduc ...

Tips for accessing the checked value of a checkbox when using an array as a model in Vue

I'm curious about using an array as a model for a multiple-checkbox list. How can I efficiently check which items are checked and which are unchecked without having to compare one by one with that array? <ul> <li v-for="task in tasks"> &l ...

Beware: React higher-order component alert - Caution: It is not possible to modify a component from within the function body of another

Recently, I crafted a simple higher-order component that retrieves data from an API endpoint and handles loading, error messages, or displaying content upon success. Although the component functions correctly, it triggers the following error message: War ...

Are there any solutions to refresh a page by clicking a button in next.js?

I am currently learning how to work with next.js and I'm facing an issue where I need to reload my page to make a new API request. As a beginner, I'm not sure how to achieve this. I've tried a few methods but none of them seem to work. Below ...

The specified property is not present in the type '{}'

I've been incorporating Typescript into my React application Within my mapStateToProps, this is the code I'm using const mapStateToProps = (state: AppState) => { console.log(state) return { ...state.player, position: ...

Avoiding the sudden appearance of unstyled content in Single-File Components

I am looking to update my HTML navigation <div id="header-wrapper"> <div id="header-logo-title"> <nav> <ul id='mainNav'> <li>Home</li> </ul> </nav> ...

Steps for activating the HTML select option menu with an external button click

I'm currently in the process of building a React website and I'm faced with the challenge of customizing select options to align with my design in Figma. Check out this image for reference Here's how I've set it up in my code: const C ...