FIX: ENOSPC Error During npm run dev in React Frontend App

[K-Chang32]

Describe the bug
I am using latest version of Ignite and do the same progress like 'https://docs.ignite.com/clients/react' step by step.
Whenever I run the command npm run dev, I encountered this error.

npm install && npm run dev

@ignt/react-template@0.6.1 preinstall
node preinstall.cjs

PRE-INSTALL Installing & building BlockPost-client-ts prior to webapp install

up to date, audited 77 packages in 5s

14 packages are looking for funding
run npm fund for details

1 moderate severity vulnerability

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

BlockPost-client-ts@0.0.1 build
NODE_OPTIONS='--max-old-space-size=16384' tsc

@ignt/react-template@0.6.1 prepare
node prepare.cjs

Package 'BlockPost-client-ts' located at '../ts-client' needs to be published and your package.json file updated.

up to date, audited 650 packages in 2m

151 packages are looking for funding
run npm fund for details

1 moderate severity vulnerability

To address all issues (including breaking changes), run:
npm audit fix --force

@ignt/react-template@0.6.1 dev
vite

VITE v3.2.10 ready in 483 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
node:internal/errors:465
ErrorCaptureStackTrace(err);
^

Error: ENOSPC: System limit for number of file watchers reached, watch '/home/steve/Workspace/BlockPost/react'
at FSWatcher. (node:internal/fs/watchers:244:19)
at Object.watch (node:fs:2264:34)
at createFsWatchInstance (file:///home/steve/Workspace/BlockPost/react/node_modules/vite/dist/node/chunks/dep-372dab03.js:49748:17)
at setFsWatchListener (file:///home/steve/Workspace/BlockPost/react/node_modules/vite/dist/node/chunks/dep-372dab03.js:49795:15)
at NodeFsHandler$1._watchWithNodeFs (file:///home/steve/Workspace/BlockPost/react/node_modules/vite/dist/node/chunks/dep-372dab03.js:49950:14)
at NodeFsHandler$1._handleDir (file:///home/steve/Workspace/BlockPost/react/node_modules/vite/dist/node/chunks/dep-372dab03.js:50186:19)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async NodeFsHandler$1._addToNodeFs (file:///home/steve/Workspace/BlockPost/react/node_modules/vite/dist/node/chunks/dep-372dab03.js:50236:16)
at async file:///home/steve/Workspace/BlockPost/react/node_modules/vite/dist/node/chunks/dep-372dab03.js:51248:21
at async Promise.all (index 0)
Emitted 'error' event on FSWatcher instance at:
at FSWatcher._handleError (file:///home/steve/Workspace/BlockPost/react/node_modules/vite/dist/node/chunks/dep-372dab03.js:51444:10)
at NodeFsHandler$1._addToNodeFs (file:///home/steve/Workspace/BlockPost/react/node_modules/vite/dist/node/chunks/dep-372dab03.js:50264:18)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async file:///home/steve/Workspace/BlockPost/react/node_modules/vite/dist/node/chunks/dep-372dab03.js:51248:21
at async Promise.all (index 0) {
errno: -28,
syscall: 'watch',
code: 'ENOSPC',
path: '/home/steve/Workspace/BlockPost/react',
filename: '/home/steve/Workspace/BlockPost/react'
}

I can't visit http://localhost:5173, because, the command "npm run dev" killed because of errors.

To reproduce
Steps to reproduce the behavior:

1. ignite scaffold chain example
2. ignite scaffold react
3. ignite generate hooks
4. ignite chain serve
5. npm install && npm run dev

What version are you using?

Provide the output of the ignite version command.
I am using Ignite v28(latest version now - 7/14/2024)

[K-Chang32]

9:13 AM 7/16/2024

[julienrbrt]

I am able to reproduce. The frontends have been a bit under maintained and need some love. I'll have a look this week 👍🏾

[Chandher05]

Facing this issue as well, is there anything we can do to help you here @julienrbrt

[ikeda-minden]

Same error.
Any update？

[julienrbrt]

Hey! The frontend needs a complete ground up rewrite. We'll tackle that eventually, but for now we've disabled/hidden the frontend capabilities in Ignite (#4410).

We are developing an Ignite App that will handle that functionality instead: ignite/apps#140 and that uses and configures well known frontend Cosmos libraries (create-cosmos-app, telescope, cosmos kit).

I'll be closing all frontend issues. We'll release ignite cca this week to unblock everyone.