I am trying to build my app via npm run build.

I’m cereating a design system aka component library with react typescript and vite as build tool
I had an issue that whenever I Import any component it was importing all the package not only the componeent, it was an issue related to the tree-shaking and I fixed it.
Now I have two issue which are:
1- I have about 200 Icons that I’m using them through an Icon component, and I’m using those icons as a react components, when I build I found that all Icon built with it which take big size from the bundle:
2- When import any components that depends on the Icon component or other dependency I found it takes big size, for example when I import Button component it takes (400k gzipped: 187.8k) which is big, and it is like that because it depends on Icon component, this is example of the Button component:

An example of what I want to do:
Before:
enter image description here

I’m encountering an issue with React’s createRoot function in my project. When I attempt to use ReactDOM.createRoot(document.getElementById('root')).render(<App />);, I receive the following error in the console: Uncaught Error: createRoot(…): Target container is not a DOM element.

I’m having a problem running my project in the environment, which gives me the error “TypeError: _jsxDEV is not a function”.

I’m getting an error when running the Vite dev environment and it’s related to the Flow types in my code (not my decision to use Flow instead of TS and not something I can change).

failed to load config from C:UsersUserDesktopreact-vitevite.config.js error when starting dev server: Error [ERR_MODULE_NOT_FOUND]: Cannot find package ‘vite’ imported from C:UsersUserDesktopreact-vitevite.config.js.timestamp-1716982295133-b70e6cf7ce43e.mjs at packageResolve (node:internal/modules/esm/resolve:844:9) at moduleResolve (node:internal/modules/esm/resolve:901:20) at defaultResolve (node:internal/modules/esm/resolve:1131:11) at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:390:12) at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25) at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38) at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39) at link (node:internal/modules/esm/module_job:84:36) I’ve deleted the node_modules directory and the package-lock.json then run npm […]

failed to load config from C:UsersUserDesktopreact-vitevite.config.js
error when starting dev server:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package ‘vite’ imported from C:UsersUserDesktopreact-vitevite.config.js.timestamp-1716982295133-b70e6cf7ce43e.mjs
at packageResolve (node:internal/modules/esm/resolve:844:9)
at moduleResolve (node:internal/modules/esm/resolve:901:20)
at defaultResolve (node:internal/modules/esm/resolve:1131:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:390:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38)
at ModuleWrap. (node:internal/modules/esm/module_job:85:39)
at link (node:internal/modules/esm/module_job:84:36)

Increment and Decrement Component missing

I am importing createAuthRefreshInterceptor into one of my files using:
import createAuthRefreshInterceptor from “axios-auth-refresh”;
I am using this in a npm package and calling that npm package into my own app.
While running npm run dev(vite as my build tool) I am getting this error
The requested module ‘/node_modules/axios-auth-refresh/dist/index.min.js?v=576ed0f7’ does not provide an export named ‘default’
The versions I am using are:
“axios”: “^1.6.0”,