How to import another module from transformer

[mribbons]

I'm implementing a TypeScript transformer for tsx --loader and trying to use the same transformer module with ts-patch.

However, when importing a function from another module inside the transformer (tsx-loader), I get the following error:

Error: Cannot find module './tsx-loader'

Project Setup
I'm using pnpm and my dependencies include:

"devDependencies": {
  "@jest/globals": "^29.7.0",
  "@types/jest": "^29.5.14",
  "@types/node": "^20.x.x",
  "esm": "^3.2.25",
  "jest": "^29.2.1",
  "nodemon": "^3.1.9",
  "ts-jest": "^29.2.5",
  "ts-patch": "^3.3.0",
  "tsx": "^4.19.2",
  "typescript": "^5.7.3"
}

My tsconfig-transform.json:

{
  "extends": "./tsconfig.json",
  "moduleResolution": "node",
  "compilerOptions": {
    "outDir": "./dist-transformers",
    "plugins": [
      {
        "transform": "./src/transformers/src/sample-transformer.ts",
        "import": "default",
        "after": true
      }
    ]
  },
  "include": ["./src/transformers/src"]
}

My main tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "outDir": "./dist/cjs",
    "declaration": true,
    "declarationDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*", "vite-env.d.ts"]
}

Transformer Code (sample-transformer.ts):

import type * as ts from 'typescript'
import type { TransformerExtras, PluginConfig } from 'ts-patch'
import { nameofTransformer } from './tsx-loader'

/** Runs the nameof transformer */
export default function (program: ts.Program, pluginConfig: PluginConfig, { ts: tsInstance }: TransformerExtras) {
  const nodeTransformer = nameofTransformer(program)

  return (ctx: ts.TransformationContext) => {
    const { factory } = ctx

    return (sourceFile: ts.SourceFile) => {
      function visit(node: ts.Node): ts.Node {
        const transformed = tsInstance.visitNode(sourceFile, nodeTransformer(ctx))
        if (!transformed || !tsInstance.isSourceFile(transformed)) {
          throw new Error('Transformation did not return a SourceFile')
        }
        return transformed
      }
      return tsInstance.visitNode(sourceFile, visit)
    }
  }
}

Build Command

"build:cjs": "tsc --project tsconfig-transform.json --module CommonJS --outDir ./dist/cjs",

Error Message

tsc --project tsconfig-transform.json --module CommonJS --outDir ./dist/cjs
...
Error: Cannot find module './tsx-loader'
Require stack:
- C:\Users\Username\AppData\Local\Temp\tsp\esm\bc4a842e526b8ea983bfcf12293b4f6c.mjs
- C:\code\amazo\shared\src\transformers\src\sample-transformer.ts
- C:\code\amazo\node_modules\.pnpm\[email protected]\node_modules\typescript\lib\_tsc.js
- C:\code\amazo\node_modules\.pnpm\[email protected]\node_modules\typescript\lib\tsc.js
- C:\code\amazo\node_modules\.pnpm\[email protected]\node_modules\typescript\bin\tsc

Why is ts-patch unable to resolve tsx-loader when tsc runs?

[mribbons]

I got it working by bundling into a single script using vite.
Note that because I'm working in a package with "type": "module", I had to use cjs extensions to resolve missing import errors.

I'm not sure, but it's possible that type: module was also causing the issue with typescript imports, as ts-patch seems to want CommonJS modules.

Install vite:

pnpm add -D vite vite-plugin-dts

vite.config.ts:

import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'

export default defineConfig({
  build: {
    lib: {
      entry: './src/transformers/src/sample-transformer.ts',
      formats: ['cjs'],
      fileName: () => `transformer.bundle.cjs`
    },
    rollupOptions: {
      external: ['typescript', 'fs', 'fs/promises', 'path', 'node:fs']
    },
    outDir: 'dist-transformers',
    minify: false,
    target: 'node16'
  },
  plugins: [dts()]
})

tsconfig-transform.json:

{
  "extends": "./tsconfig.json",
  "moduleResolution": "node",
  "compilerOptions": {
    "module": "CommonJS",
    "outDir": "./dist-transformers",
    "plugins": [
      {
        "transform": "./dist-transformers/transformer.bundle.cjs",
        "import": "default",
        "after": true
      }
    ]
  },
  "include": ["./src"]
}

additional build script in package.json:

"build:cjs:transformer": "vite build"

Build steps:

pnpm build:cjs:transformer
pnpm build:cjs

🎉