Tips for stopping TypeScript from halting Webpack compilation due to undefined variables stated in Webpack's ProvidePlugin

Question

Tips for stopping TypeScript from halting Webpack compilation due to undefined variables stated in Webpack's ProvidePlugin

Is there a way to prevent WebPack's build process from failing when the TypeScript compiler throws errors about unresolved variables that are already configured in Webpack's ProvidePlugin settings?

webpack.config.js

plugins: [
...
new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            "_": "underscore",
            "underscore": "underscore"
            //'process.env.NODE_ENV': '"development"'
        }),

]

tsconfig.json

{
  "compilerOptions": {


    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "declaration": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Based on my experience, TypeScript doesn't recognize the variables injected into the module, causing the build to fail.

This is the build output

ERROR in ./src/file1.component.ts
(77,9): error TS2304: Cannot find name '$'.

ERROR in ./src/file2.component.ts
(78,13): error TS2304: Cannot find name '$'.

ERROR in ./src/file3.ts
(155,15): error TS2304: Cannot find name 'jQuery'.

ERROR in ./src/file4.ts
(108,9): error TS2304: Cannot find name '$'.

typescript webpack tsconfig webpack-plugin

Answer 1

Answer №1

I found a solution that worked better for me than ahz's answer. I prefer not to install typings globally or declare jQuery as any and losing all typechecking.

To address this, I created a file called global.d.ts with the following content:

import * as _jQuery from 'jquery';

declare global {
  const jQuery: typeof _jQuery;
  const $: typeof _jQuery;
}

With this in place, when running tsc, I no longer receive warnings like Cannot find name '$'..

This helpful tip was found here.

Answer 2

I found a solution that worked better for me than ahz's answer. I prefer not to install typings globally or declare jQuery as any and losing all typechecking.

To address this, I created a file called global.d.ts with the following content:

import * as _jQuery from 'jquery';

declare global {
  const jQuery: typeof _jQuery;
  const $: typeof _jQuery;
}

With this in place, when running tsc, I no longer receive warnings like Cannot find name '$'..

This helpful tip was found here.

Answer 3

Answer №2

It's important to remember that even with the ProvidePlugin in webpack, you still need to have jQuery and underscore declared as modules (externals or alias).

To ensure proper loading of these modules in TypeScript, I recommend using the following syntax:

import * as $ from 'jquery';
import * as _ from 'underscore';

Make sure to provide definition (.d.ts) files for these libraries, which can be done easily with a tool like typings.

typings install jquery --global
typings install underscore --global

If you're using ts-loader, it should handle this process automatically.

If you prefer not to use import statements, you can declare the libraries with typings definitions, or create simplified declarations like so:

declare var jQuery: any;
declare var $: any;

Answer 4

It's important to remember that even with the ProvidePlugin in webpack, you still need to have jQuery and underscore declared as modules (externals or alias).

To ensure proper loading of these modules in TypeScript, I recommend using the following syntax:

import * as $ from 'jquery';
import * as _ from 'underscore';

Make sure to provide definition (.d.ts) files for these libraries, which can be done easily with a tool like typings.

typings install jquery --global
typings install underscore --global

If you're using ts-loader, it should handle this process automatically.

If you prefer not to use import statements, you can declare the libraries with typings definitions, or create simplified declarations like so:

declare var jQuery: any;
declare var $: any;

Answer 5

Answer №3

In addition to the top answer, I would like to mention that there are some exceptions and ways to solve them. In my experience tackling this issue, I utilized Ant-Design and Redux.

One way to address this is by using the following code snippet:

import _Fake from 'fake-lib'

declare global {
  const Fake: typeof _Fake
}

This method works well for libraries that have been exported as a namespace (such as React). For such cases, you can confidently do this:

const x: Fake.Property // Success: Fake serves as a namespace
Fact.Function          // Success: Fake represents a concrete type containing Function

However, there were instances where certain libraries did not export as a namespace (like Redux) which led to issues like:

const x: Fake.Property // Failure: Fake is not recognized as a namespace
Fact.Function          // Success: Fake acts as a concrete type that includes Function

To tackle this problem, one workaround is to globally augment the library to be treated as if it were a namespace export:

You can achieve this by making modifications to your tsconfig.json file:

"compilerOptions": {
    ...
},
"include": [
    "./src/**/*",
    "./types/**/*"
]

Additionally, create a types/fake.d.ts file with the following content:

import * as Fake from 'fake-library'

export as namespace Fake
export = Fake

By implementing these changes, the global const declaration should function correctly as intended.

Answer 6

In addition to the top answer, I would like to mention that there are some exceptions and ways to solve them. In my experience tackling this issue, I utilized Ant-Design and Redux.

One way to address this is by using the following code snippet:

import _Fake from 'fake-lib'

declare global {
  const Fake: typeof _Fake
}

This method works well for libraries that have been exported as a namespace (such as React). For such cases, you can confidently do this:

const x: Fake.Property // Success: Fake serves as a namespace
Fact.Function          // Success: Fake represents a concrete type containing Function

However, there were instances where certain libraries did not export as a namespace (like Redux) which led to issues like:

const x: Fake.Property // Failure: Fake is not recognized as a namespace
Fact.Function          // Success: Fake acts as a concrete type that includes Function

To tackle this problem, one workaround is to globally augment the library to be treated as if it were a namespace export:

You can achieve this by making modifications to your tsconfig.json file:

"compilerOptions": {
    ...
},
"include": [
    "./src/**/*",
    "./types/**/*"
]

Additionally, create a types/fake.d.ts file with the following content:

import * as Fake from 'fake-library'

export as namespace Fake
export = Fake

By implementing these changes, the global const declaration should function correctly as intended.

Answer 7

Answer №4

Avoid mixing babel-loader and ts-loader(remove the latter) after migrating to babel 7! I trust this tip will prevent others from encountering debugging issues later on! Source

Answer 8

Avoid mixing babel-loader and ts-loader(remove the latter) after migrating to babel 7! I trust this tip will prevent others from encountering debugging issues later on! Source

Tips for stopping TypeScript from halting Webpack compilation due to undefined variables stated in Webpack's ProvidePlugin

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Next.Js Exported static HTML file is unable to locate CSS and JS files due to a wrongly configured path

The module for the class could not be identified during the ng build process when using the --

Retrieving and merging data from an API using Angular 6

Error in TypeScript React: 'Display' property is not compatible with index signature

In Visual Studio, the .js.map files and .js files seem to be mysteriously hidden, leaving only the TypeScript .ts files visible

Facing issues with utilizing branded keys in conjunction with object spreading?

Validation messages in an Angular application using Typescript are failing to display or disappear sporadically when applied to an HTML form that has

Is there a way to eliminate the numeric labels on the bars of a primeng bar chart?

Nestjs struggles with resolving dependencies

A new issue arises after merging in Google Datastore, as an unexpected property is

Express Server Providers for Angular 17's Server-Side Rendering

Incorporating an Ionic application into a Rails 4 application

Why aren't the child route components in Angular 6 loading properly?

Angular routing is showing an undefined ID from the snapshot

Include a string in every tuple

Encountering an undefined property error when trying to access 'userService' while implementing an async validator in Angular 12

Discover the method for converting a local file into a string

Trouble with querying NG elements using "queryAll(By.css)" in Angular and Jasmin unit testing

Cypress: Uncovering the method invoked by a button click

Leverage the exported data from Highcharts Editor to create a fresh React chart