Error with indexHtmlTransformer using @nx/angular:application executor

[jerkovicl]

Current Behavior

Following documentation about using indexHtmlTransformer option with @nx/angular:application executor here i am receiving this error:

Expected Behavior

indexHtmlTranformer option works as expected

GitHub Repo

Repro

Steps to Reproduce

1. Added indexHtmlTransformer option to project.json target

  "build-ssr": {
      "configurations": {
        "dev": {
          "extractLicenses": false,
          "fileReplacements": [
            {
              "replace": "apps/showcase/src/environments/environment.ts",
              "with": "apps/showcase/src/environments/environment.dev.ts"
            }
          ],
          "optimization": {
            "fonts": false,
            "styles": {
              "inlineCritical": false,
              "minify": false
            },
            "scripts": false
          },
          "serviceWorker": "ngsw-config.json",
          "sourceMap": true
        },
        "production": {
          "budgets": [
            {
              "maximumError": "10mb",
              "maximumWarning": "3mb",
              "type": "initial"
            },
            {
              "maximumError": "10kb",
              "maximumWarning": "6kb",
              "type": "anyComponentStyle"
            }
          ],
          "extractLicenses": true,
          "fileReplacements": [
            {
              "replace": "apps/showcase/src/environments/environment.ts",
              "with": "apps/showcase/src/environments/environment.prod.ts"
            }
          ],
          "indexHtmlTransformer": "scripts/index-html-transform.ts",
          "namedChunks": false,
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": {
            "hidden": true
          }
        }
      },
      "defaultConfiguration": "dev",
      "executor": "@nx/angular:application",
      "options": {
        "aot": true,
        "assets": [
          {
            "glob": "**/*",
            "ignore": ["**/*.scss"],
            "input": "apps/showcase/src/assets/",
            "output": "./assets/"
          },
        ],
        "browser": "apps/showcase/src/main.ts",
        "index": "apps/showcase/src/index.html",
        "inlineStyleLanguage": "scss",
        "outputPath": "dist/apps/showcase",
        "plugins": [],
        "polyfills": ["apps/showcase/src/polyfills.ts"],
        "styles": [
          "apps/showcase/src/styles.scss",
        ],
        "tsConfig": "apps/showcase/tsconfig.app.json",
        "scripts": []
      },
      "outputs": ["{options.outputDir}"]
    },

2. Function is :

export default function (indexContent: string): string {

  const $ = cheerio.load(indexContent);
  const baseUrl = 'https://www.xxx.com';
  $('head').append(`<link rel="preconnect" href="${baseUrl}">`);

  const minified: string = minifier.minify($.html(), {
    removeComments: true,
    removeAttributeQuotes: true,
    collapseWhitespace: true,
  });
  return minified;
}

Nx Report

Node   : 20.11.0
   OS     : win32-x64
   npm    : 10.2.4

   nx (global)        : 18.0.2
   nx                 : 18.0.2
   lerna              : 8.1.2
   @nx/js             : 18.0.2
   @nx/jest           : 18.0.2
   @nx/linter         : 18.0.2
   @nx/eslint         : 18.0.2
   @nx/workspace      : 18.0.2
   @nx/angular        : 18.0.2
   @nx/cypress        : 18.0.2
   @nx/devkit         : 18.0.2
   @nx/eslint-plugin  : 18.0.2
   @nx/plugin         : 18.0.2
   @nx/storybook      : 18.0.2
   @nrwl/tao          : 18.0.2
   @nx/web            : 18.0.2
   @nx/webpack        : 18.0.2
   typescript         : 5.3.3
   ---------------------------------------
   Community plugins:
   @compodoc/compodoc : 1.1.23
   @storybook/angular : 7.6.12
   ngx-build-plus     : 17.0.0
   ---------------------------------------
   Local workspace plugins:
         @fiyu/lib-toolkit

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[leosvelperez]

Thanks for reporting this!

Could you please provide a reproduction? I tried reproducing it with a new workspace, and it works correctly, so there might be something specific in your repo (maybe different TS settings) that could be causing the issue.

[jerkovicl]

@leosvelperez i think the cause is same like this issue #21639 , because i am also getting that error if i am using any imports inside transformer function file

I suspect it's due to fact that tsconfig used for transpilation (tsconfig.app.json) specifies target: es2022 and it's not compatible. This exact same setup works in 17.x.

My tsconfig.app.json file:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "types": ["node"],
    "module": "es2022",
    "target": "es2022",
    "lib": ["es2022", "dom"],
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "strictBindCallApply": false,
    "strictNullChecks": false,
    "noImplicitReturns": true,
    "noImplicitOverride": false,
    "noPropertyAccessFromIndexSignature": false,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "sourceMap": false,
    "declaration": false,
    "declarationMap": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "strictNullInputTypes": false,
    "strictInputTypes": false,
    "strictAttributeTypes": false,
    "fullTemplateTypeCheck": true,
    "trace": false
  },
  "files": ["src/main.ts", "src/polyfills.ts"],
  "exclude": [
    "jest.config.ts",
    "cypress/**/*",
    "cypress.config.ts",
    "**/*.cy.ts",
    "**/*.cy.js",
    "**/*.cy.tsx",
    "**/*.cy.jsx",
    "**/*.stories.ts",
    "**/*.stories.js"
  ]
}

[jerkovicl]

@leosvelperez repro here

run build with nx run products:build

[leosvelperez]

Thanks for the repro. I'll take a look.

i am also getting that error if i am using any imports inside transformer function file

That's a different issue and sort of a limitation due to when we unregister the TS transpiler. The transpiler is unregistered once we've loaded the file being transpiled. If the file (or any transitively imported file) contains code that will be executed later and that code imports another file, the transpiler won't be registered at that point in time. So currently, only top-level imports are correctly processed.

[jerkovicl]

@leosvelperez ok i understand , in the repro, this file tools/scripts/index-html-transform.ts is transformer function and even if you use top level imports you still get error Cannot use import statement outside a module thats why i thought its related.
But first lets see about export token error:)

[leosvelperez]

So, at least in the provided reproduction, it's an issue with the recently released @swc-node/[email protected]. If you downgrade it to version 1.6.8, it works correctly. Our generators add that package with version ~1.6.7, so that version was probably added manually.

Could you confirm that downgrading the @swc-node/register version to 1.6.8 solves the issue in your actual project?

[jerkovicl]

@leosvelperez yeah i can confirm downgrading package @swc-node/register to ~1.6.8 solves the both issues, export token and using top level imports, thx for help!

[leosvelperez]

Awesome. I'll keep this open for now because I'm still looking into whether it's something we can workaround or take care of on our side or if it's plainly a bug from that new version.

[jerkovicl]

@leosvelperez something related to this change in new version possibly swc-project/swc-node#727 ?

[leosvelperez]

I got to the bottom of it, and it's an issue on our side that got uncovered by this fix swc-project/swc-node@2f0199b (the change was made some time ago, but it was only released in 1.8.0).

So, @swc-node/register now correctly uses the provided compiler options. On our side, we've always provided those compiler options, but up to now, they were ignored, and the root tsconfig file was read by @swc-node/register. While it's reading the root tsconfig, we're actually getting the compiler options from the project tsconfig. Reading the compiler options parses the files that will belong to the program and in cases where the file being transpiled is not part of those files, it's not transpiled at all. That's why the error happens.

I'll push a fix for that.

[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.