Bundlers
Payload has two official bundlers, the Webpack Bundler and the Vite Bundler. You must install a bundler to use the admin panel.
Install a bundler
Webpack (recommended):
1
yarn add @payloadcms/bundler-webpack
Vite (beta):
1
yarn add @payloadcms/bundler-vite
Configure the bundler
1
// payload.config.ts
2
3
import { buildConfig } from 'payload/config'
4
import { webpackBundler } from '@payloadcms/bundler-webpack'
5
// import { viteBundler } from '@payloadcms/bundler-vite'
6
7
export default buildConfig({
8
admin: {
9
bundler: webpackBundler() // or viteBundler()
10
},
11
})
What are bundlers?
At their core, a bundler's main goal is to take a bunch of files and turn them into a few optimized files that you ship to the browser. The admin UI has a root index.html entry point, and from there the bundler traverses the dependency tree, bundling all of the files that are required from that point on.
Since the bundled file is sent to the browser, it can't include any server-only code. You will need to remove any server-only code from your admin UI before bundling it. You can learn more about excluding server code section.
Next