ActionView :: Template :: Error Webpacker не может найти пакет приложений - PullRequest
0 голосов
/ 19 января 2019

Мои настройки приложения - Rails 5.2.2 + Capistrano + Webpacker.

Я обновил webpacker с версии 4.0.0-pre.2 до 4.0.0-rc3, заменил javascript_pack_tag до javascript_packs_with_chunks_tag в соответствии с официальной рекомендацией.

Когда я пытаюсь загрузить страницу приложения в производство (разработка в порядке), я получаю следующую ошибку:

ActionView::Template::Error (Webpacker can't find application-bundle in /var/www/my_app/releases/20190118230511/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
  "application-bundle.js": "/packs/application-bundle-d19ff417e51c4d079a26.chunk.js",
  "application-bundle.js.map": "/packs/application-bundle-d19ff417e51c4d079a26.chunk.js.map",
  "entrypoints": {
    "application-bundle": {
      "js": [
        "/packs/runtime~application-bundle-1df5a9c12813aa129e1a.js",
        "/packs/2-f1a3e0883ed274e2b148.chunk.js",
        "/packs/application-bundle-d19ff417e51c4d079a26.chunk.js"
      ],
      "js.map": [
        "/packs/runtime~application-bundle-1df5a9c12813aa129e1a.js.map",
        "/packs/2-f1a3e0883ed274e2b148.chunk.js.map",
        "/packs/application-bundle-d19ff417e51c4d079a26.chunk.js.map"
      ],
      "css": [
        "/packs/2-b55ead47.chunk.css"
      ]
    }
  },
  "runtime~application-bundle.js": "/packs/runtime~application-bundle-1df5a9c12813aa129e1a.js",
  "runtime~application-bundle.js.map": "/packs/runtime~application-bundle-1df5a9c12813aa129e1a.js.map"
}
):

Все файлы представлены на сервере:

$ cd /var/www/my_app/releases/20190118232112/public/packs
$ ls -la
total 7248
drwxrwxr-x 2 my_app my_app   36864 Jan 18 23:23 .
drwxrwxr-x 6 my_app my_app    4096 Jan 11 10:39 ..
-rw-rw-r-- 1 my_app my_app  424506 Jan 18 23:23 2-b55ead47.chunk.css
-rw-rw-r-- 1 my_app my_app   52743 Jan 18 23:23 2-b55ead47.chunk.css.gz
-rw-rw-r-- 1 my_app my_app 3156323 Jan 18 23:23 2-f1a3e0883ed274e2b148.chunk.js
-rw-rw-r-- 1 my_app my_app  838813 Jan 18 23:23 2-f1a3e0883ed274e2b148.chunk.js.gz
-rw-rw-r-- 1 my_app my_app 2498292 Jan 18 23:23 2-f1a3e0883ed274e2b148.chunk.js.map
-rw-rw-r-- 1 my_app my_app  216512 Jan 18 23:23 application-bundle-d19ff417e51c4d079a26.chunk.js
-rw-rw-r-- 1 my_app my_app   34089 Jan 18 23:23 application-bundle-d19ff417e51c4d079a26.chunk.js.gz
-rw-rw-r-- 1 my_app my_app  125062 Jan 18 23:23 application-bundle-d19ff417e51c4d079a26.chunk.js.map
-rw-rw-r-- 1 my_app my_app     933 Jan 18 23:23 manifest.json
-rw-rw-r-- 1 my_app my_app     250 Jan 18 23:23 manifest.json.gz
-rw-rw-r-- 1 my_app my_app    1534 Jan 18 23:23 runtime~application-bundle-1df5a9c12813aa129e1a.js
-rw-rw-r-- 1 my_app my_app     785 Jan 18 23:23 runtime~application-bundle-1df5a9c12813aa129e1a.js.gz
-rw-rw-r-- 1 my_app my_app    2766 Jan 18 23:23 runtime~application-bundle-1df5a9c12813aa129e1a.js.map

Манифест также представляется правильным:

$ cat manifest.json
{
  "application-bundle.js": "/packs/application-bundle-d19ff417e51c4d079a26.chunk.js",
  "application-bundle.js.map": "/packs/application-bundle-d19ff417e51c4d079a26.chunk.js.map",
  "entrypoints": {
    "application-bundle": {
      "js": [
        "/packs/runtime~application-bundle-1df5a9c12813aa129e1a.js",
        "/packs/2-f1a3e0883ed274e2b148.chunk.js",
        "/packs/application-bundle-d19ff417e51c4d079a26.chunk.js"
      ],
      "js.map": [
        "/packs/runtime~application-bundle-1df5a9c12813aa129e1a.js.map",
        "/packs/2-f1a3e0883ed274e2b148.chunk.js.map",
        "/packs/application-bundle-d19ff417e51c4d079a26.chunk.js.map"
      ],
      "css": [
        "/packs/2-b55ead47.chunk.css"
      ]
    }
  },
  "runtime~application-bundle.js": "/packs/runtime~application-bundle-1df5a9c12813aa129e1a.js",
  "runtime~application-bundle.js.map": "/packs/runtime~application-bundle-1df5a9c12813aa129e1a.js.map"
}

