What are the steps for integrating and expanding a JavaScript library using rollup, TypeScript, and Angular 2?

I am currently working on a project called angular2-google-maps-test and I am interested in integrating and expanding upon the JS library found at js-marker-clusterer

npm install --save js-marker-clusterer

It seems that this library is not structured as a module.

function MarkerClusterer(map, opt_markers, opt_options) {
  // MarkerClusterer implements google.maps.OverlayView interface. We use the
  // extend function to extend MarkerClusterer with google.maps.OverlayView
  // because it might not always be available when the code is defined so we
  // look for it at the last possible moment. If it doesn't exist now then
  // there is no point going ahead :)
  this.extend(MarkerClusterer, google.maps.OverlayView);
  this.map_ = map;
...

}
window['MarkerClusterer'] = MarkerClusterer;

My goal is to achieve something similar to this:

// js-marker-clusterer.d.ts file
declare module "js-marker-clusterer" {
  export class MarkerClusterer {
    constructor(map: any, opt_markers?: any, opt_options?: any);
    map_: any;
    markers_: any[];
    clusters_: any[];
    ready_: boolean;
    addMarkers(markers: any[], opt_nodraw: boolean) : void;
    removeMarker(marker: any, opt_nodraw: boolean) : boolean;
    removeMarkers(markers: any[], opt_nodraw: boolean) : boolean;
  }
}

Then, I plan to extend that class in TypeScript

/// <reference path="./js-marker-clusterer.d.ts" />
export class MyMarkerClusterer extends MarkerClusterer {
  constructor(map: any, opt_markers?: any, opt_options?: any) {
    super(map, opt_markers, opt_options);
  }   
}

However, when using rollupjs, I keep encountering this error:

[21:20:47]  bundle failed: 'MarkerClusterer' is not exported by node_modules/js-marker-clusterer/src/markerclusterer.js  MEM: 469.6MB
            (imported by src/angular2-marker-clusterer/my-marker-clusterer.ts). For help fixing this 
            error see https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module

