webpack: 5.0.0-rc.3 fails with tslib

Bug report

What is the current behavior?

Running webpack@5.0.0-rc.3 fails when importing rxjs (which uses tslib):

If the current behavior is a bug, please provide the steps to reproduce.

Details of this error are reproducible in https://github.com/philcockfield/webpack5-tslib-error The demo repo is a minimal webpack configuration using ts-loader that imports rxjs. It also behaves this way with vanilla JS and babel loaders.

What is the expected behavior? The page loads with no errors. This demo repo works fine with webpack@4.44.2 and then cleanly fails by flipping the version up to 5.0.0-rc.3

Other relevant information: webpack version: 5.0.0-rc.3, 5.0.0-rc.4 Node.js version: 12.16.3 Operating System: MacOS (10.15.7) Additional tools: -

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 45 (43 by maintainers)

Most upvoted comments

@orta This is caused by https://github.com/microsoft/tslib/pull/127

tslib/modules/index.js contains a import tslib from '../tslib.js'; but tslib/tslib.js doesn’t contain a default export. It only contains named exports. Becauses of this tslib is undefined in tslib/modules/index.js. webpack 4 is unaffected because it doesn’t support the exports field. Node.js is unaffected because it doesn’t support the __esModule flag. But in combination they lead to this error.

Unrelated from this adding an exports field to a package.json is most often a breaking change, because it breaks e. g. import "tslib/tslib.js". I would recommend to revert the backport.

sokra on Oct 9, 2020

If you really want to solve that with exports conditions you could use that:

    "type": "module",
    "exports": {
        ".": {
            "module": "./tslib.js",
            "import": "./modules/index.js",
            "default": "./tslib.js"
        },
        "./": "./"
    }

But I would recommend to change tslib.js to ESM in the next major and offer a transpiled tslib.cjs version in addition:

    "type": "module",
    "exports": {
        ".": {
            "module": "./tslib.js",
            "require": "./tslib.cjs",
            "default": "./tslib.js"
        },
        "./": "./"
    }

This doesn’t lead to duplication in webpack. It only leads to duplication in Node.js, but that’s not relelvant here.

The benefit of using an ESM version is that more optimizations are possible for ESM.

sokra on Oct 9, 2020

@guybedford don’t worry we will found better way, you can see blocking on the right side above

alexander-akait on Oct 9, 2020

Nice! 🍰 Congrats on the 5.0.0 release.

philcockfield on Oct 11, 2020

Seeing this too with @sentry/browser

aariacarterweir on Oct 9, 2020