How to best handle transpiling?

default discord avatar
7 months ago
3 2

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?

  • default discord avatar
    7 months ago

    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!

    1 reply
  • default discord avatar
    7 months ago

    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.

  • default discord avatar
    6 months ago

    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']
        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.

Open the post
Continue the discussion in GitHub
Like what we're doing?
Star us on GitHub!


Connect with the Payload Community on Discord



Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.