Я проверил все файлы вручную, они обслуживаются Nginx.

package.json is:

{
  "name": "my_app",
  "private": true,
  "dependencies": {
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@casl/ability": "^2.4.2",
    "@casl/react": "^0.8.0",
    "@rails/webpacker": "^4.0.0-rc.3",
    "activestorage": "^5.2.1",
    "anchorme": "^1.1.2",
    "antd": "^3.12.3",
    "axios": "^0.18.0",
    "intl": "^1.2.5",
    "lodash": "latest",
    "moment": "^2.22.2",
    "prop-types": "^15.6.2",
    "query-string": "^6.2.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-icons-kit": "^1.1.7",
    "react-intl": "^2.7.2",
    "react-on-rails": "11.1.1",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-sizeme": "^2.5.2",
    "resolve-url-loader": "^2.3.0",
    "sanitize-html": "^1.19.3",
    "styled-jsx": "^3.0.2",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-eslint": "^9.0.0",
    "eslint": "^5.4.0",
    "eslint-plugin-flowtype": "^2.50.0",
    "eslint-plugin-react": "^7.11.1",
    "flow-bin": "^0.84.0",
    "webpack-dev-server": "^3.1.5"
  }
}

app / views / layout / application.slim выглядит следующим образом:

doctype html
html
  head
    title = meta_title
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
    = javascript_packs_with_chunks_tag 'application-bundle'
    = stylesheet_pack_tag 'application-bundle'
    meta name='viewport' content='width=device-width, initial-scale=1'
    link rel="apple-touch-icon" sizes="180x180" href=asset_path("favicon/apple-touch-icon.png")
    link rel="icon" type="image/png" sizes="32x32" href=asset_path("favicon/favicon-32x32.png")
    link rel="icon" type="image/png" sizes="16x16" href=asset_path("favicon/favicon-16x16.png")
    link rel="manifest" href=asset_path("favicon/site.webmanifest")
    link rel="mask-icon" href=asset_path("favicon/safari-pinned-tab.svg") color="#5bbad5"
    meta name="theme-color" content="#ffffff"
    = favicon_link_tag 'favicon/favicon.ico'
  body data-controller=params[:controller] data-action=params[:action]
    #wrapper
      = yield

Папка /public/packs указана в .gitignore.

config / webpacker.yml is:

# 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: []

  # 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
    - .js
    - .sass
    - .scss
    - .styl
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Verifies that versions and hashed value of the package contents in the project's package.json
  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: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

config / webpack / environment.js is:

const { environment } = require('@rails/webpacker');
const WebpackAssetsManifest = require('webpack-assets-manifest');

environment.loaders.append('stylus-loader', {
  test: /\.styl/,
  loader: 'style-loader!css-loader!stylus-loader'
});

// Enable the default config
environment.splitChunks();

module.exports = environment;

Кстати, environment.splitChunks(); здесь правильно?

config / webpack / production.js is:

process.env.NODE_ENV = process.env.NODE_ENV || 'production'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

config / initializers / Reaction_on_rails.rb is:

# frozen_string_literal: true

# See https://github.com/shakacode/react_on_rails/blob/master/docs/basics/configuration.md
# for many more options.

ReactOnRails.configure do |config|
  # This configures the script to run to build the production assets by webpack. Set this to nil
  # if you don't want react_on_rails building this file for you.
  config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/webpack"

  ################################################################################
  ################################################################################
  # TEST CONFIGURATION OPTIONS
  # Below options are used with the use of this test helper:
  # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
  ################################################################################

  # If you are using this in your spec_helper.rb (or rails_helper.rb):
  #
  # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
  #
  # with rspec then this controls what yarn command is run
  # to automatically refresh your webpack assets on every test run.
  #
  config.build_test_command = "RAILS_ENV=test bin/webpack"

  ################################################################################
  ################################################################################
  # SERVER RENDERING OPTIONS
  ################################################################################
  # This is the file used for server rendering of React when using `(prerender: true)`
  # If you are never using server rendering, you should set this to "".
  # Note, there is only one server bundle, unlike JavaScript where you want to minimize the size
  # of the JS sent to the client. For the server rendering, React on Rails creates a pool of
  # JavaScript execution instances which should handle any component requested.
  #
  # While you may configure this to be the same as your client bundle file, this file is typically
  # different. You should have ONE server bundle which can create all of your server rendered
  # React components.
  #
  config.server_bundle_js_file = "application-bundle.js"

  config.i18n_dir = Rails.root.join("app", "javascript", "i18n")

  config.i18n_yml_dir = Rails.root.join("config", "locales")
end

Есть идеи, что может быть не так?

...