react-loadable | higher order component for loading components | Frontend Framework library

I would like to use a sequential number such as 1.js, 2.js,... for chunkFileName in production mode of webpack v5. I set [index].js for naming but webpack gives me following error:

Error: Conflict: Multiple chunks emit assets to the same filename [index].js (chunks 179 and 216)

Here's my config for webpack:

I want to analyze my Next.js build with source-map-explorer. Can someone please help me with the script?

With React (CRA), I use the following script:

Recently I am trying to optimize the performance of a web app(React). Assuming it is somewhat heavy as it consists of Code editors, Firebase, SQL, AWS SDK, etc. So I integrated react-loadable which will lazy load the components, After that, I got this Javascript heap out of memory issue.

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory in React

After some research(From a friend), I came to know that If we keep too many lazy loadings webpack will try to bundle them parallelly It might be the cause to get a Javascript heap memory issue, To confirm that I removed all Lazy loading routes in my App and built. Now build is successful. Later as suggested by the community I increased Node heap space size and got the below insights

First I increased it to 8 GB(8192) then build is success I got build time of around 72 mins, From next time onwards I am getting around 20 mins. Then I decreased heap memory size to 4 GB(4096) and getting build success it is around 15 - 20 mins. System configuration is 2vCPU, 16GB RAM(AWS EC2 Instance r5a.large).

Next, I kept build in another system (Mac book pro, i5, 8 GB RAM, 4 Cores) Now it took 30 mins, Second time it took 20 mins

So from these data points, I got a couple of questions

1. Do we need to keep increasing heap space whenever we add some code? If yes what would be the average heap memory size in the community
2. What would be the usual configuration for build systems for these kinds of heavy apps, Why because now I am not sure whether to increase the number of cores or RAM or Heap space or Altogether something to do with our app code.
3. Do webpack provide any kind of solutions to avoid heap memory issue like limiting parallel processes, or any plugins?
4. If at all it is related with our App code, Is there any standard process to debug where it is taking memory and to optimize based on that

PS : Some people suggested to keep GENERATE_SOUCREMAP=false it got worked but we need source maps as they will be helpful in debugging production issues

when i try to build my project with yarn run build i get errors that are not exist in my code my code is clean it works fine in my local. I've been stuck for two weeks to resolve this problem please help me to solve this problem. this the errors that i get

node version: v10.15.3

webpack: 4.30.0 this is my package.json

I am trying to chunk my assets and lazy load them using react-loadable.

I used the following renderToString:

I have adopted a project that was built on this starter kit. This architecture employs App Shell and SSR. I am trying to add a simple search bar and this will mean passing the search keys from the search bar component to the post-list component so they can be filtered. I have found that this is nearly impossible with Context Providers and Consumers. I would like to use Context, but I do not know how to do it. It looks like this starter kit has this as a serious shortcoming and if it could be solved, it would make this kit more useful online.

If you look at the code below and in the link above, you can see that there is a header center and then thee are pages. I need a communication between the header and the pages. You can just use the code in the link to add the sibbling communication.

The use of Hydrate seems to preclude the simple application of a context provider. Hydrate adds components in a parallel way with no way to have the Context Provider above both of them. This pattern I am using here does not work. When I update the provider it does not cause a re-render of the context consumer.

If I have to use something other than Context, like say Redux, then I will accept that answer.

Here is the client entry point:

I have this react app I want to dockerize. But the problem is, even though I tried, it doesn't work. But it works pretty well locally

This is how the current directories look like:

I am seeing this issue 100% of the attempts at building webpack for production. I've tried the approach mentioned on the other similar StackOverflow issues which is NODE_OPTIONS=--max_old_space_size=8192

my build command is:

I am trying to load components only when clicked instead of loading all during startup.

index.js: