Не собирается проект React, Vite, TS. Heap of memory

Рейтинг: 0Ответов: 0Опубликовано: 08.07.2023

Сначала очень долго пытается что-то сделать, а потом выбрасывает ошибку:

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/*"]
    }
  }
}

Использование памяти: Память

Ответы

Ответов пока нет.