Custom Nx plugins does not support default imports

81 Views Asked by At

I've run into an issue with my local Nx plugins after upgrading Nx to version 17.

The problem

I have a local Nx generator which uses Node path module like so:

// generator.ts
import path from 'path';

export async function generator(tree: Tree, schema: JSRemoteInputGeneratorSchema) {
  const { domain, tags, name } = schema;
  const directory = path.join(FEDERATED_ROOT_DIR, domain);

  // Rest of the logic...
}

The generator is hooked up to Nx using a javascript file like so:

// generator.js
// @filename generator.js
const { workspaceRoot } = require('nx/src/utils/workspace-root');
const { registerTsProject } = require('nx/src/plugins/js/utils/register');

registerTsProject(workspaceRoot, 'tsconfig.json');

module.exports = require('./generator.ts');

When I try to execute the generator above I get an error:

Cannot read properties of undefined (reading "join")

I have my tscofing.json file configured to support default module imports:

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noImplicitAny": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
}

The generator code runs just fine using Nx v16. Does anyone have a clue of what can be wrong? Thank you.

1

There are 1 best solutions below

3
r.a.m- On

After two days of digging in nx and @swc-node/register I found out this commit: https://github.com/nrwl/nx/commit/9a919a0383bcf54053606a74fcd2ccacc2064ae1

Long story short, Nx register util overrides your TS compiler options with tsconfig.base.json if it exists in your workspace root. The problem was that my base TS config did not contain two properties that are essential when one wants to use default module imports. The fix is to add these two props to tsconfig.base.json file:

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
  }
}