Utilizing noty in a Aurelia application with Typescript

Question

Utilizing noty in a Aurelia application with Typescript

I have been attempting to integrate NOTY with my Aurelia/Typescript application. After installing the package via NPM, I used requireJS to bring it into the application.

Despite my efforts, I have not been successful in making it work. I tried two different methods for importing it into the necessary file:

Attempt# 1

import * as Noty from 'noty';

Although this method seemed to create the correct references and there were no build errors, when attempting to use it, I encountered an error stating - "Noty is not a constructor".

Attempt 2

import Noty from 'noty'

This approach raised a complaint about lack of default exported members. I also tried another variation: import { Noty } from 'noty';, but faced similar issues.

Any suggestions on how to successfully implement this would be greatly appreciated. Thank you in advance!

UPDATE#1

I have added the NOTY package reference in the aurelia.json file. https://i.sstatic.net/8Mi9k.png

However, the Noty package still fails to load. https://i.sstatic.net/Fkc1U.png

PS: I have included a link to the NOTY website in case anyone needs to look at the index.d.ts file.

typescript aurelia noty

Answer 1

Answer №1

It appears that the issue lies in your requireJS package mapping, which may be incorrectly pointing to the wrong file (such as the index.d.ts file).

I recently checked the 'noty' NPM package and it seems like your requireJS mapping should look something like this:

{ "name": "noty", "path": "../node_modules/noty/lib", "main": "noty.min" }

While TypeScript is concerned with *.d.ts files, requireJS does not deal with TypeScript and only focuses on loading Javascript files into the browser.

By the way, don't worry if you find the complexities of the web platform overwhelming at first glance.

Answer 2

It appears that the issue lies in your requireJS package mapping, which may be incorrectly pointing to the wrong file (such as the index.d.ts file).

I recently checked the 'noty' NPM package and it seems like your requireJS mapping should look something like this:

{ "name": "noty", "path": "../node_modules/noty/lib", "main": "noty.min" }

While TypeScript is concerned with *.d.ts files, requireJS does not deal with TypeScript and only focuses on loading Javascript files into the browser.

By the way, don't worry if you find the complexities of the web platform overwhelming at first glance.

Answer 3

Answer №2

It seems that the noty library uses a named AMD define define('Noty',...) instead of the typical anonymous define. Although it should work, there appears to be a regression caused by my recent PR in the cli-bundler for named AMD modules, or perhaps a new bug specific to named AMD modules.

I will address this regression with an update. The update I made can be found here: https://github.com/aurelia/cli/pull/1084

As a temporary workaround, you can:

Create a new file in your project called patch/noty.js with the following content:

define('noty',['Noty'],function(m){return m;});

This patch creates an alias from 'noty' to 'Noty'.

Add the provided code snippet to aurelia.json after requirejs.
There is also an issue with the default main lib/noty.js:

ERROR [Bundle] Error: An error occurred while trying to read the map file at /Users/huocp/playground/nt/node_modules/noty/lib/es6-promise.map

It is attempting to load es6-promise.map but cannot find the file.

Update: Despite the error message, bundling should continue without interruption.

{
    "name": "vendor-bundle.js",
    "prepend": [
      "node_modules/requirejs/require.js",
// add this line after requirejs
      "patch/noty.js"
    ],
    "dependencies": [
      "aurelia-bootstrapper",
      "aurelia-loader-default",
      "aurelia-pal-browser",
      {
        "name": "aurelia-testing",
        "env": "dev"
      },
      "text",
// If desired, override the noty main path to avoid the es6-promise.map error
      {
        "name": "noty",
        "path": "../node_modules/noty",
        "main": "lib/noty.min"
      }

    ]
}

After making these changes, the import has been tested and confirmed to work properly.

import * as Noty from 'noty';

By the way, if you prefer to avoid using * as, consider utilizing the Microsoft recommended esModuleInterop compiler option. https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html

Answer 4

It seems that the noty library uses a named AMD define define('Noty',...) instead of the typical anonymous define. Although it should work, there appears to be a regression caused by my recent PR in the cli-bundler for named AMD modules, or perhaps a new bug specific to named AMD modules.

I will address this regression with an update. The update I made can be found here: https://github.com/aurelia/cli/pull/1084

As a temporary workaround, you can:

Create a new file in your project called patch/noty.js with the following content:

define('noty',['Noty'],function(m){return m;});

This patch creates an alias from 'noty' to 'Noty'.

Add the provided code snippet to aurelia.json after requirejs.
There is also an issue with the default main lib/noty.js:

ERROR [Bundle] Error: An error occurred while trying to read the map file at /Users/huocp/playground/nt/node_modules/noty/lib/es6-promise.map

