How to best handle transpiling?

[samtietjen]

I've had a lot of issues with transpiling while integrating Payload into a Turborepo.

Take a look at this repo.

1. Use npx create-payload-app to add a new app labeled "cms".
2. Open any Payload file and import a button from "ui".
3. Get all sorts of errors about import statements and package subpaths.

I've read the recent changelog, and for a moment I thought that I fixed the problem...until I didn't.

Honestly, I'm blindly editing tsconfig files hoping for some sort of cjs output that the configuration gods will bless. I don't really understand what the output should be or how I should arrive there.

How can external React libaries be properly handled in Payload?

Super appreciated!

Edit: Noticed Tsup doesn't support es5 as a target...Maybe that's what I'm running into? Does Payload need es5?

[samtietjen]

I think I've got it...Tsup won't compile to es5. Looks like Payload wants es5 and cjs, so I went for rollup instead. Thoughhh...I've been here before. Hopefully this is it though!

[rrums123]

Hey, can you please show how to transpile the package to cjs using rollup? I want to do the same but still can't. Thank you.

[willviles]

It'd be great if Payload exposed a simple way to transpile modules, similar to Next.js' transpilePackages array in next.config.js.

This would enable any non-compiled esm or ts package to be used by Payload.

Personally, this would be a massive win. It'd allow me to configure my Turborepo so there's no build step to compile ts/esm packages and would speed my dev workflow up a huge amount!

I've hacked it around with a custom webpack config using swc-loader.

config.admin.webpack = (config) => {
  const transpileModules = ['@acme/ui']

  config.module.rules.push({
    test: /\.(t|j)sx?$/,
    exclude: new RegExp(`node_modules/(?!(${transpileModules.join('|')})/).*`),
    use: [
      {
        loader: 'swc-loader',
        options: {
          jsc: {
            parser: {
              syntax: 'typescript',
              tsx: true
            },
            transform: {
              react: {
                runtime: 'automatic'
              }
            }
          },
        },
      },
    ],
  })
}

All works fine when running the dev server, but generating types or the GraphQL schema fails because the CLI commands aren't bundled with Webpack.