My assumption is that I need to make modifications to the rollup.config.js file, but my attempts to add it as a plugin have been unsuccessful.

  /**
   * plugins: Array of plugin objects, or a single plugin object.
   * See https://github.com/rollup/rollup/wiki/Plugins for more info.
   */
  plugins: [
    builtins(),
    //commonjs(),
    commonjs({
      namedExports: {
        'node_modules/angular2-google-maps/core/index.js': ['AgmCoreModule'],
        'node_modules/js-marker-clusterer/src/markerclusterer.js': ['MarkerClusterer']
      }
    }),

Answer №1

Honestly, I'm not too familiar with Typescript, but instead of using the commonjs plugin, you might want to consider giving the rollup-plugin-legacy a shot.

legacy({
    'node_modules/js-marker-clusterer/src/markerclusterer.js': 'MarkerClusterer'
})

Don't forget to adjust the import statement accordingly.

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

Having difficulty installing TypeScript on my machine

https://i.stack.imgur.com/l6COf.pngHaving trouble installing TypeScript with the following error: npm WARN registry Using outdated package data from https://registry.npmjs.org/ due to an error during revalidation. npm ERR! code E500 npm ERR! 500 Interna ...

Unlocking the Power of Passing Props to {children} in React Components

Looking to create a reusable input element in React. React version: "react": "17.0.2" Need to pass htmlFor in the label and use it in the children's id property. Attempting to pass props to {children} in react. Previously attempte ...

Incorporated iframe covering the entire browser window

Currently, I find myself in a strange predicament. The scenario involves a JSP+Servlet+Spring MVC application that is integrated within a parent application developed using Angular4 through an iframe. The issue arises when the Spring MVC app redirects to ...

Connect your Angular project on your local system

Having some trouble connecting my angular 13 project as a ui-component library. Successfully built the project and have the package stored in a dist folder. I then linked it to my primary project (angular 14) using "yarn link" and confirmed its presence as ...

Testing event handling in CdkDragDrop functionality

I've been experimenting with unit testing for my Angular application. Utilizing Angular Material, I have a component that incorporates the drag-drop CDK cdk drag-drop API. Here's what the HTML code looks like: <mat-card class="interventionCa ...

Is there a way to retrieve information from a different object?

Access the code on Plunker I am working with two data structures - ingredients and recipes [{ "id":"1", "name": "Cucumber" }, .. ] and [{ "id":"1", "name": "Salad1", "recipein":[1, 3, 5] }, { ... } ] My goal is to ...

Determine user connectivity in Angular 4 using Firebase

My current setup involves using Firebase for authentication with Google. However, I am encountering an issue where upon refreshing the page after being connected, I am unable to retrieve the Session/CurrentUser information. firebase.auth().onAuthStateChan ...

Is it a never-ending cycle of subscriptions within a subscription?

I am currently facing a challenge with using multiples/forEach subscribe inside another subscribe. My goal is to retrieve a list of objects and then fetch their images based on their ID. The code I have written so far looks like this: this.appTypeService. ...

Is Cognito redirect causing issues with Angular router responsiveness?

When employing social login via AWS Cognito, Cognito sends a redirect to the browser directing it to the signin redirect URL after signing in. In this case, the specified URL is http://localhost:4200/home/. Upon receiving this redirect, the application in ...

Is there a way to apply Validators.required just once for all required form fields in a Reactive Form?

Latest version of Angular is 4.4.3. In Reactive Form, you can use Validators.required for each form field as shown below: this.loginForm = this.fb.group({ firstName: ['', [Validators.required, Validators.maxLength(55)]], ...

How do I inform Jest that spaces should be recognized as spaces?

Here is some code snippet for you to ponder: import { getLocale } from './locale'; export const euro = (priceData: number): string => { const priceFormatter = new Intl.NumberFormat(getLocale(), { style: 'currency', currenc ...

Can you explain to me the syntax used in Javascript?

I'm a bit puzzled by the syntax used in this react HOC - specifically the use of two fat arrows like Component => props =>. Can someone explain why this works? const withLogging = Component => props => { useEffect(() => { fetch(`/ ...

How can you utilize createRef in React Native when working with TypeScript?

Trying to understand the usage of React.createRef() in react native with typescript, I encountered some errors while using it // ... circleRef = React.createRef(); componentDidMount() { this.circleRef.current.setNativeProps({ someProperty ...

You cannot use .addCursorFlag() with Mongoose Typescript

Here is my mongoose model that retrieves data from the database using a cursor. The cursor has a timeout of 10 minutes as per the documentation. const cursor = this.importRecordModel.find().cursor() I attempted to add the following code at the end of the ...

Exploring the attributes of optional features

Dealing with optional properties can be quite tedious. Consider the object test1 in TypeScript: interface Test { a?: { b?: { c?: { d?: string } } }; } const test1: Test = { a: { b: { c: { d: 'e' } } } }; Handling the absence of each proper ...

How can different styles be seamlessly combined when customizing Fabric components?

Imagine I am enhancing a Fabric component by adding custom styles and wishing to combine any additional styles passed in through its props. Here's the solution I've devised: const { TextField, Fabric , IButtonProps, mergeStyleSets } = window.Fab ...

Can one bring in a JavaScript function using webpack?

I have a unique JS library called: say-my-greeting.js function SayMyGreeting (greeting) { alert(greeting); } Now I want to incorporate this function in another (.ts) file; special-class.ts import SayMyGreeting from './say-my-greeting.js' ex ...

Encountering an Error When Trying to Run Npm Install in React-Native

I encountered an issue while trying to perform an npm install on my project, so I deleted the node modules folder in order to reinstall it. However, even after running npm install in the appropriate directory, I continued to face numerous errors in my term ...

Creating TypeScript utility scripts within an npm package: A Step-by-Step Guide

Details I'm currently working on a project using TypeScript and React. As part of my development process, I want to automate certain tasks like creating new components by generating folders and files automatically. To achieve this, I plan to create u ...

access denied on image links

While developing a web app with Angular5, I encountered an issue regarding retrieving image URLs from the 4chan API. Each post in my database contains an image URL, however, when I try to access it through my app, I receive a 403 forbidden error in the con ...