TypeScript imports in Webpack config do not work

[muuvmuuv]

Current Behavior

Our Webpack config must be TypeScript because we have a lib that we import to resolve some config for webpack (with DEFINE, Sentry source-map upload etc.).

 >  NX   ⨯ Unable to compile TypeScript:

   apps/xxxxx/webpack.config.ts:34:29 - error TS2695: Left side of comma operator is unused and has no side effects.

   34     const configMf = await (0, module_federation_1.withModuleFederation)(module_federation_config_1.default);
                                  ~

   Pass --verbose to see the stacktrace.

Simplified it to:

import { withModuleFederation } from "@nrwl/angular/module-federation"

import mfc from "./module-federation.config"

export default async (config) => {
  const configMf = await withModuleFederation(mfc)

  return { ...config, ...configMf }
}

Expected Behavior

Allo Webpack config in TypeScript

GitHub Repo

No response

Steps to Reproduce

1. rename your webpack config to ts
2. update imports

Nx Report

>  NX   Report complete - copy this into the issue template

   Node : 18.15.0
   OS   : darwin arm64
   pnpm : 7.29.3

   nx                      : 15.8.7
   @nrwl/js                : 15.8.7
   @nrwl/jest              : 15.8.7
   @nrwl/linter            : 15.8.7
   @nrwl/workspace         : 15.8.7
   @nrwl/angular           : 15.8.7
   @nrwl/cli               : 15.8.7
   @nrwl/cypress           : 15.8.7
   @nrwl/devkit            : 15.8.7
   @nrwl/eslint-plugin-nx  : 15.8.7
   @nrwl/tao               : 15.8.7
   @nrwl/webpack           : 15.8.7
   typescript              : 4.9.5
   ---------------------------------------
   Community plugins:
   @ionic/angular           : 6.6.3
   ngx-extended-pdf-viewer  : 16.2.8
   @compodoc/compodoc       : 1.1.19
   @ionic/angular-toolkit   : 8.0.0
   @nxext/capacitor         : 15.7.0
   @nxext/ionic-angular     : 15.7.0
   @testing-library/angular : 13.4.0
   nx-stylelint             : 15.0.0

Failure Logs

No response

Additional Information

No response

[muuvmuuv]

I think this is a regression of some other ticket, but can't find nor remember which it was...

[muuvmuuv]

It is a follow up on #15561

[muuvmuuv]

Ok seems to be TypeScript, idk what NX can do in that case:

• Do not issue Left side of comma operator is unused and has no side effects error on (0, expr) this-removing pattern microsoft/TypeScript#48163
• (0, object.property)() produces TS2695 microsoft/TypeScript#35866
• Allow indirect calls microsoft/TypeScript#51989
• Error: (0 , _identifier.getUndoPath) is not a function #6612

[muuvmuuv]

Just tried TypeScript 5 on our codebase, which produces:

 >  NX   ⨯ Unable to compile TypeScript:

   libs/webpack/src/index.ts:6:7 - error TS2451: Cannot redeclare block-scoped variable 'webpack_1'.

   6 const webpack_1 = require("webpack");
           ~~~~~~~~~

     apps/xxxxxx/webpack.config.ts:6:7
       6 const webpack_1 = require("@xxxxxx/webpack");
               ~~~~~~~~~
       'webpack_1' was also declared here.


TSError: ⨯ Unable to compile TypeScript:
libs/webpack/src/index.ts:6:7 - error TS2451: Cannot redeclare block-scoped variable 'webpack_1'.

6 const webpack_1 = require("webpack");
        ~~~~~~~~~

  apps/xxxxxx/webpack.config.ts:6:7
    6 const webpack_1 = require("@xxxxxx/webpack");
            ~~~~~~~~~
    'webpack_1' was also declared here.

    at createTSError (/Users/marvin/Developer/xxxxxx/app/node_modules/.pnpm/ts-node@10.9.1_zlbzrxdj56n2qhafx752nt3nlm/node_modules/ts-node/src/index.ts:859:12)
    at reportTSError (/Users/marvin/Developer/xxxxxx/app/node_modules/.pnpm/ts-node@10.9.1_zlbzrxdj56n2qhafx752nt3nlm/node_modules/ts-node/src/index.ts:863:19)
    at getOutput (/Users/marvin/Developer/xxxxxx/app/node_modules/.pnpm/ts-node@10.9.1_zlbzrxdj56n2qhafx752nt3nlm/node_modules/ts-node/src/index.ts:1077:36)
    at Object.compile (/Users/marvin/Developer/xxxxxx/app/node_modules/.pnpm/ts-node@10.9.1_zlbzrxdj56n2qhafx752nt3nlm/node_modules/ts-node/src/index.ts:1433:41)
    at Module.m._compile (/Users/marvin/Developer/xxxxxx/app/node_modules/.pnpm/ts-node@10.9.1_zlbzrxdj56n2qhafx752nt3nlm/node_modules/ts-node/src/index.ts:1617:30)
    at Module.m._compile (/Users/marvin/Developer/xxxxxx/app/node_modules/.pnpm/ts-node@10.9.1_zlbzrxdj56n2qhafx752nt3nlm/node_modules/ts-node/src/index.ts:1618:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at require.extensions.<computed> (/Users/marvin/Developer/xxxxxx/app/node_modules/.pnpm/ts-node@10.9.1_zlbzrxdj56n2qhafx752nt3nlm/node_modules/ts-node/src/index.ts:1621:12)
    at Object.require.extensions.<computed> [as .ts] (/Users/marvin/Developer/xxxxxx/app/node_modules/.pnpm/ts-node@10.9.1_zlbzrxdj56n2qhafx752nt3nlm/node_modules/ts-node/src/index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Function.Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at Module.require (/Users/marvin/Developer/xxxxxx/app/node_modules/.pnpm/packages/nx/src/adapter/compat.ts:43:36)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/Users/marvin/Developer/xxxxxx/app/apps/xxxxxx/webpack.config.ts:6:19)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)

[muuvmuuv]

With latest TypeScript semver match and NX this is no longer an issue

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.