{"id":22156149,"url":"https://github.com/leothorp/hide-cra-error-overlay","last_synced_at":"2026-05-08T01:32:48.251Z","repository":{"id":44390777,"uuid":"499949087","full_name":"leothorp/hide-cra-error-overlay","owner":"leothorp","description":"Hide the Create React App error overlay behind a \"Show Errors\" button.","archived":false,"fork":false,"pushed_at":"2022-07-23T21:47:14.000Z","size":37,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-12T18:04:42.097Z","etag":null,"topics":["react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leothorp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-04T22:24:51.000Z","updated_at":"2023-03-10T08:03:06.000Z","dependencies_parsed_at":"2022-07-15T01:46:59.098Z","dependency_job_id":null,"html_url":"https://github.com/leothorp/hide-cra-error-overlay","commit_stats":null,"previous_names":["leothorp/hide-cra-overlay"],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leothorp%2Fhide-cra-error-overlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leothorp%2Fhide-cra-error-overlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leothorp%2Fhide-cra-error-overlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leothorp%2Fhide-cra-error-overlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leothorp","download_url":"https://codeload.github.com/leothorp/hide-cra-error-overlay/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245289432,"owners_count":20591075,"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":["react"],"created_at":"2024-12-02T02:37:03.786Z","updated_at":"2026-05-08T01:32:43.223Z","avatar_url":"https://github.com/leothorp.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# hide-cra-error-overlay\n\n### Hide the Create React App error overlay behind a \"Show Errors\" button.\n\n### Installation\n\n```\n  npm install --save-dev hide-cra-error-overlay\n```\n\n### Usage\n\nIn src/index.js, add the following:\n\n```javascript\nif (process.env.NODE_ENV !== \"production\") {\n  import(\"hide-cra-error-overlay\").then(({ initHideOverlay }) =\u003e\n    initHideOverlay()\n  );\n}\n```\n\nThat's it! the overlay will be replaced with the \"Show Errors\" button from now on.\n\n### Screenshots\n\nBefore (overlay):\n\n\u003cimg src=\"https://user-images.githubusercontent.com/12928449/172033836-5daadd0e-d237-4546-9afa-5244cce43211.png\" width=\"400\" height=\"300\"\u003e\n\nAfter (button):\n\n\u003cimg src=\"https://user-images.githubusercontent.com/12928449/172033833-0b601939-8a87-4b76-afc9-2520c2554923.png\" width=\"400\" height=\"300\"\u003e\n\n### Why would someone use this?\n\nDuring development, Create React App displays a full-screen error overlay for webpack compilation errors. The config for this is only accessible by ejecting- but particularly with Typescript errors, sometimes you may just want to temporarily ignore these to be able to test your app.\nWhen imported, this module hides the error overlay whenever it is triggered. It also adds a small \"Show Errors\" button to the lower right of the screen- click this to toggle the original error overlay on/off at any time.\n\n### In Production\n\nAssuming that you follow the recommended usage above, there is no impact on production bundle size from using this. CRA's webpack config will strip out the contents of the NODE_ENV !== \"production\" conditional for the production build, and a dynamic import is used to prevent inclusion in the bundle unless that condition is met.\n\n### Config\n\nTo adjust the behavior, you can optionally pass a configuration object to `initHideOverlay` with any of the options in the example below. Values shown below are the defaults.\n\n```javascript\nif (process.env.NODE_ENV !== \"production\") {\n  import(\"hide-cra-error-overlay\").then(({ initHideOverlay }) =\u003e\n    initHideOverlay({\n      //HTML id(s) of the 'overlay' element to hide when it appears\n      //(assumed to be a direct child of document.body).\n      //can be a single string id, or an array of multiple ids to check for.\n      overlayId: [\n        \"webpack-dev-server-client-overlay\",\n        \"webpack-dev-server-client-overlay-div\",\n      ],\n\n      //whether or not to add the \"Show Errors\" button\n      withRestoreButton: true,\n\n      //disable hiding, restore original CRA behavior\n      disable: false,\n    })\n  );\n}\n```\n\n`initHideOverlay` can be invoked multiple times for different config at different points in execution (e.g., when a certain component is mounted).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleothorp%2Fhide-cra-error-overlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleothorp%2Fhide-cra-error-overlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleothorp%2Fhide-cra-error-overlay/lists"}