There are some technical limitations with create-react-app, one of which is that the latest release was more than a year ago and the ecosystem keeps moving on. In particular CRA's abstraction of Webpack can be very hard to deal with when some dependencies require or benefit from modifications to the WebPack configuration.
Recently the CI build has sometimes been throwing out of memory errors while building and I can't seem to build the app locally due to the same memory issues. The issue appears to be related to the build size and the TypeScript complexity as it fails during TypeScript analysis.
Run PUBLIC_URL=https://d09c1546-5e078ce0--duality-xyz.netlify.app npm run build
> duality-webapp@0.3.48 build
> react-scripts build && npm run prepare:trading-view-bundles
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
<--- Last few GCs --->
[2335:0x[6](https://github.com/duality-labs/duality-web-app/actions/runs/7417775912/job/20184804314#step:10:7)1[7](https://github.com/duality-labs/duality-web-app/actions/runs/7417775912/job/20184804314#step:10:8)bea0] 32736 ms: Scavenge (reduce) 2045.9 (20[8](https://github.com/duality-labs/duality-web-app/actions/runs/7417775912/job/20184804314#step:10:9)2.3) -> 2045.5 (2082.8) MB, 7.2 / 0.0 ms (average mu = 0.532, current mu = 0.406) allocation failure
[2335:0x617bea0] 33428 ms: Mark-sweep (reduce) 2046.4 (2082.8) -> 2045.[9](https://github.com/duality-labs/duality-web-app/actions/runs/7417775912/job/20184804314#step:10:10) (2083.5) MB, 618.5 / 0.0 ms (+ 288.8 ms in 66 steps since start of marking, biggest step 20.6 ms, walltime since start of marking [10](https://github.com/duality-labs/duality-web-app/actions/runs/7417775912/job/20184804314#step:10:11)09 ms) (average mu = 0.406, current mu = 0.231
<--- JS stacktrace --->
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
1: 0xb09980 node::Abort() [/opt/hostedtoolcache/node/16.14.2/x64/bin/node]
2: 0xa1c235 node::FatalError(char const*, char const*) [/opt/hostedtoolcache/node/16.14.2/x64/bin/node]
3: 0xcf784e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/opt/hostedtoolcache/node/16.14.2/x64/bin/node]
4: 0xcf7bc7 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/opt/hostedtoolcache/node/16.14.2/x64/bin/node]
5: 0xeaf465 [/opt/hostedtoolcache/node/16.14.2/x64/bin/node]
6: 0xebf12d v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/opt/hostedtoolcache/node/16.14.2/x64/bin/node]
7: 0xec1e2e v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/opt/hostedtoolcache/node/16.14.2/x64/bin/node]
8: 0xe8336a v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/opt/hostedtoolcache/node/16.14.2/x64/bin/node]
9: 0x[11](https://github.com/duality-labs/duality-web-app/actions/runs/7417775912/job/20184804314#step:10:12)fc0b6 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/opt/hostedtoolcache/node/16.14.2/x64/bin/node]
10: 0x15f0b19 [/opt/hostedtoolcache/node/16.14.2/x64/bin/node]
/home/runner/work/duality-web-app/duality-web-app/node_modules/react-scripts/scripts/build.js:19
throw err;
^
RpcIpcMessagePortClosedError: Process 2335 exited [SIGABRT].
at /home/runner/work/duality-web-app/duality-web-app/node_modules/fork-ts-checker-webpack-plugin/lib/rpc/rpc-ipc/RpcIpcMessagePort.js:19:23
at Generator.next (<anonymous>)
at /home/runner/work/duality-web-app/duality-web-app/node_modules/fork-ts-checker-webpack-plugin/lib/rpc/rpc-ipc/RpcIpcMessagePort.js:8:71
at new Promise (<anonymous>)
at __awaiter (/home/runner/work/duality-web-app/duality-web-app/node_modules/fork-ts-checker-webpack-plugin/lib/rpc/rpc-ipc/RpcIpcMessagePort.js:4:[12](https://github.com/duality-labs/duality-web-app/actions/runs/7417775912/job/20184804314#step:10:13))
at ChildProcess.handleExit (/home/runner/work/duality-web-app/duality-web-app/node_modules/fork-ts-checker-webpack-plugin/lib/rpc/rpc-ipc/RpcIpcMessagePort.js:[18](https://github.com/duality-labs/duality-web-app/actions/runs/7417775912/job/20184804314#step:10:19):42)
at ChildProcess.emit (node:events:5[26](https://github.com/duality-labs/duality-web-app/actions/runs/7417775912/job/20184804314#step:10:27):[28](https://github.com/duality-labs/duality-web-app/actions/runs/7417775912/job/20184804314#step:10:29))
at Process.ChildProcess._handle.onexit (node:internal/child_process:[29](https://github.com/duality-labs/duality-web-app/actions/runs/7417775912/job/20184804314#step:10:30)1:12) {
code: null,
signal: 'SIGABRT'
}
This needs to be fixed as eventually one day the build will stop building in all cases if the TypeScript becomes complex enough through either our own code or our code dependencies.
Vite is a reasonable choice to replace CRA with and the most analogous to it. Next.js and Remix are also reasonable options but in my opinion they are more opinionated and much larger in scope than what I really need here, which is a simple build tool for client-side code with a dev server so I can preview my code locally.
There are some technical limitations with create-react-app, one of which is that the latest release was more than a year ago and the ecosystem keeps moving on. In particular CRA's abstraction of Webpack can be very hard to deal with when some dependencies require or benefit from modifications to the WebPack configuration.
Recently the CI build has sometimes been throwing
out of memory
errors while building and I can't seem to build the app locally due to the same memory issues. The issue appears to be related to the build size and the TypeScript complexity as it fails during TypeScript analysis.Some CI logs for the deploy preview step in https://github.com/duality-labs/duality-web-app/blob/04d6e6951e6453ea695088c04e8566091b58d142/.github/workflows/deploy_preview.yml#L68-L71:
This needs to be fixed as eventually one day the build will stop building in all cases if the TypeScript becomes complex enough through either our own code or our code dependencies.
Vite is a reasonable choice to replace CRA with and the most analogous to it. Next.js and Remix are also reasonable options but in my opinion they are more opinionated and much larger in scope than what I really need here, which is a simple build tool for client-side code with a dev server so I can preview my code locally.