Webpack: Creating a shared global variable accessible across non-module scripts

I am facing a challenge with integrating Typescript UMD modules into legacy code that does not follow any module pattern.

My hope was to find a Webpack loader or plugin that could generate global variables for specific modules instead of treating them as modules.

For instance, I have a Typescript UMD module in a Node package:

node_modules/my-new-module

This module exports a function:

myNewFunction(){ }

My goal is to utilize this function in my legacy code like this:

myNewModule.myNewFunction(); //myNewModule should be accessible globally

Currently, my workaround involves manually loading all shared modules and assigning them to global variables. It's not the most efficient solution.

Is there a way for Webpack to handle this issue? Or perhaps there is another alternative that I haven't considered?

Thank you.

Answer №1

Utilizing Webpack allows you to make your module available as a library, generating a global variable:

If the library is specified and libraryTarget is not assigned, the default libraryTarget will be var according to the output configuration documentation. Refer to the output.libraryTarget for an exhaustive list of available options.

For further details, visit: https://webpack.js.org/guides/author-libraries/#add-librarytarget

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

Utilize ngx-translate with an array as interpolation values

When working with ngx-translate, I use the instant method to translate messages into the user's language. These messages are provided as JSON objects and some of them contain dynamic values: { "message.key": "First value is {{0}} and se ...

Implementing Typescript for React Navigation: Configuring navigationOptions effectively

Within a React Native app utilizing React Navigation, I am working on a screen component where I aim to set the title based on given parameters using the navigationOptions property like so: static navigationOptions = ({navigation}) => ({ title: nav ...

Can content projection be utilized from a child component in Angular?

Keep in mind, this example could be achieved without using content projection. I am just showing a simplified version here. Imagine having a component that displays lists of names in two separate elements: import { Component } from '@angular/core&ap ...

Uploading raw data to Firebase bucket

I am currently developing a nodejs/typescript application that leverages Firebase Functions, and I am facing a challenge with uploading a JSON object to a bucket. The issue arises from the fact that the JSON data is stored in memory and not as an actual fi ...

Utilizing Router Outlet in Angular to Access API Data

I've encountered an issue where I can't pass parent data from the ngOnInit route params to my child component, user-seminar. After some research and searching on Google, I found a solution involving services. To address this problem, I modified ...

Detecting Typescript linting issues in VSCode using Yarn version 3.2.3

Every time I try to set up a new react or next app using the latest yarn v3.2.3, my VS Code keeps showing linting errors as seen in the screenshot below. The main error it displays is ts(2307), which says Cannot find module 'next' or its correspo ...

The outcome of using Jest with seedrandom becomes uncertain if the source code undergoes changes, leading to test failures

Here is a small reproducible test case that I've put together: https://github.com/opyate/jest-seedrandom-testcase After experimenting with seedrandom, I noticed that it provides consistent randomness, which was validated by the test (running it multi ...

The parent class has not been specified

I am facing an issue with my parent class, HTTPConnection, which I intend to use as a network utility class in order to avoid redundant code. However, when attempting to utilize it, the file core.umd.js throws an error stating Uncaught ReferenceError: HTTP ...

Tips for selecting the best className type for material-ui components

Currently, I am integrating material-ui into a react app that is built using typescript. Within the material-ui framework, there is a feature called withStyles which allows styles to be injected into a component through its className. However, I am facing ...

The onClick function for a button is not functioning properly when using the useToggle hook

When the button is clicked, it toggles a value. Depending on this value, the button will display one icon or another. Here is the code snippet: export const useToggle = (initialState = false) => { const [state, setState] = useState(initialState); c ...

The occurrence of a loading error arises when attempting to load the second component, displaying the message 'The template instructed for component SidebarComponent is

My journey with Angular has just begun, and I decided to challenge myself by creating a simplistic dashboard. In order to achieve this, I developed two components called DashboardComponent and SidebarComponent. The DashboardComponent loads smoothly witho ...

Using TypeScript with React: Specifying a type when calling a React component

How should a type be passed into a component call? Within this scenario, the render prop APICall is utilizing a type parameter named MobileSplashReturn. Although this example is functional, it seems to be causing issues with prettier, indicating that it m ...

Error: The TypeScript aliases defined in tsconfig.json cannot be located

Having trouble finding the user-defined paths in tsconfig.json – TypeScript keeps throwing errors... Tried resetting the entire project, using default ts configs, double-checked all settings, and made sure everything was up-to-date. But still no luck. H ...

Several arrays within the filteredData (MatTableDataSource) are being utilized

Hey there, I could really use some assistance. I have this data stored in a filteredData variable within a MatTableDataSource. filteredData My goal is to display this data in two separate tables, but I'm encountering issues where nothing is being sh ...

Angular 2: Firebase fails to provide a response

I am facing an issue with retrieving data from my Firebase using Angular 2 and TypeScript. While console.log() works, I am unable to return the value into a variable. My DataService looks like this: import {Injectable} from "angular2/core"; import ' ...

Debugging is not possible for applications running on an Android device with Ionic 2

Instructions to replicate the issue: 1. Begin by creating a new project from the following repository: https://github.com/driftyco/ionic-starter-super 2. Execute the command `ionic run android` 3. Utilize chrome://inspect for debugging purposes The ...

The issue lies within typescript due to process.env.PORT being undefined

I am a newcomer to working with TypeScript. Even after importing and using the dotenv package, I am still encountering issues with getting undefined values. Do I need to declare an interface for the dotenv variables? import express,{Application} from &apo ...

What is the best way to inform TypeScript when my Type has been altered or narrowed down?

In my application, I have a class that contains the API code: export class Api { ... static requestData = async ( abortController: React.MutableRefObject<AbortController | null> ) => { // If previous request exists, cancel it if ...

Leveraging animations in Angular2 that are defined outside of a component

I've recently put together a basic component @Component({ selector: 'saved-overlay', templateUrl: './saved-overlay.html', exportAs: 'saved-overlay', animations: [ trigger('inOut', [ transition ...

Error class not being applied by Knockout validation

I've implemented knockout validation on a text input and the validation is working correctly. However, the errorMessageClass is not being applied to the error message. I must have made a mistake in my setup, but I can't seem to identify it. My H ...