How to best handle transpiling?

default discord avatar
samtietjen
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
    samtietjen
    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
    rrums123
    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
    willviles
    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']
    
      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.

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

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

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