web-dev-qa-db-fra.com

Webpacker 4.2 ne trouve pas d'application dans /app/public/packs/manifest.json heroku

Je suis un peu perplexe. Mon application locale Rails fonctionne très bien avec webpacker 4.2 et réagit, mais lors du déploiement en production me donne le merveilleux can't find application in /app/public/packs/manifest.json Erreur.

Voici ce que j'ai essayé:

  • J'ai essayé d'ajouter/supprimer des détails de lien turbo pour la balise de pack javascript.
  • Suppression de la balise d'inclusion javascript (je ne sais pas si cela aide ou non)
  • Assurez-vous que je suis sur le dernier webpacker 4.2
  • ran rake assets: nettoyer && rake assets: précompiler manuellement sur heroku juste pour s'assurer que les choses se construisent.

Suis-je en train de manquer une étape de construction ou quelque chose en production qui serait à l'origine de cela? Que reste-t-il à vérifier?

Erreur du serveur:

2019-12-03T15:18:19.022024+00:00 app[web.1]: I, [2019-12-03T15:18:19.021952 #30]  INFO -- : [aa0374eb-bab1-40cc-b40b-6ae3d195e07d] Completed 500 Internal Server Error in 112ms (ActiveRecord: 30.4ms | Allocations: 21296)
2019-12-03T15:18:19.023103+00:00 app[web.1]: F, [2019-12-03T15:18:19.023029 #30] FATAL -- : [aa0374eb-bab1-40cc-b40b-6ae3d195e07d]
2019-12-03T15:18:19.023107+00:00 app[web.1]: [aa0374eb-bab1-40cc-b40b-6ae3d195e07d] ActionView::Template::Error (Webpacker can't find application in /app/public/packs/manifest.json. Possible causes:
2019-12-03T15:18:19.023109+00:00 app[web.1]: 1. You want to set webpacker.yml value of compile to true for your environment
2019-12-03T15:18:19.023111+00:00 app[web.1]: unless you are using the `webpack -w` or the webpack-dev-server.
2019-12-03T15:18:19.023114+00:00 app[web.1]: 2. webpack has not yet re-run to reflect updates.
2019-12-03T15:18:19.023116+00:00 app[web.1]: 3. You have misconfigured Webpacker's config/webpacker.yml file.
2019-12-03T15:18:19.023118+00:00 app[web.1]: 4. Your webpack configuration is not creating a manifest.
2019-12-03T15:18:19.023120+00:00 app[web.1]: Your manifest contains:

{
 "application.js": "/packs/js/application-2a0e2c932678ebbf2ae7.js",
"application.js.map": "/packs/js/application-2a0e2c932678ebbf2ae7.js.map",
"entrypoints": {
 "application": {
"js": [
"/packs/js/application-2a0e2c932678ebbf2ae7.js"
],
 "js.map": [
 "/packs/js/application-2a0e2c932678ebbf2ae7.js.map"
 ]
 },
 "server_rendering": {
 "js": [
 "/packs/js/server_rendering-eb794d024d4852e8ab55.js"
],
 "js.map": [
 "/packs/js/server_rendering-eb794d024d4852e8ab55.js.map"
 ]
}
 },
"server_rendering.js": "/packs/js/server_rendering-eb794d024d4852e8ab55.js",
"server_rendering.js.map": "/packs/js/server_rendering-eb794d024d4852e8ab55.js.map"
}

...

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application' %>

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Slab:700&display=swap" rel="stylesheet">

2019-12-03T15:18:19.023193+00:00 app[web.1]: [aa0374eb-bab1-40cc-b40b-6ae3d195e07d] app/views/layouts/application.html.erb:10

Webpacker.yml

    # Note: You must restart bin/webpack-dev-server for changes to take effect

    default: &default
      source_path: app/javascript
      source_entry_path: packs
      public_root_path: public
      public_output_path: packs
      cache_path: tmp/cache/webpacker
      check_yarn_integrity: false
      webpack_compile_output: false

      # Additional paths webpack should lookup modules
      # ['app/assets', 'engine/foo/app/assets']
      resolved_paths: ['app/assets']

      # Reload manifest.json on all requests so we reload latest compiled packs
      cache_manifest: false

      # Extract and emit a css file
      extract_css: false

      static_assets_extensions:
        - .jpg
        - .jpeg
        - .png
        - .gif
        - .tiff
        - .ico
        - .svg
        - .eot
        - .otf
        - .ttf
        - .woff
        - .woff2

      extensions:
        - .jsx
        - .vue
        - .mjs
        - .js
        - .sass
        - .scss
        - .css
        - .module.sass
        - .module.scss
        - .module.css
        - .png
        - .svg
        - .gif
        - .jpeg
        - .jpg

    development:
      <<: *default
      compile: true

      # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
      check_yarn_integrity: true

      # Reference: https://webpack.js.org/configuration/dev-server/
      dev_server:
        https: false
        Host: localhost
        port: 3035
        public: localhost:3035
        hmr: false
        # Inline should be set to true if using HMR
        inline: true
        overlay: true
        compress: true
        disable_Host_check: true
        use_local_ip: false
        quiet: false
        headers:
          'Access-Control-Allow-Origin': '*'
        watch_options:
          ignored: '**/node_modules/**'

    test:
      <<: *default
      compile: true

      # Compile test packs to a separate directory
      public_output_path: packs-test

    production:
      <<: *default

      # Production depends on precompilation of packs prior to booting for performance.
      compile: true

      # Extract and emit a css file
      extract_css: true

      # Cache manifest.json for performance
      cache_manifest: true
javascriptruby-on-railswebpackwebpacker
2
Justin

Il semble qu'il n'y ait pas de application.css dans votre manifest.json ce qui signifie que vous n'importerez peut-être aucun css depuis vos fichiers javascript Webpack.

Si tout cela est vrai, vous pouvez corriger l'erreur de production par l'un des éléments suivants:

  • Correction rapide (temporaire): ajoutez extract_css: false à votre bloc production dans config/webpacker.yml (qui imiterait vos environnements locaux)
  • Si vous ne voulez pas compiler css avec Webpacker: supprimez <%= stylesheet_pack_tag 'application' %> à partir de la disposition de votre application
  • Si vous voulez compiler des css avec Webpacker: Importez au moins un fichier css depuis votre javascript Webpack
5
rossta

Si vous utilisez Rails 6+ avec webpacker, en raison de la dernière mise à jour Rails 6, les fichiers javascript et css sont déplacés sous app/javascript au lieu de app/assets.

app/javascript:
  ├── packs:
  │   # only webpack entry files here
  │   └── application.js
  └── src:
  │   └── application.css
  └── images:
      └── logo.svg

Mais si vous avez effectué une mise à niveau d'une ancienne version vers une nouvelle version mais que vous souhaitez quand même compiler CSS à partir de app/assets/stylesheets dossier puis suivez les réglages ci-dessous:

  1. mettre à jour ci-dessous dans config/webpacker.yml pour que le webpack inclue app/assets dans le chemin résolu.
// config/webpacker.yml

resolved_paths: ['app/assets']
  1. copier sous la ligne dans app/javascript/packs/application.js.
// app/javascript/packs/application.js

import 'stylesheets/application'

Cela devrait résoudre votre problème de compilation CSS lorsque vous exécutez bin/webpack-dev-server.

1
Anto Dominic