How to best handle transpiling?

samtietjen

4 weeks ago

3 2

• Selected Answer
  

  samtietjen

  4 weeks 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
• 

  rrums123

  4 weeks 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.

• 

  willviles

  2 weeks 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.