J'essaye de déployer une application reactjs sur heroku. Lors de la compilation des actifs, la génération échoue et génère cette erreur:
{
"name": "safe_deliver",
"private": true,
"engines": {
"node": ">=6.0.0",
"yarn": ">=0.25.2"
},
"scripts": {
"postinstall": "cd client && yarn",
"pre-commit": "cd client && npm run lint:staged",
"start": "cross-env NODE_OPTIONS=--max-old-space-size=6144 bin/webpack"
},
"dependencies": {
"@fortawesome/fontawesome": "^1.1.8",
"@fortawesome/fontawesome-free": "^5.3.1",
"@fortawesome/fontawesome-free-brands": "^5.0.13",
"@fortawesome/fontawesome-free-regular": "^5.0.13",
"@fortawesome/fontawesome-free-solid": "^5.0.13",
"@fortawesome/fontawesome-svg-core": "^1.2.4",
"@fortawesome/free-solid-svg-icons": "^5.3.1",
"@fortawesome/react-fontawesome": "^0.1.3",
"@rails/webpacker": "^3.3.1",
"babel-plugin-emotion": "^9.2.6",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"bootstrap": "4.0.0",
"chart.js": "^2.7.3",
"chartkick": "^3.0.1",
"emotion": "^9.2.6",
"google-maps-react": "^2.0.2",
"jquery": "^3.2.1",
"jquery-ujs": "^1.2.2",
"leaflet": "^1.3.1",
"normalize.css": "^8.0.1",
"popper.js": "^1.12.9",
"prop-types": "^15.6.1",
"rc-time-picker": "^3.6.2",
"react": "^16.4.1",
"react-addons-css-transition-group": "^15.6.2",
"react-animate-height": "^2.0.5",
"react-bootstrap-table-next": "^1.4.0",
"react-calendar": "^2.16.0",
"react-datepicker": "^2.3.0",
"react-dom": "^16.4.1",
"react-emotion": "^9.2.6",
"react-fontawesome": "^1.6.1",
"react-geocode": "^0.1.2",
"react-https-redirect": "^1.0.11",
"react-input-mask": "^2.0.4",
"react-progressbar": "^15.4.1",
"react-star-rating-component": "^1.4.1",
"react-stripe-elements": "^2.0.1",
"reactjs-popup": "^1.3.2",
"redux-immutable": "^4.0.0",
"reset-css": "^4.0.1",
"seamless-immutable": "^7.1.4",
"styled-components": "^3.4.2"
},
"devDependencies": {
"eslint": "3.19.0",
"eslint-config-airbnb": "15.0.1",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-jsx-a11y": "5.0.3",
"eslint-plugin-react": "7.0.1",
"pre-commit": "1.2.2",
"webpack-dev-server": "^2.7.1"
}
}
J'ai essayé différentes méthodes dans mon fichier package.json :
"scripts" : {
"start": "cross-env NODE_OPTIONS=--max_old_space_size=5120 webpack"
}
"scripts" : {
"webpacker": "node --max-old-space-size=4096 node_modules/.bin/react-scripts start"
}
"scripts" : {
"start": "node --max-old-space-size=6144 client/app/app.js"
}
J'ai recherché et trouvé divers threads github et stackoverflow mais ils ne semblent pas résoudre mon problème.
Voici mon fichier package.json :
-----> Ruby app detected
-----> Compiling Ruby/Rails
-----> Using Ruby version: ruby-2.5.1
-----> Installing dependencies using bundler 1.15.2
Running: bundle install --without development:test --path vendor/bundle --binstubs vendor/bundle/bin -j4 --deployment
Warning: the running version of Bundler (1.15.2) is older than the version that created the lockfile (1.16.3). We suggest you upgrade to the latest version of Bundler by running `gem install bundler`.
Fetching gem metadata from https://rubygems.org/............
Fetching version metadata from https://rubygems.org/..
Fetching dependency metadata from https://rubygems.org/.
Using rake 12.3.1
Using concurrent-ruby 1.1.3
Using minitest 5.11.3
Using thread_safe 0.3.6
Using builder 3.2.3
Using erubi 1.7.1
Using mini_portile2 2.3.0
Using crass 1.0.4
Using rack 2.0.6
Using nio4r 2.3.1
Using websocket-extensions 0.1.3
Using mini_mime 1.0.1
Using jsonapi-renderer 0.2.0
Using arel 9.0.0
Using mimemagic 0.3.2
Using public_suffix 3.0.3
Using airbrake-ruby 2.12.0
Using execjs 2.7.0
Using bcrypt 3.1.12
Using popper_js 1.14.5
Using rb-fsevent 0.10.3
Using ffi 1.9.25
Using bundler 1.15.2
Using regexp_parser 1.3.0
Using mime-types-data 3.2018.0812
Using chartkick 3.0.1
Using highline 2.0.0
Using connection_pool 2.2.2
Using orm_adapter 0.5.0
Using method_source 0.9.2
Using thor 0.19.4
Using multipart-post 2.0.0
Using geokit 1.13.1
Using temple 0.8.0
Using tilt 2.0.9
Using hashie 3.5.7
Using json 2.1.0
Using mini_magick 4.9.2
Using multi_json 1.13.1
Using newrelic_rpm 5.5.0.348
Using one_signal 1.2.0
Using xml-simple 1.1.5
Using pg 0.21.0
Using puma 3.12.0
Using rack-timeout 0.5.1
Using redis 4.0.3
Using secure_headers 6.0.0
Using swagger-ui_rails 0.1.7
Using i18n 1.1.1
Using nokogiri 1.8.5
Using tzinfo 1.2.5
Using websocket-driver 0.7.0
Using mail 2.7.1
Using marcel 0.3.3
Using addressable 2.5.2
Using rack-test 1.1.0
Using warden 1.2.8
Using sprockets 3.7.2
Using request_store 1.4.1
Using rack-protection 2.0.4
Using rack-proxy 0.6.5
Using autoprefixer-rails 9.4.2
Using uglifier 4.1.20
Using airbrake 7.4.0
Using rb-inotify 0.9.10
Using mime-types 3.2.2
Using commander 4.4.7
Using net-http-persistent 3.0.0
Using faraday 0.15.4
Using hashie-forbidden_attributes 0.1.1
Using omniauth 1.8.1
Using haml 5.0.4
Using slim 4.0.1
Using paypal-sdk-core 0.3.4
Using faker 1.9.1 from https://github.com/stympy/faker.git (at master@aca03be)
Using money 6.13.1
Using loofah 2.2.3
Using xpath 3.2.0
Using activesupport 5.2.0
Using sidekiq 5.2.3
Using sass-listen 4.0.0
Using houston 2.4.0
Using stripe 4.2.0
Using paypal-sdk-adaptivepayments 1.117.1
Using monetize 1.9.0
Using rails-html-sanitizer 1.0.4
Using capybara 3.12.0
Using rails-dom-testing 2.0.3
Using globalid 0.4.1
Using activemodel 5.2.0
Using case_transform 0.2
Using decent_exposure 3.0.0
Using factory_bot 4.11.1
Using fast_jsonapi 1.5
Using groupdate 4.1.0
Using pundit 2.0.0
Using sass 3.7.2
Using actionview 5.2.0
Using activerecord 5.2.0
Using carrierwave 1.2.3
Using activejob 5.2.0
Using actionpack 5.2.0
Using bootstrap 4.1.3
Using actioncable 5.2.0
Using actionmailer 5.2.0
Using active_model_serializers 0.10.8
Using activestorage 5.2.0
Using railties 5.2.0
Using sprockets-rails 3.2.1
Using simple_form 4.1.0
Using responders 2.4.0
Using factory_bot_rails 4.11.1
Using font-awesome-rails 4.7.0.4
Using highcharts-rails 6.0.3
Using jquery-rails 4.3.3
Using lograge 0.10.0
Using money-rails 1.13.0
Using slim-rails 3.2.0
Using webpacker 3.5.5
Using rails 5.2.0
Using sass-rails 5.0.7
Using geokit-rails 2.3.1
Using swagger-docs 0.2.9
Using devise 4.5.0
Using devise_token_auth 1.0.0
Bundle complete! 68 Gemfile dependencies, 125 gems now installed.
Gems in the groups development and test were not installed.
Bundled gems are installed into ./vendor/bundle.
Bundle completed (5.09s)
Cleaning up the bundler cache.
Warning: the running version of Bundler (1.15.2) is older than the version that created the lockfile (1.16.3). We suggest you upgrade to the latest version of Bundler by running `gem install bundler`.
The latest bundler is 2.0.1, but you are currently running 1.15.2.
To update, run `gem install bundler`
-----> Installing node-v10.14.1-linux-x64
-----> Installing yarn-v1.12.3
-----> Detecting rake tasks
-----> Preparing app for Rails asset pipeline
Running: rake assets:precompile
yarn install v1.12.3
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
warning "@rails/webpacker > postcss-cssnext@3.1.0" has unmet peer dependency "caniuse-lite@^1.0.30000697".
warning " > react-addons-css-transition-group@15.6.2" has incorrect peer dependency "react@^15.4.2".
warning " > react-bootstrap-table-next@1.4.0" has unmet peer dependency "classnames@^2.2.5".
warning " > react-progressbar@15.4.1" has incorrect peer dependency "react@^15.0.1".
warning " > redux-immutable@4.0.0" has unmet peer dependency "immutable@^3.8.1 || ^4.0.0-rc.1".
warning "eslint-config-airbnb > eslint-config-airbnb-base@11.3.2" has incorrect peer dependency "eslint-plugin-import@^2.7.0".
warning " > webpack-dev-server@2.11.2" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
warning "webpack-dev-server > webpack-dev-middleware@1.12.2" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
[5/5] Building fresh packages...
$ cd client && yarn
yarn install v1.12.3
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
warning " > babel-loader@7.1.0" has unmet peer dependency "webpack@2 || 3".
warning " > react-intl@2.3.0" has incorrect peer dependency "react@^0.14.9 || ^15.0.0".
warning " > react-router-dom@4.1.1" has incorrect peer dependency "react@^15".
warning " > react-router-redux@5.0.0-alpha.6" has incorrect peer dependency "react@^15".
warning " > enzyme@2.8.2" has incorrect peer dependency "react@0.13.x || 0.14.x || ^15.0.0-0 || 15.x".
warning " > eslint-import-resolver-webpack@0.8.3" has unmet peer dependency "webpack@>=1.11.0".
warning " > html-webpack-plugin@2.29.0" has unmet peer dependency "webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3".
warning "image-webpack-loader > file-loader@1.1.11" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
warning " > react-test-renderer@15.6.1" has incorrect peer dependency "react@^15.6.1".
[5/5] Building fresh packages...
Done in 31.85s.
Done in 76.09s.
Webpacker is installed 🎉 ðŸ°
Using /tmp/build_8f521e11fc612876bcd3c01cd8da6bdd/config/webpacker.yml file for setting up webpack paths
Compiling…
Compilation failed:
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 0x8dbaa0 node::Abort() [node]
2: 0x8dbaec [node]
3: 0xad83de v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
4: 0xad8614 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
5: 0xec5c42 [node]
6: 0xec5d48 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [node]
7: 0xed1e22 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node]
8: 0xed2754 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
9: 0xed53c1 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [node]
10: 0xe9e844 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [node]
11: 0x113dfae v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [node]
12: 0x2daefc5be1d
<--- Last few GCs --->
[587:0x2713f20] 1469419 ms: Mark-sweep 1362.0 (1417.7) -> 1361.9 (1418.2) MB, 1183.8 / 0.0 ms (average mu = 0.099, current mu = 0.004) allocation failure scavenge might not succeed
[587:0x2713f20] 1470575 ms: Mark-sweep 1363.1 (1418.7) -> 1362.9 (1419.7) MB, 1151.7 / 0.0 ms (average mu = 0.053, current mu = 0.004) allocation failure scavenge might not succeed
<--- JS stacktrace --->
==== JS stack trace =========================================
0: ExitFrame [pc: 0x2daefc5be1d]
Security context: 0x395bbaa1e6e1 <JSObject>
1: addMappingWithCode [0x1a4bb3f1a89] [/tmp/build_8f521e11fc612876bcd3c01cd8da6bdd/node_modules/webpack-sources/node_modules/source-map/lib/source-node.js:~150] [pc=0x2daf487dfd2](this=0x08663a09ad49 <JSGlobal Object>,mapping=0x2969e26a1e61 <Object map = 0x1067d74ad2e1>,code=0x3e38d99f4479 <String[6]: break >)
2: /* anonymous */ [0x1a4bb3dcc79] [/tmp/...
!
! Precompiling assets failed.
!
! Push rejected, failed to compile Ruby app.
! Push failed
Je m'attends à ce que cette erreur disparaisse et que l'application soit déployée. En ce moment, il jette une erreur de mémoire javascript.
6 Réponses :
Ce problème est lié aux fichiers volumineux de votre projet.
J'utilise create-react-app, et j'ai eu cette erreur, après avoir effectué une recherche, il semble qu'une solution soit la suivante.
Mettez dans le fichier .env :
GENERATE_SOURCEMAP=false
Je ne sais vraiment pas ce que fait cette directive, les mappages de sources sont un pont entre la source (ex: dactylographié) et le javascript transpilé pour un débogage plus facile, bien qu'il semble que la désactivation cette fois n'affecte pas le débogage donc ... si quelqu'un sait s'il vous plaît, faites-le nous savoir aussi!
qu'est-ce qu'un fichier .env? Je ne vois pas de fichier .env dans mon projet
Ça marche. Mais je n'ai pas de gros fichier dans mon projet.
J'ai eu la même erreur. Correction du problème en utilisant une version antérieure de Node / npm. Peut-être résoudre votre problème.
En particulier, le passage de Node v12.x à v10.x a résolu le problème pour moi. C'était comme si l'option n'était plus efficace dans 12.
J'ai eu une erreur d'allocation de tas similaire lors du déploiement sur Heroku. L'application se construirait toujours correctement mais ne se chargerait pas dans le navigateur. Les journaux Heroku me montreraient ceci: ERREUR FATALE: L'allocation de marques-compactes inefficaces près de la limite de tas a échoué - Le tas JavaScript est insuffisant
Après avoir essayé une douzaine de choses différentes, cela semblait fonctionner dans package.json:
"start": "react-scripts --max_old_space_size=4096 start", "build": "react-scripts --max_old_space_size=4096 build",
Cela a résolu le problème
c'est parce que plus de fichiers "js" dans votre application de réaction. Vous pouvez créer votre application après avoir apporté des modifications dans package.json comme ci-dessous du code:
"scripts": {
"start": "react-scripts --max_old_space_size=4096 start",
"build": "react-scripts --max_old_space_size=4096 build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
La cause première du problème est due à la grande taille des fichiers source.
Si le problème de soulignement se trouve dans votre code source, vous pouvez le résoudre en augmentant simplement la taille du tas de nœuds comme ci-dessous,
"start": "react-scripts --max_old_space_size=4096 start",
"build": "react-scripts --max_old_space_size=4096 build",
Mais si le problème réside dans des dépendances introduites, il se peut que nous devions augmenter l'allocation de Node Heap au niveau mondial pour résoudre le problème.
Pour les fenêtres:
export NODE_OPTIONS=--max_old_space_size=4096
Pour Linux:
set NODE_OPTIONS=--max_old_space_size=4096
Dans mon cas, cette erreur a été causée par le fait que j'ai importé deux fois moins de fichiers:
@import "~@myPackage/file1.less"; @import "~@myPackage/file1.less"; @import "~@myPackage/file2.less"; @import "~@myPackage/file2.less";