Error encountered while loading a plugin in Typescript and RequireJS compilation process

Question

Error encountered while loading a plugin in Typescript and RequireJS compilation process

Currently, I am working on a Typescript application in Visual Studio 2015 where RequireJS is used for loading modules.

I have successfully loaded various modules from .ts classes and external libraries by using their typing .d.ts files. However, I have encountered an issue when attempting to load a jQuery plugin.

While I am utilizing the typing file for the library, there are no module definitions present in the .d.ts file since it is simply a plugin for jQuery.

In order to address this issue, I have followed the guidelines for shim library loading as recommended on the RequireJS website.

requirejs.config({
    baseUrl: "Scripts",
    paths: {
        "jquery": "jquery-2.2.3",
        "jquery.pjax": "jquery.pjax"
    },
    shim:
    {
        "jquery.pjax":
        {
            deps: ["jquery"],
            exports: "jQuery.fn.pjax"
        }
    }
});
require(["app"]);

As per the RequireJS website:

The shim config only establishes code relationships. To load modules that are part of or use shim config, a regular require/define call is required. Setting up the shim alone does not trigger code loading.

Despite trying multiple approaches (including moving the jquery.pjax.d.t file next to the jquery.pjax.js), none of them seem to work when it comes to loading the plugin:

import * as pjax from "jquery.pjax";

import pjax = require("jquery.pjax");

import pjax = require("./jquery.pjax");

import pjax = require("jquery.pjax.js");

import pjax = require("./jquery.pjax.js");

The compiler throws errors such as Cannot find module "jquery.pjax" or

File C:/foo/bar/jquery.pjax.d.ts is not a module

.

The app.ts file fails to compile with any of the aforementioned codes present, and removing them prevents the plugin from being loaded.

Considering the fact that I use multiple imports in my app.ts file and anticipate more in the future, I prefer utilizing the import Foo = require("foo") or import * as Foo from "foo" module loading styles rather than manually writing the AMD define function.

In addition, I rely on Nuget package management and would rather not manually edit or move external .d.ts or .js files.

If anyone could provide assistance in resolving this issue, I would greatly appreciate it.

typescript requirejs

Answer 1

Answer №1

If you wish to utilize the require("jquery.pjax") function, there are a couple of ways to go about it in TypeScript. Either a genuine TypeScript module must be defined and easily discoverable under that specific name, or a declaration for it needs to be present: declare module "jquery.pjax".

Your available options include:

Load jQuery externally from RequireJS (for instance, add both jQuery and jQuery.pjax using plain script tags on your page, allowing them to be used globally). This aligns with what the .d.ts file expects you to do since jQuery.pjax is not actually a RequireJS module at all (hence the necessity for the shim config).
Add a module declaration within your codebase to convince TypeScript that it is a legitimate RequireJS module. This declaration can exist within the existing .d.ts definition for jquery.pjax or as a standalone entity in a separate file for easier management. Remember to reference this new module after requiring it; otherwise, TypeScript will not output the dependency without any fake references.

Utilize RequireJS manually for loading purposes outside of TypeScript's module system. In scenarios involving plugin ecosystems like this, I typically assign the actual library the name 'raw-libraryname' in my RequireJS paths. Subsequently, I create a new 'libraryname.ts' file which integrates the raw library along with the plugins, performs necessary setup tasks, and ultimately returns the outcome (accessible by others as needed).

// Require configuration:
requirejs.config({
    baseUrl: "Scripts",
    paths: {
        "raw-jquery": "jquery-2.2.3", // solely required by plugins
        "jquery.pjax": "jquery.pjax",
        "jquery": "lib-wrappers/jquery" // utilized by everything else, including all plugins
    },
    shim:
    {
        "jquery.pjax":
        {
            deps: ["raw-jquery"]
            // Export definitions may not be imperative here.
            // Users should access this functionality through jQuery directly.
        }
    }
});   

// within lib-wrappers/jquery.ts
define(["raw-jquery", "jquery.pjax"], function ($) {
    // Ensure this line runs before dependencies on jQuery & plugins are loaded
    return $;
});

