Solved — Rxjs TypeError: Cannot destructure property ‘__extends’ of tslib.js

When I first encountered this error, my mind has only one word — WTF. And worst of all I can’t find anything on Google :) If you have faced something similar, then I hope this article will address your issue.

Photo by Mahdi Bafande on Unsplash

Note: at the time of writing this article, I’m using Webpack 4 and Rxjs 7 in a Typescript project.

The error message in full:

TypeError: Cannot destructure property '__extends' of '_tslib_js__WEBPACK_IMPORTED_MODULE_0___default.a' as it is undefined.

This is the error message that I saw in the browser’s console.

TLDR

Add this to your Webpack config:

alias: {
    tslib: 'tslib/tslib.es6.js',
},

If you want to learn more about this issue and the pain, read on!

The Issue

Okay, so after tonnes of Googling, and to no avail, I decided to dive into the source code. The first thing I did was to look at the source code right in the browser. So I clicked on the index.js?8a15 file link in the error message, and this is what I saw:

index.js

Hmm, seems like Webpack tried to import and destructure a series of properties from tslib . Once I got this information, I went ahead to find this tslib.js in my project’s node_modules directory.

Finding tslib.js

Source code of tslib.js

Surprise surprise! This file declared all the global variables but didn’t export anything. Also, the file declared 2 anonymous functions on lines 40 and 63 but didn’t even call them!

I’m not an expert in writing NPM libraries or polyfills, but this seems like a big red flag to me. Diving further into the body of the anonymous function in line 63, (I could be wrong) it seems like the function attempts to export the global variables __extends , __assign and etc. However, the thing is, this file did not call the exporter function!

At this point, the error started to make sense to me. The file tslib.js is not exporting anything, and yet we are trying to import variables from this file, hence the error!

I knew that in order for me to fix this error, I need to somehow export those global variables. Then a file called tslib.es6.js in the tslib folder caught my attention.

tslib.es6.js

Bingo! This file is actually exporting something. This is the file that Webpack was supposed to import those variables. Now, the question is, how can I make Webpack use tslib.es6.js instead of tslib.js ?

Solution

The solution is simple. We can add a key alias in our Webpack config.

alias: {

    tslib: 'tslib/tslib.es6.js',
},

This will tell Webpack to resolve tslib by a predefined file. If you are unfamiliar with the alias property, you can check out the documentation here:

Resolve | webpack

That’s it! I hope you didn’t have to spend several painful hours just like I did to solve this problem.