Bundling typescript using webpack: the request of a dependency is an expression (+possible fix)

TypeScript Version: 3.9.6 and 4.0.0-dev.20200706

Search Terms:
webpack request of a dependency expression

Code

import ts from 'typescript';
console.log(ts)

Expected behavior:
Bundle successfully, and without warnings, using webpack.

Actual behavior:
Bundles successfully, but a warning is shown:

WARNING in ./node_modules/typescript/lib/typescript.js 5710:41-60
Critical dependency: the request of a dependency is an expression

Playground Link:
N/A

Related Issues:
Couldn't find any that talked about this issue

Suggested fix:

The warning is printed due to the following dynamic require call:

require: function (baseDir, moduleName) {
    try {
        var modulePath = ts.resolveJSModule(moduleName, baseDir, nodeSystem);
        return { module: require(modulePath), modulePath: modulePath, error: undefined };
    }
    catch (error) {
        return { module: undefined, modulePath: undefined, error: error };
    }
}

Rather than calling require directly, create a helper function:

function requireModule(requestingModule, specifier) {
    return requestingModule.require(specifier)
}

And call it the following way:

return { module: requireModule(module, modulePath), modulePath: modulePath, error: undefined };

The resulting code will behave 1:1 in Node, while not triggering any warnings in bundlers trying to resolve these dynamic calls.

Riproduci l’avviso raggruppando l’import TypeScript mostrato con webpack, quindi esamina typescript/lib/typescript.js intorno a 5710:41-60. Valuta l’approccio requireModule proposto e verifica che il bundle venga completato senza l’avviso critical-dependency, mantenendo al contempo il comportamento di Node descritto nell’issue.