Module not found in Typescript

Filter.ts, mustache.js and redux.3.5.2.js are all located in the same directory (/Scripts). The code snippet within Filter.ts is as follows:

///<reference path="./typings/mustache.d.ts" />
import Mustache = require("mustache");
import Redux = require("redux.3.5.2");

An error is displayed in Visual Studio code indicating that it cannot find the module 'redux'. When attempting to compile, the following message appears:

Filter.ts(13,24): error TS2307: Cannot find module 'redux.3.5.2'.

The question arises - why is it able to locate mustache but not redux?

I have yet to add a typing file, so how would this impact importing the file? Furthermore, the file is not currently being utilized in any part of the code. Interestingly, removing the mustache typing does not result in TypeScript failing to find the file.

$ ls *.js
requirejs.2.1.22.js  Filter.ts              mustache.js          redux.3.5.2.js

[Update]

After updating TypeScript:

npm install -g typescript

tsc.cmd now confirms that Version 1.8.10 is installed.

The task.json configuration is outlined as follows:

{
    "version": "0.1.0",
    "command": "tsc.cmd",
    "isShellCommand": true,
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}

Additionally, the tsconfig.json file has the following settings:

{
    "compilerOptions": {
        "target": "es5",
        "watch": true,
        "module": "amd",
        "removeComments": true,
        "sourceMap": false,
        "outDir": "."
    }
}

While errors related to missing modules initially persist, they eventually disappear after restarting Visual Studio code multiple times. However, the challenge of locating the redux module remains unresolved. It's unclear whether the issue lies in the file itself or if there is something within the file causing this problem, as the error message lacks specific details.

Answer №1

Why does it locate mustache but not redux?

Upon reviewing your code, I noticed that you included the reference path for mustache typings with

///<reference path="./typings/mustache.d.ts" />
. This indicates that typings for mustache are available and therefore it is located. However, there seems to be no typings specified for redux in your example, which explains why it cannot be found.

Answer №2

When it comes to JavaScript files, the location may not matter much as long as you have a definition file (e.g., module-name.d.ts) in the root directory.

In your TypeScript file, you can include the following:

///<reference path="module-name.d.ts"/>
import redux = require("module-name");

In require.config, you can set it up like this:

