Encountering an issue with Typescript and SystemJS: Struggling to locate a

After developing a module, I decided to move it out of the app and into node_modules. However, I encountered an error

error TS2307: Cannot find module 'bipartite-graph'.
. In this case, bipartite-graph is actually my own module.

Here is the content of my systemjs.config.ts:

SystemJS.config({
  packages: {
    app: {
      main: './app.js',
      defaultExtension: 'js'
    },
    'bipartite-graph': {
      main: './bipartite-graph.js',
      defaultExtension: 'js'
    },
    'rxjs': {
      defaultExtension: 'js'
    }
  },
  map: {
    app: 'app',

    'rxjs': 'node_modules/rxjs',

    'bipartite-graph': 'app/bipartite-graph'
  }
});

And now, looking at the app.ts:

import { Subject } from 'rxjs/Subject';
import BipartiteGraph from 'bipartite-graph';

let subject: Subject<boolean> = new Subject<boolean>();
let bg = new BipartiteGraph([35, 50, 40], [45, 20, 30, 30], [[8, 6, 10, 9], [9, 12, 13, 7], [14, 9, 16, 5]]);

const n = 3, m = 4;

let i = 1, j = 1;
while (i <= n && j <= m) {
  bg.setAmount(i, j, Math.min(bg.getCapacity(i), bg.getDemand(j)));
  bg.setCapacity(i, bg.getCapacity(i) - bg.getAmount(i, j)); bg.setDemand(j, bg.getDemand(j) - bg.getAmount(i, j));
  if (bg.getCapacity(i) === 0) {
    i = i + 1;
  } else {
    j = j + 1;
  }
}

bg.draw();

The transpilation of the project was successful and the final app works without any issues. However, both Webstorm and tsc are throwing errors. Even importing rxjs didn't reveal any crucial differences. What could be the missing piece here? I attempted moving the module to node_modules and adjusting the path in systemjs.config.ts, but unfortunately, it did not resolve the problem. You can access the entire project on GitHub.

Answer №1

Your typescript compiler is having trouble locating the bipartite-graph module because it's not reading your systemJS config correctly. To resolve this issue, you need to create a tsconfig.json file (if one does not already exist) with the necessary baseUrl and path options configured.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "bipartite-graph": ["app/bipartite-graph"],
      ...other path mappings
    }
  }
}

For more detailed information on this topic, refer to the official documentation: https://www.typescriptlang.org/docs/handbook/module-resolution.html

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

Creating a union type from an array that is not a literal (using `Object.keys` and `Array.map`)

Can a union be derived from a non-literal array? I attempted the following: const tokens = { "--prefix-apple": "apple", "--prefix-orange": "orange" }; const tokenNames = Object.keys(tokens).map(token => toke ...

Issue with TypeScript when using destructuring on an object

When attempting to destructure data from an object, I encountered the error message Property XXXX does not exist on type unknown. This issue arose while using React Router to retrieve data. let {decoded, reasonTypes, submissionDetails} = useRouteLoaderDa ...

React Native - The size of the placeholder dictates the height of a multiline input box

Issue: I am facing a problem with my text input. The placeholder can hold a maximum of 2000 characters, but when the user starts typing, the height of the text input does not automatically shrink back down. It seems like the height of the multiline text ...

Did not adhere to regulations

Currently, I am in the process of developing a React app. However, when I attempt to initiate my project using npm start in the terminal, I encounter an error message on the browser. https://i.stack.imgur.com/wej1W.jpg Furthermore, I also receive an erro ...

Guide on transforming JSON data into a collection of custom objects using TypeScript

When working with raw data in TypeScript (originally a JSON file and imported using import * as raw_data from './json_file.json'): let raw_data: object = {"a": {"name": "Name a", "desc": "Description a ...

Exploring the depths of nested data retrieval using the fp-ts library: a labyrinth

Embark on your journey into the world of functional programming in typescript using the fp-ts library. I find myself tangled in a complex web of nested data fetching, reminiscent of the ancient Egyptian pyramids. How can I tackle this problem with a more ...

A guide on loading modules dynamically using React and Typescript from a server

I am working on a React / Typescript / Webpack / React-Router application that contains some large JS modules. Currently, I have two bundles (common.js and app.js) included on every page, with common.js being a CommonsChunkPlugin bundle. However, there is ...

Is there a TypeScript rule called "no-function-constructor-with-string-args" that needs an example?

The description provided at this link is concise: Avoid using the Function constructor with a string argument to define the function body This might also apply to the rule missing-optional-annotation: A parameter that comes after one or more optiona ...

Using Typescript to define Vuex store types

Attempting to create a TypeScript-friendly Vuex store has been quite the challenge. Following instructions outlined here, I've encountered an issue where accessing this.$store from a component results in a type of Store<any>. I'm strugglin ...

Tips for utilizing mergeWith with Subjects in an Angular application

Objective: Creating a Combined Filter with 3 Inputs to refine a list Conditions: Users are not required to complete all filters before submission The first submit occurs when the user inputs data Inputs are combined after more than one is provided Appro ...

Using Typescript for the factory design pattern

My goal is to develop a factory for generating instances of MainType. To achieve this, I want to reuse existing types (specifically the same instance) which are stored in the ItemFactory. class BaseType { } class MainType extends BaseType { } class It ...

Using TypeScript to validate the API response against specific types

I'm intrigued by the scenario where you expect a specific data type as a response from fetch / Axios / etc, but receive a different type instead. Is there a way to identify this discrepancy? interface HttpResponse<T> extends Response { parsed ...

Having trouble installing the gecko driver for running protractor test scripts on Firefox browser

Looking to expand my skills with the "Protractor tool", I've successfully run test scripts in the "Chrome" browser. Now, I'm ready to tackle running tests in "Firefox," but I know I need to install the "gecko driver." Can anyone guide me on how t ...

Utilize the URL path entered by a user to navigate through the page

I'm exploring Angular 6 to develop my app and I need a feature that can grab whatever the user is typing into the address bar on the website. For instance: If a user types in the domain "myproject.example/5/cool", the site should display "User 5 is ...

Issue with data not being recorded accurately in React app after socket event following API call

The Application Development I have been working on an innovative app that retrieves data from the server and visualizes it on a chart while also showcasing the total value in a Gauge. Additionally, the server triggers an event when new data is stored in t ...

The 'import type' declaration cannot be parsed by the Babel parser

Whenever I attempt to utilize parser.parse("import type {Element} from 'react-devtools-shared/src/frontend/types';", {sourceType: "unambiguous"}); for parsing the statement, I come across an error stating Unexpected token, exp ...

NextJS Typescript Player

Encountering an issue during the build process, specifically with the error in audioRef.current.play(). The error message indicates that there is no play function available. I attempted to use an interface but it seems to not accept boolean values. Could ...

evaluate a utility function that operates on children

In managing a component that requires children (referred to as the layout component), there is a specific function nested within this component that processes these child components. Testing this function poses a challenge, so I decided to extract it into ...

Translating SQL to Sequelize Syntax

I have an SQL query that I need to rewrite as a sequelize.js query in node.js. SELECT historyTable1.* FROM table1 historyTable1 WHERE NOT EXISTS ( SELECT * FROM table1 historyTable2 WHERE historyTable2.id=historyTable1.id AND historyTable2.da ...

Universal Module Identifier

I'm trying to figure out how to add a namespace declaration to my JavaScript bundle. My typescript class is located in myclass.ts export class MyClass{ ... } I am using this class in other files as well export {MyClass} from "myclass" ... let a: M ...