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.
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.