{"id":15645298,"url":"https://github.com/markerikson/react-prod-sourcemaps","last_synced_at":"2025-04-13T10:58:20.883Z","repository":{"id":191315077,"uuid":"684357909","full_name":"markerikson/react-prod-sourcemaps","owner":"markerikson","description":"A tool to update app sourcemaps with the original code of ReactDOM's production builds","archived":false,"fork":false,"pushed_at":"2024-09-13T18:37:07.000Z","size":1748,"stargazers_count":58,"open_issues_count":4,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-27T02:11:45.584Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markerikson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-29T01:17:15.000Z","updated_at":"2024-12-18T01:01:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"a1fc1fa8-5e67-435a-9e2d-8ce5ae32dd8b","html_url":"https://github.com/markerikson/react-prod-sourcemaps","commit_stats":null,"previous_names":["markerikson/react-prod-sourcemaps"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markerikson%2Freact-prod-sourcemaps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markerikson%2Freact-prod-sourcemaps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markerikson%2Freact-prod-sourcemaps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markerikson%2Freact-prod-sourcemaps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markerikson","download_url":"https://codeload.github.com/markerikson/react-prod-sourcemaps/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248703196,"owners_count":21148117,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T12:05:54.791Z","updated_at":"2025-04-13T10:58:20.859Z","avatar_url":"https://github.com/markerikson.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-prod-sourcemaps\n\nA tool to update app sourcemaps with the original code of ReactDOM's production builds .\n\n## Background\n\nReact has never shipped sourcemaps for any of its production build artifacts. This makes it impossible to meaningfully debug errors inside of React in production. React's source code is already hard to understand in its original form - trying figure out what's happening when all you have is single-character variable names and no comments is _impossible_.\n\nIn 2023 I filed a React PR at https://github.com/facebook/react/pull/26446 that updated React's build pipeline to generate sourcemaps for production artifacts. It was eventually merged, but then later reverted. Instead, React 19 will ship with optimized but unminified prod artifacts. That means that app build steps will minify React's prod artifacts themselves, and thus React's source will be debuggable.\n\nHowever, that doesn't help debug _current_ versions of React.\n\nI've done the work to check out the tagged source code for earlier React versions, rebuilt those versions locally, and verified that the artifacts are byte-for-byte identical. I've then backported the build pipeline changes from my PR onto those older checked-out versions, and built the sourcemaps that _would_ have been generated for each version.\n\nThe actual build changes used can be seen here:\n\n- https://github.com/facebook/react/compare/v18.2.0...replayio:react:feature/react-sourcemaps-18.2.0\n\n## Contents\n\nThis package includes:\n\n- the actual sourcemaps\n- logic to search an input sourcemap for specific React and ReactDOM prod artifacts by content hash and replace them with the \"original\" pre-minified bundle source via the sourcemaps\n- a CLI tool that will load a given input sourcemap file and rewrite it\n- a build tool plugin that will automatically replace React package sourcemaps found in the app bundle\n\n### React Versions\n\nThis package currently includes sourcemaps for React and ReactDOM for these versions:\n\n- 18.3.1\n- 18.2.0\n- 18.1.0\n- 17.0.2\n\n## CLI Usage\n\n```bash\nyarn add @acemarke/react-prod-sourcemaps\n./node_modules/.bin/react-prod-sourcemaps --inputFile path/to/your/appBuild/sourcemap.js.map\n# Output file will currently be written to sourcemap.remapped.js.map\n```\n\n## Build plugin usage\n\nThe build plugin is built using [unplugin](https://github.com/unjs/unplugin), meaning we currently supports webpack, esbuild, rollup, vite and rspack (experimental).\n\nThe plugin supports the following options:\n\n| key      | value    | required | default   | recommended | functionality                                                                                                       |\n| -------- | -------- | -------- | --------- | ----------- | ------------------------------------------------------------------------------------------------------------------- |\n| debug    | boolean  | no       | false     | false       | enables debug logging                                                                                               |\n| preserve | boolean  | no       | false     | false       | preserves original sourcemaps and outputs remapped sourcemaps under path/to/output/sourcemap/[name].js.remapped.map |\n| mode     | \"strict\" | no       | undefined | \"strict\"    | causes the build plugin to throw an error if no sourcemap files are generated by the build tool                     |\n\n\u003e **_Warning_**: if sourcemap generation is not enabled by your build tool (or if it is not setup correctly), the plugin will silently fail and not perform any sourcemap remapping. We recommend setting using mode: \"strict\" in case you want the plugin to error in that case.\n\nWebpack:\n\n```javascript\nimport { WebpackReactSourcemapsPlugin } from \"@acemarke/react-prod-sourcemaps\";\n\nmodule.exports = {\n  // ...webpack config\n  devtool: \"source-map\", // or any other option that generates separate .map.js files\n  plugins: [WebpackReactSourcemapsPlugin({ debug: false, preserve: false })],\n};\n```\n\nesbuild:\n\n```javascript\nimport { EsbuildReactSourcemapsPlugin } from \"@acemarke/react-prod-sourcemaps\";\n\nesbuild.build({\n  // ...esbuild config\n  sourcemap: true, // or any other option that generates separate .map.js files\n  plugins: [EsbuildReactSourcemapsPlugin({ debug: false, preserve: false })],\n});\n```\n\nRollup:\n\n```javascript\nimport { RollupReactSourcemapsPlugin } from \"@acemarke/react-prod-sourcemaps\";\n\nrollup({\n  // ...rollup config\n  output: {\n    sourcemap: true, // or any other option that generates separate .map.js files\n  },\n  plugins: [RollupReactSourcemapsPlugin({ debug: false, preserve: false })],\n});\n```\n\nVite:\n\n```javascript\nimport { ViteReactSourcemapsPlugin } from \"@acemarke/react-prod-sourcemaps\";\n\nvite.build({\n  // ...vite config\n  build: {\n    sourcemap: true, // or any other option that generates separate .map.js files\n  },\n  plugins: [ViteReactSourcemapsPlugin({ debug: false, preserve: false })],\n});\n```\n\n## Future Plans\n\n- Add sourcemaps for more React versions\n- Add more options to the CLI tool:\n  - Glob sourcemaps in a folder\n  - Overwrite original sourcemap paths\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkerikson%2Freact-prod-sourcemaps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkerikson%2Freact-prod-sourcemaps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkerikson%2Freact-prod-sourcemaps/lists"}