Setting up Webpack to compile without reliance on external modules: A step-by-step guide

I am facing an issue with a third-party library that needs to be included in my TypeScript project. The library is added to the application through a CDN path in the HTML file, and it exports a window variable that is used in the code.

Unfortunately, this package is not available as an npm module. When I try to run the webpack build, I encounter the following error message: 

error TS2304: Cannot find name 'CUSTOM_WINDOW_VARIABLE'.

In an attempt to resolve this issue, I added the following code snippet in the webpackconfig.js file:

    externals: {
      CUSTOM_WINDOW_VARIABLE: "CUSTOM_WINDOW_VARIABLE",
    },

Despite adding this configuration, I continue to receive the same error. Can anyone advise on how to instruct webpack to ignore these global variables during the build process or convert them from CUSTOM_WINDOW_VARIABLE to window.CUSTOM_WINDOW_VARIABLE?

javascripttypescriptwebpack

Answer №1

It seems that the issue you are facing is not related to webpack, but rather stemming from ts-loader which utilizes the tsc compiler for your tsx? files. To resolve this, you may need to define the type for the global value available on window by following these steps:

  • Create a new typing directory and add a file named types/global.d.ts (you can choose any name you prefer, using my suggestion if you're unsure) with the following content:
// global.d.ts

// Define your custom type here
declare const CUSTOM_WINDOW_VARIABLE: any;
  • Ensure that your tsconfig.json file located at the root of your repository includes the types directory in the include configuration like so:
// tsconfig.json
{
  "include": ["types", ...]
}

This should resolve the issue you are experiencing.

NOTE: If you are not importing your library as externals, there is no need to configure the externals property in your webpack.config file

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

Sharing data between sibling components becomes necessary when they are required to utilize the *ngIf directive simultaneously

Within my parent component, I am hosting 2 sibling components in the following manner: <div *ngif="somecode()"> <sibling1> </sibling1> </div> <div *ngif="somecode()"> <sibling1 [dataParams]=sibling1object.somedata> ...

javascriptangularangular6

Using two variables for iteration in Vue.js v-for loop

Can you create a v-for loop with two variables? I attempted the following, but it did not function as expected <ul id="example-1"> <li v-for="apple in apples" v-for="banana in bananas"> {{ apple .message }} {{ banana .message }} & ...

javascriptvue.js

Disregarding TypeScript import errors within a monorepo ecosystem

In my Turborepo monorepo, I have a Next.js app package that imports various components from a shared package. This shared package is not compiled; it simply contains components imported directly by apps in the monorepo. The issue arises with the shared co ...

javascripttypescript

Issue: Unhandled promise rejection: BraintreeError: The 'authorization' parameter is mandatory for creating a client

I'm currently working on integrating Braintree using Angular with asp.net core. However, I've encountered an issue that I can't seem to solve. I'm following this article. The version of Angular I'm using is 14, and I have replicate ...

javascriptangulartypescriptasp.net-corebraintree

Transforming a PHP cURL call to node.js

Currently exploring the possibility of utilizing the Smmry API, however, it seems that they only provide PHP API connection examples. Is there anyone who could assist me in adapting it into a JS request? My requirement is simple - I just need it to analyz ...

javascriptphpnode.jsapirequest

Is it possible to redirect any web traffic using an authentication script?

Scenario: I'm currently working on a social networking project and I'm looking for a way to validate every redirect or refresh by directing the user through another script before reaching their final destination. I've considered using a &apo ...

phpjavascripthtmlajaxapache

Is there a way to update the data on a view in Angular 9 without the need to manually refresh the page?

Currently, I am storing information in the SessionStorage and attempting to display it in my view. However, there seems to be a timing issue where the HTML rendering happens faster than the asynchronous storage saving process. To better illustrate this com ...

javascriptangulartypescript

When utilizing Expo, importing a module may result in returning null

I've been attempting to incorporate a compass module into my project using expo and react native, but I'm encountering some issues. Check out the library here The problem arises when I try to import the module. Here's the error message I r ...

javascriptreactjsreact-nativeimportexpo

tips for exporting database information to an excel file with the help of ajax request and javascript

Recently, I built an application using NDWS with sapui5 _javascript. Within the application, there is a table that contains data synced with the server's database. My goal is to retrieve this data from the table and export it to an Excel document. Her ...

javascriptajaxexcelsapui5

Create and release an NPM package using two different design patterns

I have a package that is compiled into a UMD format using Typescript and then transformed into global variables using Webpack. I need to stick with Typescript, so a more flexible UMD pattern is not possible. The goal is to allow applications consuming the ...

npmwebpackumd

Utilizing the $scope variable within an event in the Google Maps API

I am having an issue using $scope within this function. Where should I define the argument $scope so that it works properly? Thank you Below is the basic structure of my code with key lines included: myApp.controller('myCtrl', ['$scope&ap ...

javascriptangularjsgoogle-maps

Enabling Event bus suggestions for Typescript: A step-by-step guide

Hello, I've encountered an issue while attempting to add types for the TinyEmitter library. Specifically, I need to define two methods. First: addEventListener(e: string, (...args: any[]) => void): void; Second: emit(e: string, ...args: any[]): vo ...

javascripttypescriptevent-bus

Issue with importing MomentJS globally in TypeScript

When it comes to defining global external modules in TypeScript, there is a useful option available. For instance, if you have jQuery library loaded externally, you can set up a global definition without having to include its duplicate in the TypeScript bu ...

typescriptwebpackmomentjs

What is the best approach for implementing line coverage for object literal in Typescript Mocha unit-tests?

Lead: I am a newcomer to using typescript and writing unit tests with Mocha and Chai. Question: Can anyone provide tips on achieving 100% line coverage in unit tests for an object literal that isn't within a class? I want to avoid going static if pos ...

node.jstypescriptunit-testingmocha.jschai

Exploring the use of generic types in TypeScript interfaces

I have the following two interfaces: export interface TestSchema<S> { data: S; description: string; } export type someType = 'option1' | 'option2'; export interface AnotherInterface { primary: string; secondary: someType; ...

angulartypescript

The functionality of clicking on a jQuery-generated element seems to be malfunctioning

When using Jquery, I am able to create an element and assign it the class .book: jQuery('<div/>', { name: "my name", class: 'book', text: 'Bookmark', }).appendTo('body'); I then wanted to add funct ...

javascriptjqueryclick

Using JavaScript to empty input field when switching focus between input fields

I am experiencing an issue with clearing a input number field. Here is the code snippet in question: <input class="quantity_container" v-model="length.quantity" type="number" pattern="[0-9]*" inputmode="numeric" onfocus="if (this.value == &ap ...

javascripthtmlvue.js

Updating a property on an object during iteration

Currently, I am in the process of developing a Single Page Application using Laravel on the backend and Vue.js. I have two arrays that are crucial to my project: The first array is accessArray: ["BIU","CEO","Finance","HRD","Group"] The second array is a ...

javascriptjqueryvue.js

Designing access to data in JavaScript

As I work on developing my single page app, I find myself diving into the data access layer for the client-side. In this process, a question arises regarding the optimal design approach. While I am aware that JavaScript is callback-centric, I can't he ...

javascriptjquerysingle-page-application

"React - encountering issues with state being undefined when passing child state up through parent components

I am currently navigating the world of react and have encountered a hurdle. I find myself facing difficulties in updating the parent component based on changes in the child state. I was able to pass the child state to the parent by linking the child's ...

javascriptreactjs