Imported Typescript libs from outside project dir not compiled after upgrade keystone-6/core from 2.2.0 to 3.1.2

I upgraded keystone-6/core from 2.2.0 to 3.1.2 and we use it in a nx monorepo set up. I used to import some libs from outside the keystone app folder and simply use them without compiling them first from ts to cjs. Now i get this error when running keystone dev:

/Users/sjanmaat/code/[...]/libs/keystone-components/src/backend/index.ts:1
export * from './utils/slug-generator';
^^^^^^

SyntaxError: Unexpected token 'export'
    at compileFunction (<anonymous>)
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1055:15)
    at Module._compile (node:internal/modules/cjs/loader:1090:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/sjanmaat/code/npo/npo-engagement/apps/keystone/.keystone/config.js:353:23)

This is when I import something from a lib like so import { slugGenerator } from '@our-org/keystone-components/src/backend'. When i import it relatively though, it does compile. So import { slugGenerator } from '../../../../libs/keystone-components/src/backend' works.

In the keystone package.json I refer to the package as well:

{
...
"dependencies": {
   ...
   "@our-org/keystone-components": "^1.0.0",
}
...

I can also kind of circumvent the problem by compiling ts to cjs in each lib in separate processes, but i rather not and just have keystone build handle it. This is because i’m touching all at the same time and since these built files are not watched, it doesn’t trigger a hot reload.

I believe this has to do with the change to use esbuild under https://github.com/keystonejs/keystone/pull/7809. Is there a way to make esbuild handle these kind of imports?

Expected

I expect the imported libs to be compiled from ts to whatever target keystone needs and hot reloading works.

Extra info

The tsconfig, output from tsc --showConfig:

{
    "compilerOptions": {
        "rootDir": "../..",
        "outDir": "../../build",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "importHelpers": false,
        "target": "esnext",
        "module": "esnext",
        "lib": [
            "esnext"
        ],
        "jsx": "react",
        "skipLibCheck": true,
        "skipDefaultLibCheck": true,
        "baseUrl": "./",
        "paths": {
            "@our-org/keystone-components": [
                "libs/keystone-components/src/index.ts"
            ],
        },
        "noEmit": true,
        "isolatedModules": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "types": [
            "@types/jest"
        ],
        "typeRoots": []
    },
    "files": [
       ...(many files, all in the keystone folder)
    ],
    "exclude": [
        "../../.github",
        "../../build",
        "../../coverage",
        "../../node_modules",
        "../../tmp"
    ]
}

Context

Node Version v16.17.0 Yarn v1.22.19

[mmachatschek]

@stijnjanmaat

im using pnpm patch and pnpm patch-commit

https://pnpm.io/cli/patch https://pnpm.io/cli/patch-commit

there are similar ways to patch the files with yarn and npm but don’t know them from the top of my mind

[stijnjanmaat]

I eventually went with preconstruct, since we still use yarn 1, which doesn’t support patch. It’s some work to set up and a bit more hassle during development, since you have to preconstruct watch, but other than that, preconstruct is a nice tool for this use case.