Files
2025-08-01 14:31:45 +00:00

65 lines
1.6 KiB
Plaintext

---
title: Upload source maps for React
showStepsToc: true
---
import CLIDownload from '../_snippets/cli/download.mdx'
import CLIAuthenticate from '../_snippets/cli/authenticate.mdx'
import InjectSourceMap from './_snippets/inject-source-map.mdx'
import UploadSourceMap from './_snippets/upload-source-map.mdx'
import StepVerifySourceMapUpload from './_snippets/step-verify-source-map-upload.mdx'
<Steps>
<Step title="Install the PostHog CLI" badge="required">
<CLIDownload />
</Step>
<Step title="Authenticate the PostHog CLI" badge="required">
<CLIAuthenticate />
</Step>
<Step title="Output source maps for your framework" badge="required">
If you're using React with Vite, you can enable source maps in your `vite.config.js` file.
```js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
build: {
sourcemap: true, // +
}
})
```
If you're using another build tool like [webpack](https://webpack.js.org/configuration/devtool/) or [Rollup](https://rollupjs.org/configuration-options/#output-sourcemap), consult the documentation for your build tool to enable source maps.
</Step>
<Step title="Inject source map" badge="required">
<InjectSourceMap />
</Step>
<Step checkpoint title="Verify source map injection" subtitle="Confirm source map comments are present">
Confirm that the served files are injected with the correct source map comment in production in dev tools.
```js
//# chunkId=0197e6db-9a73-7b91-9e80-4e1b7158db5c
```
</Step>
<Step title="Upload source map" badge="required">
<UploadSourceMap />
</Step>
<StepVerifySourceMapUpload />
</Steps>