This strategy allows continued usage of jQuery via RequireJS while ensuring that the non-RequireJS module (jquery.pjax) is prepared and loaded before being accessed through jQuery by other components.

Answer 2

If you wish to utilize the require("jquery.pjax") function, there are a couple of ways to go about it in TypeScript. Either a genuine TypeScript module must be defined and easily discoverable under that specific name, or a declaration for it needs to be present: declare module "jquery.pjax".

Your available options include:

Load jQuery externally from RequireJS (for instance, add both jQuery and jQuery.pjax using plain script tags on your page, allowing them to be used globally). This aligns with what the .d.ts file expects you to do since jQuery.pjax is not actually a RequireJS module at all (hence the necessity for the shim config).
Add a module declaration within your codebase to convince TypeScript that it is a legitimate RequireJS module. This declaration can exist within the existing .d.ts definition for jquery.pjax or as a standalone entity in a separate file for easier management. Remember to reference this new module after requiring it; otherwise, TypeScript will not output the dependency without any fake references.

Utilize RequireJS manually for loading purposes outside of TypeScript's module system. In scenarios involving plugin ecosystems like this, I typically assign the actual library the name 'raw-libraryname' in my RequireJS paths. Subsequently, I create a new 'libraryname.ts' file which integrates the raw library along with the plugins, performs necessary setup tasks, and ultimately returns the outcome (accessible by others as needed).

// Require configuration:
requirejs.config({
    baseUrl: "Scripts",
    paths: {
        "raw-jquery": "jquery-2.2.3", // solely required by plugins
        "jquery.pjax": "jquery.pjax",
        "jquery": "lib-wrappers/jquery" // utilized by everything else, including all plugins
    },
    shim:
    {
        "jquery.pjax":
        {
            deps: ["raw-jquery"]
            // Export definitions may not be imperative here.
            // Users should access this functionality through jQuery directly.
        }
    }
});   

// within lib-wrappers/jquery.ts
define(["raw-jquery", "jquery.pjax"], function ($) {
    // Ensure this line runs before dependencies on jQuery & plugins are loaded
    return $;
});

This strategy allows continued usage of jQuery via RequireJS while ensuring that the non-RequireJS module (jquery.pjax) is prepared and loaded before being accessed through jQuery by other components.

Error encountered while loading a plugin in Typescript and RequireJS compilation process

Answer №1

Similar questions

What is causing the "excessive stack depth" error in this JSX code?

Adjusting the transparency of TabBadge in Ionic 2

What are the reasons behind memory leaks and decreased rendering speed when I exit and then reopen a React component (specifically Material-Table)?

Utilizing TypeScript to invoke a method via an index signature

Code coverage analysis in a node.js TypeScript project consistently shows no coverage metrics

The array is not being spliced in the DOM, however, it is being spliced in the console - Ionic 2+/Angular

Suggestions for importing by Typescript/VS Code

Creating a custom pipe that converts seconds to hours and minutes retrieved from an API can be achieved by implementing a transformation function

Angular 8 is throwing an error stating that the property 'token' is not recognized on the 'Object' data type

The argument provided is a string type, which cannot be assigned to a parameter expecting an object with a 'results' property of type string

Tips for setting up a React TypeScript project with custom folder paths, such as being able to access components with `@components/` included

Is there a method to retrieve Mui state classes easily?

Encountering issues when attempting to set up graphqlExpress due to type

Guide to adding information to a table with the help of an "interface" in Angular 6 and utilizing Typescript

How would you define 'Idiomatic' in the context of Idiomatic Javascript?

Is it possible to schedule deployments using Vercel Deploy Hooks in Next.js?

Exploring the concept of rest arrays within a destructured object

Tips for creating a universal function for two interlinked types

An issue has been detected in the @angular/material/autocomplete/typings/autocomplete-origin.d.ts file: The type 'ElementRef' is not declared as a generic type

The Ngrx action fails to finish despite encountering an error during execution