require.config = {
  baseUrl:settings.appRoot,
  urlArgs: "version=" + settings.version,
  paths: {
    "module-name": settings.appRoot + "/Scripts/SomePlace/some-module",
...

If you place the type definitions in a separate directory (e.g., typings), then your TypeScript file would resemble this:

///<reference path="../typings/module-name.d.ts"/>
import redux = require("typings/module-name");

If another TypeScript file needs this module but is located in a different directory (say, one level deeper), you can do this:

///<reference path="../../typings/module-name.d.ts"/>
import redux = require("typings/module-name");

Your require.config will be structured like so:

require.config = {
  baseUrl:settings.appRoot,
  urlArgs: "version=" + settings.version,
  paths: {
    "typings/module-name": settings.appRoot + "/Scripts/SomePlace/some-module",
...

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

experiencing an excessive amount of re-renders after transferring data to a distinct component

At the moment, I have implemented this logic to display data based on the results of a graphql query, and it is working well: const contacts = () => { const { loading, error, data } = useUsersQuery({ variables: { where: { id: 1 }, ...

Tips for integrating an arrow function as a property in a functional programming approach using JavaScript or TypeScript

Suppose I were to create a constructor for a functional class with TypeA as an argument, and TypeB representing the type of the class itself. In such cases, I can implement it using: functionName(argument: TypeA): TypeB { this.property = argument; ...

Testing TypeScript using Jasmine and Chutzpah within Visual Studio 2015

I am new to unit testing in AngularJS with TypeScript. I have been using jasmine and chutzpah for unit testing, but I encountered an error "ReferenceError: Can't find variable: angular". My test file looks like this: //File:test.ts ///<chutzpah_r ...

Using GSAP in an Ionic application

What is the best way to add the GSAP library to an Ionic project? Simply running npm install gsap doesn't seem to work when I try to import it using: import { TweenMax, TimelineMax} from "gsap"; I am currently using TypeScript. Thank you. ...

Angular 9: Subscribing triggering refreshing of the page

I've been working on an Angular 9 app that interacts with the Google Books API through requests. The issue I'm facing is that whenever the requestBookByISBN(isbn: string) function makes a .subscribe call, it triggers a page refresh which I' ...

Leveraging Global Variables and Functions with Webpack and TypeScript

I have been utilizing Webpack in conjunction with TypeScript, HTML, and SCSS to develop a project. My goal is to create a single page application that incorporates a router located within the root folder of the project /framework/, with all my source code ...

The TypeScript error occurs when attempting to assign a type of 'Promise<void | Object>' to a type of 'Promise<Object>' within a Promise.then() function

I'm currently working on a service to cache documents in base64 format. The idea is to first check sessionStorage for the document, and if it's not there, fetch it from IRequestService and then store it in sessionStorage. However, I've encou ...

Modify typescript prior to typechecking

Consider the following TypeScript file: class A { private x? = 0; private y? = 0; f() { console.log(this.x, this.y); delete this.x; } } const a = new A(); a.f(); When building it in webpack using awesome-typescript-loader ...

Steps to include a Target property in a freshly created MouseEvent

Trying to dispatch a contextMenu event, I've noticed that in the MouseEvent interface for TypeScript, the target property is missing, even though it is documented in the contextMenu documentation. Here's my TypeScript snippet: const emulatedMou ...

Issue with Angular Datatable: Table data is only refreshed and updated after manually refreshing the page or performing a new search query

Having trouble updating Angular Datatable after selecting different data? The API response is coming in but the table data is not being updated. Can anyone suggest how to properly destroy and reinitialize the table for the next click? Below is a snippet ...

The Typescript compiler is throwing an error in a JavaScript file, stating that "type aliases can only be used in a .ts file."

After transitioning a react js project to react js with typescript, I made sure to move all the code to the typescript react app and added types for every necessary library. In this process, I encountered an issue with a file called HeatLayer.js, which is ...

Sending information from a component inside a router-outlet to a higher-level "Parent" component in Angular 2

Is there a way to transfer data from a component embedded within a router-outlet tag in a "parent" component's HTML template back to the parent component? ...

Delete a particular item from a JSON object in real-time using TypeScript/JavaScript

Upon examining the JSON data provided, it contains a node called careerLevels which includes inner child elements. input = { "careerLevelGroups": [ { "201801": 58, "201802": 74, ...

Utilizing MakeStyles from Material UI to add styling to a nested element

I was pondering the possibility of applying a style specifically to a child element using MakesStyles. For instance, in a typical HTML/CSS project: <div className="parent"> <h1>Title!</h1> </div> .parent h1 { color: # ...

Using React with Typescript: What is the best way to implement useMemo for managing a checkbox value?

I am currently developing a to-do list project using React and Typescript. At the moment, I have successfully implemented the functionality to add new to-do items via a form and delete them individually. Each item includes a checkbox with a boolean value. ...

The absence of the import no longer causes the build to fail

Recently, after an update to the yup dependency in my create react-app project, I noticed that it stopped launching errors for invalid imports. Previously, I would receive the error "module filename has no exported member X" when running react-scripts buil ...

What is the process for integrating unit tests from external sources into an Angular project following an upgrade to version 15

As of Angular v15, the require.context function has been removed from the test.ts configuration file. I used to rely on require.context to expose tests outside of the Angular project to Karma. Now that it's no longer available: const contextGlobal = ...

How to generate an array within a TypeScript extension function

As I was working on creating an extension method using typeScript, the main goal was to establish a static or normal variable within the method. The ServiceCollector method was invoked three times in order to send and store data or objects in an array. B ...

Confirm the existence of a non-null value

One of the functions I have implemented is designed to remove null values from an array that is passed as input. This function also provides an optional transform functionality, allowing the user to modify the elements of the array into a custom format if ...

Experience feelings of bewilderment when encountering TypeScript and Angular as you navigate through the

Exploring Angular and TypeScript for an Ionic project, I am working on a simple functionality. A button click changes the text displayed, followed by another change after a short delay. I'm facing confusion around why "this.text" does not work as exp ...