I've had a lot of issues with transpiling while integrating Payload into a Turborepo.
Take a look at this repo.
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?
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!
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.
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.