Rails 4: getting Webpacker to work with CircleCI

Question

I am trying to integrate Webpacker in a Rails 4 app I am working on. I've added the gem to the Gemfile and run the directives to get everything set up for using Webpacker and Vue.js. The assets are compiling fine in development but when I push this to our CI pipeline, I am seeing CircleCI return the following error:

ActionView::Template::Error:         ActionView::Template::Error: Webpacker can't find application in /home/circleci/app/public/packs-test/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:
  {
  }

not sure which of these errors I need to address.

My config/webpacker.yml file is just using default settings, and looks like this:

# 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:
    - .mjs
    - .js
    - .sass
    - .scss
    - .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

do I need to correct my manifest file? If so, how?

Thanks in advance!

Answer 1

Solved by adding the following to .circleci/config.yml:

Docker image:

image: circleci/ruby:<<ruby_version>>-node-browsers

(this is necessary so that we have a Docker image with Node.js preinstalled)

Environment variables:

NODE_ENV: test

This is necessary so that the webpacker:compile step runs under the test env.

And the following step:

yarn_install:
  steps:
    - restore_cache:
        keys:
          - yarn-cache-v1-{{ checksum "yarn.lock" }}
          - yarn-cache-v1-
    - run: yarn install --cache-folder ~/.cache/yarn
    - run: bundle exec rake webpacker:compile
    - save_cache:
        key: yarn-cache-v1-{{ checksum "yarn.lock" }}
        paths:
          - ~/.cache/yarn

This seems to have done the trick!

Answer 2

I ran into this problem recently and tried the accepted solution but it didn't work for me. I got the same error as the OP when I ran my specs on CircleCI.

My solution was to include yarn install and rails webpacker:compile in my existing bundle step as follows:

      - run: yarn install
      - run: bin/rails webpacker:compile

I then added public/packs-test to the folders in the cache:

      - save_cache:
          key: v1-bundle-{{ checksum "Gemfile.lock" }}-{{ checksum "yarn.lock" }}
          paths:
            - vendor/bundle
            - public/packs-test

As you can see I added the checksum of the yarn.lock file to the cache key to make sure that the cache was regenerated if anything changed in the packs.