Extension reloads too frequently during development (npm run dev)

[mahek-crest]

Extension reloads too frequently during development (npm run dev)

Description

I am facing an issue where the extension keeps refreshing continuously when running npm run dev, and eventually, I get the error:

"This extension reloaded itself too frequently."

This makes it difficult to test and debug the extension during development.

Steps to Reproduce For React JS Template

1. Clone the repository and install dependencies:

npm i

2.Run the development mode:

npm run dev

3. Load the extension into Chrome via chrome://extensions/.
   4.Observe that the extension keeps refreshing repeatedly until the error appears.

[mpodreshetnikov]

I also have the issue. Any updates to resolve?

PS I think that problem is in vite packege. When I use vite version 4.4.11 bug disappeared,

my package.json devDependencies

"devDependencies": {
    "@crxjs/vite-plugin": "^2.0.0-beta.28",
    "@types/chrome": "^0.0.246",
    "@types/lodash": "^4.17.13",
    "@types/luxon": "^3.4.2",
    "@types/react": "^18.2.28",
    "@types/react-dom": "^18.2.13",
    "@vitejs/plugin-react": "^4.3.3",
    "gulp": "^4.0.2",
    "gulp-zip": "^6.0.0",
    "prettier": "^3.0.3",
    "typescript": "^5.2.2",
    "vite": "4.4.11"
  }

[mahek-crest]

I resolved the issue caused by Vite updates by implementing the following solution:

legacy: {
   skipWebSocketTokenCheck: true,
},

and (optional, add port according to your application)

server: {
   port: 5173,
   strictPort: true,
   hmr: {
     port: 5173,
   },
}

Additionally, I referred to this GitHub issue - 74 for further insights while troubleshooting. This configuration helped resolve the issue effectively.