ActionView::Template::Error: Webpacker can't find application in /app/public/packs/manifest.json

[yoonwaiyan]

Hello, I know this is not a new issue and I've checked multiple sources to see if the solutions are helpful but it yields no positive outcome, including the upgrade guide and #2071. I've migrated from webpacker 3.x to 4.2.2 recently and it works locally, but I receive this error when it's deployed to the Heroku staging server:

Webpacker::Manifest::MissingEntryError: Webpacker can't find application in /app/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:
{
}

File "/app/app/views/layouts/_head.html.erb" line 26 in _app_views_layouts__head_html_erb__3032736322181176385_70329575856280

I have stylesheets in both assets and the javascript folder, and here are few lines from the _head.html.erb partial:

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

and both my stylesheets are .scss files and there's no .css file in the project.

This is my webpacker.yml after upgrade:

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: true

  # 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: true

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

  extensions:
    - .mjs
    - .jsx
    - .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: true
    # 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
    pretty: 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 the 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

Am I missing anything?

[yoonwaiyan]

One thing I noticed is that the compilation works but there's no public/packs folder in my Heroku instance. This is the build log during precompilation:

-----> Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       fatal: not a git repository: '/tmp/build_02f404ed8c5fc4d5512e7592ced961a5/.git'
       yarn install v1.16.0
       [1/4] Resolving packages...
       [2/4] 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.
       info fsevents@1.2.11: The platform "linux" is incompatible with this module.
       info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
       [3/4] Linking dependencies...
       warning " > babel-loader@8.0.6" has unmet peer dependency "webpack@>=2".
       warning "@storybook/addon-actions > @storybook/api@5.3.14" has unmet peer dependency "regenerator-runtime@*".
       warning "@storybook/addon-actions > react-inspector > storybook-chromatic@2.2.2" has unmet peer dependency "@storybook/core@3.* || 4.* || 5.*".
       warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0".
       warning " > webpack-cli@3.2.3" has unmet peer dependency "webpack@4.x.x".
       warning " > webpack-dev-server@3.10.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
       [4/4] Building fresh packages...
       success Saved lockfile.
       Done in 88.42s.
       yarn install v1.16.0
       [1/4] Resolving packages...
       [2/4] 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.
       info fsevents@1.2.11: The platform "linux" is incompatible with this module.
       info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
       [3/4] Linking dependencies...
       warning " > babel-loader@8.0.6" has unmet peer dependency "webpack@>=2".
       warning "@storybook/addon-actions > @storybook/api@5.3.14" has unmet peer dependency "regenerator-runtime@*".
       warning "@storybook/addon-actions > react-inspector > storybook-chromatic@2.2.2" has unmet peer dependency "@storybook/core@3.* || 4.* || 5.*".
       warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0".
       warning " > webpack-cli@3.2.3" has unmet peer dependency "webpack@4.x.x".
       warning " > webpack-dev-server@3.10.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
       [4/4] Building fresh packages...
       success Saved lockfile.
       Done in 14.11s.
       Compiling...
       Compiled all packs in /tmp/build_02f404ed8c5fc4d5512e7592ced961a5/public/packs
       One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
        - webpack-cli (https://github.com/webpack/webpack-cli)
          The original webpack full-featured CLI.
       We will use "yarn" to install the CLI via "yarn add -D".
       Do you want to install 'webpack-cli' (yes/no): 
       
       Asset precompilation completed (115.38s)
       Cleaning assets
       Running: rake assets:clean
       fatal: not a git repository: '/tmp/build_02f404ed8c5fc4d5512e7592ced961a5/.git'

This line caught me:

fatal: not a git repository: '/tmp/build_02f404ed8c5fc4d5512e7592ced961a5/.git'

Any idea why this error occurs?

[yoonwaiyan]

I've made it work. The webpack didn't compile at all as webpack-cli is not installed in the instance. It's solved by simply move the webpack-cli from dev dependencies to dependencies. I've also noticed that webpacker didn't pick up my main.scss well and I've renamed to application.scss instead.

[douglasrosa0110]

• clean all packages of node and re-install the correct described in dependencies of package.json

rm -rf node_modules
rake webpacker:clobber
yarn add <packages-used>
yarn --check-files
RAILS_ENV=... rake webpacker:compile

• certify that you have all files called in pack methods javascript_pack_tag, stylesheet_pack_tag

[stochastic-thread]

Can you explain this:

I don't get it

[dep]

@yoonwaiyan

I've made it work. The webpack didn't compile at all as webpack-cli is not installed in the instance. It's solved by simply move the webpack-cli from dev dependencies to dependencies.

I could kiss you right now.