It is attempting to load es6-promise.map but cannot find the file.

Update: Despite the error message, bundling should continue without interruption.

{
    "name": "vendor-bundle.js",
    "prepend": [
      "node_modules/requirejs/require.js",
// add this line after requirejs
      "patch/noty.js"
    ],
    "dependencies": [
      "aurelia-bootstrapper",
      "aurelia-loader-default",
      "aurelia-pal-browser",
      {
        "name": "aurelia-testing",
        "env": "dev"
      },
      "text",
// If desired, override the noty main path to avoid the es6-promise.map error
      {
        "name": "noty",
        "path": "../node_modules/noty",
        "main": "lib/noty.min"
      }

    ]
}

After making these changes, the import has been tested and confirmed to work properly.

import * as Noty from 'noty';

By the way, if you prefer to avoid using * as, consider utilizing the Microsoft recommended esModuleInterop compiler option. https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html

Answer 5

Answer №3

It seems that the issue you are experiencing is due to NOTY exporting its main functionality in a commonjs way:

module.exports = NOTY;

To import it correctly into your code, you should use the import module syntax like this:

import * as NOTY from 'noty';

This export style is still used by many other libraries that have not switched to the modern ES6 syntax.

Update:

Based on their type definition export: https://github.com/needim/noty/blob/master/index.d.ts#L2

declare module 'noty' {
  exports = Noty;
}

This implies that you should follow your first attempt. However, it is actually shipped differently https://github.com/needim/noty/blob/master/lib/noty.js#L9-L18

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    ...
  else if(typeof exports === 'object')
    exports["Noty"] = factory();
...

Pay attention to the last part exports["Noty"] = factory(). It seems this is what is being picked up, rather than the first one. This means it equals to named export Noty

The issue you encountered is likely due to this mismatch in the export method. I recommend trying the following approach:

import * as $NOTY from 'noty';

const NOTY = ($NOTY as any).Noty as new (options: $NOTY.OptionsOrSomeThing): $NOTY;

// Proceed with using NOTY in your code
new NOTY();

Answer 6

It seems that the issue you are experiencing is due to NOTY exporting its main functionality in a commonjs way:

module.exports = NOTY;

To import it correctly into your code, you should use the import module syntax like this:

import * as NOTY from 'noty';

This export style is still used by many other libraries that have not switched to the modern ES6 syntax.

Update:

Based on their type definition export: https://github.com/needim/noty/blob/master/index.d.ts#L2

declare module 'noty' {
  exports = Noty;
}

This implies that you should follow your first attempt. However, it is actually shipped differently https://github.com/needim/noty/blob/master/lib/noty.js#L9-L18

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    ...
  else if(typeof exports === 'object')
    exports["Noty"] = factory();
...

Pay attention to the last part exports["Noty"] = factory(). It seems this is what is being picked up, rather than the first one. This means it equals to named export Noty

The issue you encountered is likely due to this mismatch in the export method. I recommend trying the following approach:

import * as $NOTY from 'noty';

const NOTY = ($NOTY as any).Noty as new (options: $NOTY.OptionsOrSomeThing): $NOTY;

// Proceed with using NOTY in your code
new NOTY();

Utilizing noty in a Aurelia application with Typescript

Answer №1

Answer №2

Answer №3

Similar questions

In order to use the serve command, it is necessary to run it within an Angular project. However, if a project definition cannot be located

There seems to be a mismatch in compatibility between the register() function in react-hook-form and the native input types

What are the reasons behind my decision not to utilize the correct Card component in React Bootstrap?

In an attempt to successfully retrieve data from a formatted XML API, I am working on making a straightforward API call using JavaScript/TypeScript

Incapable of adding a singular string to an array without altering the string's original value

Using TypeScript to specify precise types for ReactWrapper within the Enzyme library

Unable to extract numerical value from object using Dropdown (Angular 4)

Most efficient method of retrieving the properties of an object that may possibly contain another object within it

What is the most effective way to manage over 100 cases in Typescript without getting overwhelmed?

Error with SwitchMap on ActivatedRoute.paramMap

The parameters 'event' and 'payload' do not match in type

Angular Dialog Component: Passing and Populating an Array with Mat-Dialog

There is no corresponding index signature for type 'string' in Type

Transforming a singular function into a versatile, reusable function with the help of Typescript

The field 'password' is not found in the data type 'User | undefined'

Utilize React to iterate through an object using the .map

Generating objects dynamically using Angular 2 framework

The best approach to effectively integrate TypeScript and Fetch is by following the recommended guidelines

The module '@ngmodule/material-carousel' could not be located

What is preventing the dependency injection of AuthHttp (angular2-jwt) into a component?