webpack-bundle | package helps to generate a webpack configuration | Build Tool library

I import the following package in a react/webpack app:

The second I change

I want to add a bundle-analyzer to my react app, when the developer runs yarn analyze which has been set in package.json as "analyze": "craco build --analyze-only".

I did read the craco's manual but didnt find any solution for this. my current config is as below:

I Know that there is a lot of topic about this, but since none of them work, I must make a new one, I'm quite confused as why my electron app doesn't launch when I used yarn dev for my project, but when my friends try it, in his laptop, he can run and the apps launch normally without any problem, so Is there anyone here ever face the same problem with me? if there is someone, how can you solve this problem?

this is what my terminal looks like:

for information I used:

After production-mode build there is a babel-standalone module in my bundle. But i never installed this babel-standalone manually. And it doesn't exist in package.json either. But i installed the babel-polyfill in this project, does babel-standalone come with babel-polyfill? How can i remove this module from bundle so that can reduce the size of production bundle?

The screen shot from webpack-bundle-analyzer is like:

I have a website that developed using react which has a single page, but the production bundle size is 1.11 MiB. I'm using firestore,firebase storage, material-UI, react-redux for this app app works well everything is fine except the bundle size.

I used webpack-bundle-analyzer to analyse the bundle size, It seems like nodemodules tooks large size. Here I have added the screenshot.

My webpack config file

1. I am working with ngb-datepicker which is working fine if no initial values or predefined values are set but when trying to use it formControlName or with [(ngModel)] with an existing predefined value the predefined or initial value is not setting on the redenied view. Imagine this as a scenario of editing a form or record with prefilled values. Other formControls with text and numbers are working as intended.
2. I am using NgbStruct Model but still not working.
3. I tried and debugged the code the value are getting assigned to the form control in a patchValue method and in the format of NgbStruct but not seen in the rendered view
4. I tried to implement similar scenario in example provided in stack blitz by ng-bootstrap it is working fine there

Package.json file

I am getting webpack 5.25.0 compiled with 7 warnings in 6734 ms with version 7.167.0 and with v8.10.1 I was getting 1513 they were all same and something like this, instead of createElement there will be another react function like useEffect, with v8 it was taking 5 minutes to bundle in dev mode though with v7 took 10 sec.

export 'createElement' (imported as 'React') was not found in 'react'

Here is the webpack config

webpack.common.ts

I'm trying to set a background image via scss, bundle via webpack, and open the html file in the browser. Other background attributes work, but when loading the image I get GET file://wsl%24/c76193e7a53ed91f170bfaedb61a2832.png net::ERR_FILE_NOT_FOUND in the console. I feel like something is up with the way I have my styles organized? Webpack finds and apparently builds the image according to the terminal, but something happens on the way to the browser. Any help would be appreciated. I'm running WSL2 with an Ubuntu 20.04 distro, the project is within the distro's file tree.