Не собирается проект React, Vite, TS. Heap of memory
Сначала очень долго пытается что-то сделать, а потом выбрасывает ошибку:
git:(master) ✗ npm run build
> frontend_v2@0.0.0 build
> tsc && vite build
<--- Last few GCs --->
[41975:0x158008000] 161291 ms: Mark-Compact (reduce) 4030.8 (4121.8) -> 4030.8 (4090.3) MB, 1644.12 / 0.00 ms (average mu = 0.392, current mu = 0.000) last resort; GC in old space requested
[41975:0x158008000] 163153 ms: Mark-Compact (reduce) 4030.8 (4090.3) -> 4030.8 (4090.3) MB, 1861.83 / 0.00 ms (average mu = 0.239, current mu = 0.000) last resort; GC in old space requested
<--- JS stacktrace --->
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: 0x100c7e9f8 node::Abort() [/usr/local/bin/node]
2: 0x100c7ebe0 node::ModifyCodeGenerationFromStrings(v8::Local<v8::Context>, v8::Local<v8::Value>, bool) [/usr/local/bin/node]
3: 0x100dfd404 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [/usr/local/bin/node]
4: 0x100fc7e88 v8::internal::MemoryController<v8::internal::V8HeapTrait>::MinimumAllocationLimitGrowingStep(v8::internal::Heap::HeapGrowingMode) [/usr/local/bin/node]
5: 0x100fabec8 v8::internal::Factory::AllocateRaw(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [/usr/local/bin/node]
6: 0x100f9fcc0 v8::internal::FactoryBase<v8::internal::Factory>::NewFixedArrayWithFiller(v8::internal::Handle<v8::internal::Map>, int, v8::internal::Handle<v8::internal::Oddball>, v8::internal::AllocationType) [/usr/local/bin/node]
7: 0x101291e80 v8::internal::OrderedHashTable<v8::internal::OrderedHashMap, 2>::Allocate(v8::internal::Isolate*, int, v8::internal::AllocationType) [/usr/local/bin/node]
8: 0x1012946fc v8::internal::OrderedHashTable<v8::internal::OrderedHashMap, 2>::Rehash(v8::internal::Isolate*, v8::internal::Handle<v8::internal::OrderedHashMap>, int) [/usr/local/bin/node]
9: 0x101291c6c v8::internal::OrderedHashTable<v8::internal::OrderedHashMap, 2>::EnsureGrowable(v8::internal::Isolate*, v8::internal::Handle<v8::internal::OrderedHashMap>) [/usr/local/bin/node]
10: 0x10138bbe4 v8::internal::Runtime_MapGrow(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
11: 0x1016f0c44 Builtins_CEntry_Return1_ArgvOnStack_NoBuiltinExit [/usr/local/bin/node]
12: 0x1016c092c Builtins_MapPrototypeSet [/usr/local/bin/node]
13: 0x106d12320
14: 0x1071a85e8
15: 0x106ecb43c
16: 0x106cb7418
17: 0x1071a8568
...
UPD: Проект перестал собираться после создания большого количества переводов (i18next). Возможно, большое количество файлов и текста повлияло на сборку, но нужно, чтобы проект в любом случае собирался.
package.json:
{
"name": "frontend_v2",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"lint": "eslint --fix --ext .js,.ts,.tsx ./src --ignore-path .gitignore",
"prettier": "prettier --ignore-path .gitignore --write \"**/*.+(js|json|ts|tsx)\"",
"format": "npm run prettier -- --write",
"check-types": "tsc --project tsconfig.json --pretty --noEmit",
"check-format": "npm run prettier -- --list-different",
"validate-and-build": "npm-run-all --parallel check-types check-format lint build",
"validate": "npm-run-all --parallel check-types && lint-staged",
"generate": "plop",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"dependencies": {
"@ckeditor/ckeditor5-editor-classic": "^37.1.0",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@mui/icons-material": "^5.11.11",
"@mui/material": "^5.11.7",
"@mui/x-date-pickers": "^6.0.0",
"@reduxjs/toolkit": "^1.9.2",
"@types/react-redux": "^7.1.25",
"@uiw/react-codemirror": "^4.19.16",
"apexcharts": "^3.37.0",
"axios": "^1.2.6",
"cross-env": "^7.0.3",
"dayjs": "^1.11.7",
"formik": "^2.2.9",
"framer-motion": "^9.0.2",
"i18next": "^22.4.9",
"lodash": "^4.17.21",
"match-sorter": "^6.3.1",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-beautiful-dnd": "^13.1.1",
"react-credit-cards-2": "^0.9.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-error-boundary": "^3.1.4",
"react-i18next": "^12.1.5",
"react-perfect-scrollbar": "^1.5.8",
"react-redux": "^8.0.5",
"react-router-dom": "^6.8.0",
"react-text-mask": "^5.5.0",
"react-toastify": "^9.1.1",
"use-state-with-callback": "^3.0.2",
"uuid": "^9.0.0",
"yup": "^0.32.11",
"zustand": "^4.3.2"
},
"devDependencies": {
"@ckeditor/ckeditor5-alignment": "^37.1.0",
"@ckeditor/ckeditor5-autoformat": "^37.1.0",
"@ckeditor/ckeditor5-autosave": "^37.1.0",
"@ckeditor/ckeditor5-basic-styles": "^37.1.0",
"@ckeditor/ckeditor5-block-quote": "^37.1.0",
"@ckeditor/ckeditor5-cloud-services": "^37.1.0",
"@ckeditor/ckeditor5-code-block": "^37.1.0",
"@ckeditor/ckeditor5-dev-translations": "^32.1.2",
"@ckeditor/ckeditor5-dev-utils": "^32.1.2",
"@ckeditor/ckeditor5-essentials": "^37.1.0",
"@ckeditor/ckeditor5-find-and-replace": "^37.1.0",
"@ckeditor/ckeditor5-font": "^37.1.0",
"@ckeditor/ckeditor5-heading": "^37.1.0",
"@ckeditor/ckeditor5-highlight": "^37.1.0",
"@ckeditor/ckeditor5-horizontal-line": "^37.1.0",
"@ckeditor/ckeditor5-html-embed": "^37.1.0",
"@ckeditor/ckeditor5-html-support": "^37.1.0",
"@ckeditor/ckeditor5-image": "^37.1.0",
"@ckeditor/ckeditor5-indent": "^37.1.0",
"@ckeditor/ckeditor5-language": "^37.1.0",
"@ckeditor/ckeditor5-link": "^37.1.0",
"@ckeditor/ckeditor5-list": "^37.1.0",
"@ckeditor/ckeditor5-media-embed": "^37.1.0",
"@ckeditor/ckeditor5-mention": "^37.1.0",
"@ckeditor/ckeditor5-paragraph": "^37.1.0",
"@ckeditor/ckeditor5-react": "^6.0.0",
"@ckeditor/ckeditor5-remove-format": "^37.1.0",
"@ckeditor/ckeditor5-select-all": "^37.1.0",
"@ckeditor/ckeditor5-source-editing": "^37.1.0",
"@ckeditor/ckeditor5-special-characters": "^37.1.0",
"@ckeditor/ckeditor5-style": "^37.1.0",
"@ckeditor/ckeditor5-table": "^37.1.0",
"@ckeditor/ckeditor5-theme-lark": "^37.1.0",
"@ckeditor/ckeditor5-typing": "^37.1.0",
"@ckeditor/ckeditor5-upload": "^37.1.0",
"@ckeditor/ckeditor5-watchdog": "^37.1.0",
"@ckeditor/ckeditor5-word-count": "^37.1.0",
"@ckeditor/vite-plugin-ckeditor5": "^0.1.1",
"@codemirror/lang-css": "^6.1.1",
"@codemirror/lang-javascript": "^6.1.7",
"@storybook/react": "^7.0.18",
"@types/react": "^18.0.26",
"@types/react-beautiful-dnd": "^13.1.3",
"@types/react-date-range": "^1.4.4",
"@types/react-dates": "^21.8.3",
"@types/react-dom": "^18.0.9",
"@types/react-html-parser": "^2.0.2",
"@types/react-text-mask": "^5.4.11",
"@vitejs/plugin-react-swc": "^3.0.0",
"ckeditor5": "^37.1.0",
"eslint": "^8.33.0",
"eslint-config-prettier": "^8.6.0",
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-prettier": "^4.2.1",
"npm-run-all": "^4.1.5",
"plop": "^3.1.1",
"react-html-parser": "^2.0.2",
"rollup-plugin-visualizer": "^5.9.0",
"typescript": "^4.9.3",
"vite": "^4.0.0",
"vite-plugin-require": "^1.1.10",
"vite-plugin-windicss": "^1.8.10",
"vite-tsconfig-paths": "^4.0.5"
},
"eslintConfig": {
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
}
}
vite.config.ts (тут видно, что я уже пытался задействовать некоторые распространённые решения, но они не помогли):
import { defineConfig, Plugin } from 'vite'
import path from 'path'
import react from '@vitejs/plugin-react-swc'
import windiCSS from 'vite-plugin-windicss'
import tsconfigPaths from 'vite-tsconfig-paths'
import { visualizer } from 'rollup-plugin-visualizer'
import vitePluginRequire from 'vite-plugin-require'
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5'
import { cpus } from 'os'
// import { sentryVitePlugin } from '@sentry/vite-plugin'
// https://vitejs.dev/config/
interface SourcemapExclude {
excludeNodeModules?: boolean
}
export function sourcemapExclude(opts?: SourcemapExclude): Plugin {
return {
name: 'sourcemap-exclude',
transform(code: string, id: string) {
if (opts?.excludeNodeModules && id.includes('node_modules')) {
return {
code,
// https://github.com/rollup/rollup/blob/master/docs/plugin-development/index.md#source-code-transformations
map: { mappings: '' },
}
}
},
}
}
function differMuiSourcemapsPlugins() {
const muiPackages = ['@mui/material', '@emotion/styled', '@emotion/react']
return {
name: 'differ-mui-sourcemap',
transform(code: string, id: string) {
if (muiPackages.some((pkg) => id.includes(pkg))) {
return {
code: code,
map: null,
}
}
},
}
}
export default defineConfig({
plugins: [
react(),
ckeditor5({
theme: require.resolve('@ckeditor/ckeditor5-theme-lark'),
}),
windiCSS(),
tsconfigPaths(),
vitePluginRequire(),
differMuiSourcemapsPlugins(),
sourcemapExclude({ excludeNodeModules: true }),
],
resolve: {
alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
},
optimizeDeps: {
esbuildOptions: {
target: 'es2020',
},
},
build: {
target: 'es2020',
chunkSizeWarningLimit: 3000,
minify: false,
sourcemap: false,
rollupOptions: {
maxParallelFileOps: Math.max(1, cpus().length - 1),
cache: false,
external: ['react', 'react-dom'],
output: {
globals: {
react: 'React',
'react-dom': 'ReactDOM',
},
sourcemap: false,
manualChunks: (id) => {
if (id.includes('node_modules')) {
return 'vendor'
}
},
inlineDynamicImports: false,
sourcemapIgnoreList: (relativeSourcePath) => {
const normalizedPath = path.normalize(relativeSourcePath)
return normalizedPath.includes('node_modules')
},
},
// plugins: [
// visualizer({
// gzipSize: true,
// brotliSize: true,
// }) as unknown as Plugin,
// ],
},
},
})
tsconfig.json:
{
"compilerOptions": {
"target": "ES2020",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src", "vite.config.ts"],
"exclude": ["node_modules"],
"extends": "./tsconfig.paths.json"
}
tsconfig.paths.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
Источник: Stack Overflow на русском