importHelpers + module: CommonJS and moduleResolution: node16 emits not defined variables

[eKazim]

🔎 Search Terms

importHelpers, CommonJS, moduleResolution, node16, tslib, __importDefault, esModuleInterop

🕗 Version & Regression Information

I'm using TypeScript 5.1.6. This issue has been happening for all recent versions of TypeScript, include nightly build and 4.9.5.

⏯ Playground Link

Requires more than 1 file

💻 Code

tsconfig:

{
  "compilerOptions": {
    "strict": true,
    "outDir": "dist",
    "module": "commonjs",
    "target": "es2015",
    "jsx": "react-jsx",
    "moduleResolution": "node16",
    "esModuleInterop": true,
    "importHelpers": true
  },
  "include": ["src"]
}

ts-file example:

import { ReactNode, HTMLAttributes, useEffect, forwardRef } from 'react';
import classnames from 'classnames';
import { someUtil } from './utils.js';

export interface Props extends HTMLAttributes<HTMLInputElement> {
  icon?: ReactNode;
}

const MyComponent = forwardRef<HTMLInputElement, Props>(({ icon, ...props }, ref) => {
  console.log('props', props);

  useEffect(() => {
    someUtil();
  }, []);

  const inputClassName = classnames('component', props.className);

  return (
    <input {...props} className={inputClassName} ref={ref} />
  )
});

export default MyComponent;

🙁 Actual behavior

Using"importHelpers": true and "module": "CommonJS" with "moduleResolution": "node16" (or "nodenext") generates code with broken links on imported variable tslib_1.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const classnames_1 = __importDefault(require("classnames"));
const utils_js_1 = require("./utils.js");
const MyComponent = (0, react_1.forwardRef)((_a, ref) => {
    var { icon } = _a, props = __rest(_a, ["icon"]);
    console.log('props', props);
    (0, react_1.useEffect)(() => {
        (0, utils_js_1.someUtil)();
    }, []);
    const inputClassName = (0, classnames_1.default)('component', props.className);
    return ((0, jsx_runtime_1.jsx)("input", Object.assign({}, props, { className: inputClassName, ref: ref })));
});
exports.default = MyComponent;

When executing this code there is error: __importDefault is not defined.
The code shows that variable tslib_1 is not used

🙂 Expected behavior

There should be a references to the imported variable tslib_1 here

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const utils_js_1 = require("./utils.js");
const MyComponent = (0, react_1.forwardRef)((_a, ref) => {
    var { icon } = _a, props = tslib_1.__rest(_a, ["icon"]);
    console.log('props', props);
    (0, react_1.useEffect)(() => {
        (0, utils_js_1.someUtil)();
    }, []);
    const inputClassName = (0, classnames_1.default)('component', props.className);
    return ((0, jsx_runtime_1.jsx)("input", Object.assign({}, props, { className: inputClassName, ref: ref })));
});
exports.default = MyComponent;

[rbuckton]

Duplicate of #40328

[rbuckton]

The actual culprit looks to have been "importHelpers": true with "esModuleInterop": true. Also, in recent versions of TS we report an error if you use "moduleResolution": "node16" with "module": "commonjs" as you should be using "module": "node16" instead.