{"id":19529960,"url":"https://github.com/loopmode/carlo-webpack-react-hmr","last_synced_at":"2025-10-14T11:08:32.842Z","repository":{"id":140399662,"uuid":"181871962","full_name":"loopmode/carlo-webpack-react-hmr","owner":"loopmode","description":"A setup for chrome/carlo-based react apps with webpack and HMR ","archived":false,"fork":false,"pushed_at":"2019-04-17T13:07:39.000Z","size":71,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-08T16:26:26.719Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/loopmode.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":"2019-04-17T10:50:04.000Z","updated_at":"2019-07-20T01:26:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"61f9a478-cdef-441b-b341-51cf5e80e549","html_url":"https://github.com/loopmode/carlo-webpack-react-hmr","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loopmode%2Fcarlo-webpack-react-hmr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loopmode%2Fcarlo-webpack-react-hmr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loopmode%2Fcarlo-webpack-react-hmr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loopmode%2Fcarlo-webpack-react-hmr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/loopmode","download_url":"https://codeload.github.com/loopmode/carlo-webpack-react-hmr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240783109,"owners_count":19856776,"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-11-11T01:28:16.384Z","updated_at":"2025-10-14T11:08:27.812Z","avatar_url":"https://github.com/loopmode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# carlo-webpack-react-hmr\n\nThis is a boilerplate repo for a carlo-based app with react, webpack, webpack-dev-server and HMR.\n\nCarlo allows us to build native apps that run in Chrome. However, what makes it different from Electron is that it doesn't bundle its own browser instance, but instead relies on Chrome or Chromium being already installed on the system.\n\nBased on [carlo](https://www.npmjs.com/package/carlo), [carlo-webpack](https://www.npmjs.com/package/carlo-webpack) and [react-hot-loader](https://www.npmjs.com/package/react-hot-loader).\n\n## Prerequisites\n\n-   [Chrome](https://www.google.com/chrome/) or [Chromium](https://www.chromium.org/getting-involved/download-chromium) must be installed\n-   [Node.js](https://nodejs.org/en/download/) v10 or newer must be installed\n\n## Installation\n\n```bash\ngit clone https://github.com/loopmode/carlo-webpack-react-hmr.git\ncd carlo-webpack-react-hmr\nnpm install\n```\n\n### Development\n\nStart the development environment:\n\n```bash\nnpm start\n```\n\n## HMR and react-hot-loader\n\nThe setup works now, but a few changes to the default or recommended setup were necessary.\n\n### react-dom patch\n\nThe only way to effectively patch `react-dom` was the [yarn name resolution](https://github.com/gaearon/react-hot-loader#react--dom) method (having `react-dom@npm:@hot-loader/react-dom` as a dependency).  \nNone of the other described methods worked in this setup - the console warning about unpatched react-dom kept showing up.\n\n### marking as \"hot\"\n\nThe default method of marking components as \"hot\" did not work:\n\n```jsx\n// this does not work\nimport { hot } from 'react-hot-loader/root';\n...\nexport default hot(App);\n```\n\nHowever, the method described in [#1082](https://github.com/gaearon/react-hot-loader/issues/1082) does work:\n\n```jsx\n// this works\nimport { hot } from \"react-hot-loader\";\n...\nconst withHMR = hot(module);\nexport default withHMR(App);\n```\n\n### webpack-dev-server hotOnly\n\nIn order to get rid of the [`maximum call stack size`](https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md#uncaught-rangeerror-maximum-call-stack-size-exceeded) error, it was necessary to switch the webpack dev server from `hot` to `hotOnly`:\n\n```js\n    devServer: {\n        hot: false,\n        hotOnly: true\n    }\n```\n\nWithout that, while HMR itself works just fine, the error happens after each hot reload and is displayed in the console.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floopmode%2Fcarlo-webpack-react-hmr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Floopmode%2Fcarlo-webpack-react-hmr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floopmode%2Fcarlo-webpack-react-hmr/lists"}