Error TS2307: Module 'calculator' could not be located

Running a Sharepoint Framework project in Visual Studio Code:

This is the project structure:

https://i.stack.imgur.com/GAlsX.png

The files are organized as follows: ComplexCalculator.ts

export class ComplexCalculator {
  public sqr(v1: number): number {
    return v1*v1;
  }

  public multiply(v1:number, v2:number): number {
    return v1*v2;
  }
}

EasyCalculator.ts

export class EasyCalculator {
  public sum(v1: number, v2: number): number {
    return v1 + v2;
  }

  public subtraction(v1: number, v2: number): number {
    return v1 - v2;
  }
}

Calculator.ts

export * from './ComplexCalculator';
export * from './EasyCalculator';

Calculator.manifest.json

{
  "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
  "id": "8de800b0-6a4f-4cb0-bf75-62c32e6ea66b",
  "componentType": "Library",
  "version": "0.0.1",
  "manifestVersion": 2
}

Configured on config.json:

{
  // Entries and externals configuration... (code too long to rewrite)
}

In gulpfile.js:

const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
// Other task declarations...

Typings generated at dist folder in calculator.d.ts:

declare module 'calculator' {
class ComplexCalculator {
    sqr(v1: number): number;
    multiply(v1: number, v2: number): number;
}

class EasyCalculator {
    sum(v1: number, v2: number): number;
    subtraction(v1: number, v2: number): number;
}

}

However, when trying to reference it in the webpart file:

import * as calculator from 'calculator';

After compiling, an error occurs:

Error - typescript - src/webparts/librarysample/LibrarysampleWebPart.ts(13,29): error TS2307: Cannot find module 'calculator'.

Answer №1

Don't forget to import modules in your project using relative paths instead of absolute paths. Here's an example:

import * as calculator from './path/to/Calculator';

Additional Tips

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

Ways to correct inverted text in live syntax highlighting using javascript

My coding script has a highlighting feature for keywords, but unfortunately, it is causing some unwanted effects like reversing and mixing up the text. I am seeking assistance to fix this issue, whether it be by un-reversing the text, moving the cursor to ...

Using "jq" to properly format multi-line text for escaping purposes

Let's say I have a multi-line text that needs to be escaped: printf "\"aaa\"\nbbb" "aaa" bbb I'm attempting to escape it using the command jq -aR: printf "\"aaa\"\nbbb"| jq -aR "\"aaa\"" "bbb" ...

JavaScript's Ajax POST request to PHP is not functioning as expected

My current code setup involves handling $_GET[] requests on the products.php page by passing them to get_data_products.php via an ajax POST request. The data retrieved from get_data_products.php is then displayed accordingly. PHP if(isset($_GET['cat ...

AngularFire - Structuring item references for child templates using ng-repeat

I have been struggling with this issue for hours and can't seem to find a solution. In my dashboard, all data from my Firebase database is visible using Ng-repeat. However, I am trying to select a specific item and view its details on another page. H ...

Extracting information from a JSON file is a straightforward process that involves accessing

After spending months trying to extract data from a JSON file, here is what I have encountered: [["wrere","bogdan12",31,21,"profile_pic/poza3.jpg",78,21,31,"profile_pic/download.jpg"] , ["hey men","bogdan12",31,21,"profile_pic/poza3.jpg",76,21,31,"pro ...

How can I use jQuery to create a new div element if it is not already present

I am familiar with how to add a class if it does not already exist, for example: $("ul:not([class~='bbox'])").addClass("bbox"); Alternatively, if(!$("ul").hasClass("class-name")){ $("ul").addClass("bbox"); } However, I am unsure how to c ...

The useMutation function trapped in an endless loop

I've been encountering an issue while running a query to save an entity in the database using usemutation. The saveVisa() mutation seems to be stuck in an infinite loop, creating the same element multiple times without any clear reason. import {React, ...

MongoDB table collections (table names in other databases)

After setting up my express server to connect to mongodb, I encountered an issue despite everything working fine initially. I created a collection in my mongodb called projects (plural form). In my project.model.js file, I defined the model as follows: c ...

Next.js deployments on Vercel are encountering issues with resolving local fonts

Currently, I am facing an issue while trying to incorporate next/fonts into my project in next.js 13.3. The setup works perfectly on my local machine, but as soon as I deploy it to Vercel, a build error arises with the message Module not found: Can't ...

Evaluating function declaration - comparing interface to type alias

Here is a function that I need to create a validator for: function (n: number) { return {s: n}; } I have come across two options for creating the validator: Option 1: Interface interface ValidatorFnInterface { (n: number): { [key: strin ...

The error message "TypeError: dom.getElementsByTagName is not a function in Node.js" indicates

I have just started learning HTML and web development. I am trying to extract a list of tags from an HTML document but I keep receiving the error message TypeError: dom.getElementsByTagName is not a function. I am making a GET request using axios, then u ...

Skipping certain key-value pairs during the conversion from JSON to Excel Worksheet using the XLSX library in JavaScript

I have a set of objects in JSON format within my JavaScript code and I am looking to transform this data into an Excel worksheet. Within the JSON structure, there are certain key-value pairs that I do not wish to include in the Excel output. For instance, ...

Utilizing lodash and Angular 8: Identifying an valid array index then verifying with an if statement

In my current project, I am developing an e-commerce angular application that includes a basket with two types of products: restaurant + show combos and gift cards. When a client reserves a restaurant, they must also reserve a show; conversely, the client ...

Invoke the API when the value of a property in the SPFX property pane is modified

Here's a question that might sound silly, but I'll ask anyway. I have a dropdown field in my Property pane that is filled with all the lists from the current site. It's working fine. When I change the dropdown selection, it populates a pro ...

File index with Node.js server for handling files

I currently have a code snippet for setting up a file server that serves files from a static folder named "public1". However, I am facing difficulties in making an HTML page display by default when a user navigates to the IP address in a browser. Although ...

Processing incoming requests with a loading interface in CodeIgniter

Is there a way to notify the user who sent the request whether or not the requested user will approve it? Optional: If there is no notification sent to the user who made the request, the requested user will have to wait for verification. For Example: Ima ...

Error code 500 was encountered while processing the JSON response

Whenever I attempt to make an ajax POST Call that returns JSON, I encounter an Internal Error. The ajax call originates from a JS page: $.post( 'FilterAsJson', $(formWithReportData).serialize(), function(data){funtion_body} ); This i ...

When a function is called, retrieve a specific number of elements from an array using the slice method in

If I have an array of 15 objects, but I am only displaying 5 on the browser using this code: const displayedArray = array.slice(0,4) I also have a function that will load another 5 objects each time a user scrolls down. displayedArray.concat(array.slice ...

When attempting to perform conditional rendering in React using a stateless functional component, I encounter an error stating "Unexpected token, expected ,"

Here is the code snippet: 'use strict' import React from 'react' import { connect } from 'react-redux' import { Panel, Col, Row, Well, Button } from 'react-bootstrap' const Cart = ({ cart }) => { const cartI ...

Is there a way to prevent the Drop event in Angular2?

In my Angular2 application, I have created a directive for an input field. To prevent paste or Ctrl+V within the host element of this directive, I used the following code which is functioning flawlessly: @HostListener('paste', ['$event&apos ...