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

create a sapper route using JSON data

Beginning with the official Sapper template, I am keen on implementing export default as recommended by eslint: export default function get(_, res) { res.writeHead(200, { 'Content-Type': 'application/json', }); res.end(conte ...

Encountering a mysterious error while attempting to access and modify a value stored in a useState hook using the keydown

I've been attempting to create a simple animation on canvas using React.js, but I'm facing an issue with integrating my Keydown function with my useState. It seems that my useState value is not being defined properly, preventing me from changing ...

Controlling the input of characters in a textbox with JavaScript

Can someone assist me with validating a textbox to only allow specific characters and prevent input after the limit is reached? I know it can be done using Javascript but I'm not sure how to do it. Any help would be greatly appreciated. ...

Are the SystemIndexes in MongoDB influenced by the database contents, or do they remain fixed regardless of changes in the configuration

Currently, we are utilizing full text search functionality on mongo 2.6 by creating indexes using the db.ensureIndex commands. After creating these indexes, we save them as systemIndexes so that developers can import test data with the necessary indexes in ...

TypeScript's Awaitable concept

Lately, I have been utilizing async / await functions quite frequently in my JavaScript projects. As I make the transition to TypeScript, I am gradually converting some sections of my code bases. In certain scenarios, my functions require a function as an ...

Issue with Unicode in NetworkX: "&" is transformed into "&"

Hey there, I'm currently working with networkX on colab to convert JSON data to GML format. The issue I'm facing is that networkX is converting the "&" symbol in my JSON into "&" as shown below: for node in data['nodes'][&ap ...

Angular 2 Routing 3.0: Paying Attention to Letter Case

let routesList: Routes = [ { path: 'x', component: xComponent }, { path: 'y', component: yComponent }, { path: 'zComponent', component: zComponent } ]; When entering "x" in the URL, it navigates to the component page. Ho ...

AngularJS Firebreath Component

Trying to integrate a FireBreath plugin object into an AngularJS view is causing an error when attempting to render the view: TypeError: Cannot read property 'nodeName' of undefined The object can be successfully included in the view using $com ...

Tips for ensuring a scrollbar remains at the bottom position

I'm facing an issue with a scroll-bar inside a div element. Initially, the position of the scroll-bar is at the top. However, whenever I add text to the div element, the scroll-bar remains in its initial position and does not automatically move to the ...

Difficulty with formatting decimal points in JavaScript

I seem to be having an issue with decimal places in my code. Currently, it's showing the result as 123 123 12 but I actually need it to be displayed as 12 312 312. Is there anyone who can assist me with formatting this correctly? Here is the section ...

Maintaining the highlight of the active row in Oracle Apex Classic Report even after the dialog window is closed

Greetings to everyone gathered here! Currently, I am working on a single page in Oracle Apex (version 4.2.6.00.03) that contains two Classic Reports — one serving as the "master" report and the other displaying the corresponding "details". Additionally, ...

Is there a way to transition an element from a fixed layout position to an absolute layout position through animation?

I am looking to create a dynamic animation effect for a button within a form. The goal is for the button to move to the center of the form, while simultaneously undergoing a horizontal flip using a scale transform. During the midpoint of this animation, I ...

What is the recommended method for writing JavaScript scripts with AJAX in a Rails application? How can URLs be incorporated into the script effectively?

When incorporating AJAX into my Rails application, I encounter difficulties when specifying the URL for the request within a script. While it is recommended to use helpers like my_resource_path instead of manually writing paths, these helpers do not functi ...

The fullcalendar is experiencing difficulties in showing the event

I am facing an issue with Fullcalendar where the events fetched by ajax are not showing up on the calendar. Even though the events are successfully passed and can be displayed in a pop-up, they do not render on the calendar. When manually setting the event ...

Converting a sophisticated PHP object into a JSON string

I'm struggling with parsing a complex object in PHP to create a Json String. Despite searching through various examples online, none of them seem to work for me. To add to the challenge, my hosting platform only supports PHP 5.2 and I cannot upgrade i ...

Sending data from PHP to JavaScript using JSON encoding through POST requests

I am dealing with a multi-dimensional array that needs to be passed to a PHP script using JavaScript to parse JSON data and display it on Google Maps. I am experimenting with using forms to achieve this: <?php $jsontest = array( 0 => array( ...

What steps should I take to set up Sublime to consistently open in the same directory?

I need Sublime to always open a specific folder... my_folder Is there a way to configure Sublime so that it always opens this folder when I click on the icon? When I manually quit Sublime using the menu, it remembers my last folder upon reopening. Howe ...

Remembering data in a lazy loaded AngularJs list

Encountering an issue with a lazy loaded list of books. Initially, 10 books are loaded and if the user scrolls down, the next 10 books are loaded. For example, if the user is on "page" 4 and clicks on the 35th book to view details, upon returning to the l ...

Issues with utilizing a generic type in an Arrow function in the Typescript Playground

When I try to use a generic type with an arrow function in Typescript Playground, I get an error message saying Cannot find name 'T' For more details, check out this link function hasAllProperties <T>(obj: any, props: (keyof T)[]): obj is ...

How can you refresh a functional component using a class method when the props are updated?

I've created a validator class for <input> elements with private variables error, showMessage, and methods validate and isOk. The goal is to be able to call the isOk function from anywhere. To achieve this, I designed a custom functional compone ...