{"id":16653685,"url":"https://github.com/trafitto/update-craco-react-app","last_synced_at":"2026-04-24T17:06:25.486Z","repository":{"id":138016111,"uuid":"454323672","full_name":"Trafitto/Update-Craco-React-App","owner":"Trafitto","description":"How to update craco react app","archived":false,"fork":false,"pushed_at":"2022-02-01T09:50:54.000Z","size":7,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-12T17:49:57.923Z","etag":null,"topics":["craco","eslint","react","react-scripts","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Trafitto.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-01T09:17:01.000Z","updated_at":"2022-02-07T08:49:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"199edeaa-f8f4-4f09-866a-e734c34045ca","html_url":"https://github.com/Trafitto/Update-Craco-React-App","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Trafitto/Update-Craco-React-App","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Trafitto%2FUpdate-Craco-React-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Trafitto%2FUpdate-Craco-React-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Trafitto%2FUpdate-Craco-React-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Trafitto%2FUpdate-Craco-React-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Trafitto","download_url":"https://codeload.github.com/Trafitto/Update-Craco-React-App/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Trafitto%2FUpdate-Craco-React-App/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32232727,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T13:21:15.438Z","status":"ssl_error","status_checked_at":"2026-04-24T13:21:15.005Z","response_time":64,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["craco","eslint","react","react-scripts","typescript"],"created_at":"2024-10-12T09:46:37.237Z","updated_at":"2026-04-24T17:06:25.472Z","avatar_url":"https://github.com/Trafitto.png","language":"TypeScript","readme":"# Update Craco React App\r\n\r\nHow I've touch the madness\r\n\r\n## Story 📖 \r\n\r\nOne day at work I found myself having to update the dependencies of a project, several people worked on this project, and I'm more of a backend guy so I limited myself to updating the dependencies making sure that everything worked without changing the tools used to develop\r\n\r\n## Things I have updated ✨\r\n\r\n- FROM `@craco/craco: ^5.6.4` TO `@craco/craco: 7.0.0-alpha.0`\r\n- FROM `firebase: ^8.3.0` TO `firebase: ^9.6.4`\r\n- FROM `axios: ^0.21.1` TO `axios: ^0.25.0`\r\n- FROM `react: ^16.13.1` TO `react: ^17.0.2`\r\n- FROM `react-dom: ^16.13.1` TO `react-dom: ^17.0.2`\r\n- FROM `redux: ^4.0.5` TO `redux: ^4.1.2`\r\n- FROM `swr: ^0.2.3` TO `swr: ^1.2.0`\r\n- FROM `@reduxjs/toolkit: ^1.5.0` TO `@reduxjs/toolkit: ^1.7.1`\r\n- FROM `@types/node: ^14.0.14` TO `@types/node: ^16.11.21`\r\n- FROM `@types/react: ^16.9.41` TO `@types/react: ^17.0.38`\r\n- FROM `@types/react-dom: ^16.9.8` TO `@types/react-dom: ^17.0.11`\r\n- FROM `@types/react-redux: ^7.1.16` TO `@types/react-redux: ^7.1.22`\r\n- FROM `@typescript-eslint/eslint-plugin: ^2.28.0` TO `@typescript-eslint/eslint-plugin: ^5.10.1`\r\n- FROM `@typescript-eslint/parser: ^2.28.0` TO `@typescript-eslint/parser: ^5.10.1`\r\n- FROM `craco-alias: ^2.1.1` TO `craco-alias: ^3.0.1`\r\n- FROM `eslint: ^6.8.0` TO `eslint: ^8.7.0`\r\n- FROM `eslint-config-prettier: ^6.10.1` TO `eslint-config-prettier: ^8.3.0`\r\n- FROM `eslint-plugin-prettier: ^3.1.4` TO `eslint-plugin-prettier: ^4.0.0`\r\n- FROM `eslint-plugin-react: ^7.20.0` TO `eslint-plugin-react: ^7.28.0`\r\n- FROM `react-scripts: ^3.4.4` TO `react-scripts: 5.0.0`\r\n- FROM `typescript: ^3.9.5` TO `typescript: ^4.5.5`\r\n\r\n\r\n## Things I've added\r\n\r\nThese packages were added because react-scripts 5.0 uses Webpack 5 which no longer supports polyfill.\r\n\r\n- `process: 0.11.10`\r\n- `stream-browserify: ^3.0.0`\r\n- `stream-http: ^3.2.0`\r\n- `timers-browserify: ^2.0.12`\r\n- `url: ^0.11.0`\r\n- `https-browserify: ^1.0.0`\r\n- `buffer: ^6.0.3`\r\n- `crypto-browserify: ^3.12.0`\r\n\r\n## Add Webpack config with Polyfill to your craco.config.js\r\n\r\nWebpack 5 doesn't support polyfill so you have to add dependencies yourself.\r\n\r\nIf you use Craco you can configure webpack in this way (in the repo there is the whole file) there is a redundancy in 'alias' and 'fallback.resolve' but I left it because this is how it works\r\n\r\n```\r\n\twebpack:{\r\n\t\tplugins: [\r\n\t\t\tnew webpack.ProvidePlugin({\r\n\t\t\t\tBuffer: ['buffer', 'Buffer'],\r\n\t\t\t}),\r\n\t\t\tnew webpack.ProvidePlugin({\r\n\t\t\t\tprocess: ['process'],\r\n\t\t\t}),\r\n\t\t],\r\n\t\talias: {\r\n\t\t\tcrypto: require.resolve('crypto-browserify'),\r\n\t\t\thttp: require.resolve('stream-http'),\r\n\t\t\thttps: require.resolve('https-browserify'),\r\n\t\t\ttimers: require.resolve('timers-browserify'),\r\n\t\t\tBuffer: require.resolve('buffer'),\r\n\t\t\tprocess: require.resolve('process'),\r\n\t\t\turl: require.resolve('url'),\r\n\t\t\tstream: require.resolve('stream-browserify'),\r\n\t\t},\r\n        resolve: {\r\n\t\t\tfallback: {\r\n\t\t\t  crypto: require.resolve('crypto-browserify'),\r\n\t\t\t  http: require.resolve('stream-http'),\r\n\t\t\t  https: require.resolve('https-browserify'),\r\n\t\t\t  timers: require.resolve('timers-browserify'),\r\n\t\t\t  buffer: require.resolve('buffer'),\r\n\t\t\t  process: require.resolve('process'),\r\n\t\t\t  url: require.resolve('url'),\r\n\t\t\t  stream: require.resolve('stream-browserify'),\r\n\t\t\t} \r\n\t\t  }\r\n    }\r\n```\r\n\r\n## Firebase\r\n\r\nFirebase change a lot from 8 to 9\r\n\r\nYou can temporarily use the functions of Firebase 8 by changing the imports (compatibility will be removed in future versions of Firebase, keep this in mind)\r\n\r\nFrom `import firebase from 'firebase/app'` TO `import firebase from 'firebase/compat/app'`\r\n\r\n## Eslint\r\n\r\nIf you have \r\n\r\n```\r\n// eslint-disable-next-line @typescript-eslint/ban-ts-ignore\r\n// @ts-ignore\r\n```\r\n somewhere in your code you will need to replace it with\r\n\r\n ```\r\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\r\n// @ts-ignore\r\n ```\r\n\r\n## Service Worker\r\n\r\nYou may need to update the service-worker.ts file and add serviceWorkerRegistration.ts\r\n\r\nThen in your index.tsx change\r\n\r\nFrom this\r\n```\r\nimport * as serviceWorker from './service-worker'\r\n\r\n.\r\n.\r\n.\r\n\r\nserviceWorker.unregister()\r\n```\r\n\r\nTo\r\n\r\n```\r\nimport * as serviceWorkerRegistration from './serviceWorkerRegistration';\r\n\r\n.\r\n.\r\n.\r\n\r\nserviceWorkerRegistration.unregister();\r\n```\r\n\r\n\r\n\r\n### NOTE\r\n\r\nI don't remember if there have been any other changes, in case I will update the repo\r\n\r\nFeel free to ask in case any steps are not clear\r\n\r\n\u003e Apes Together Strong","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrafitto%2Fupdate-craco-react-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrafitto%2Fupdate-craco-react-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrafitto%2Fupdate-craco-react-app/lists"}