Search code examples
ruby-on-railsherokuwebpacker

Push to heroku staging master: Valid values are "development", "test", and "production". Instead, received: "staging"

I have a rails app and I want to send changes I made to the staging environment on the heroku server (cli: git push staging master). However, when I push my code I get the following error.

remote:        webpack config /tmp/build_73f0e68c/config/webpack/staging.js not found, please run 'bundle exec rails webpacker:install' to install Webpacker with default configs or add the missing config file for your custom environment.
remote:        
remote: 
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !   Push rejected to pacific-crag-46601.
remote: 
To https://git.heroku.com/pacific-crag-46601.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/pacific-crag-46601.git'

Afterwards I created inside rails project config/webpack/ a staging.js and added the following code:

process.env.NODE_ENV = process.env.NODE_ENV || 'production'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()

And put inside config/webpacker.yml the following code:

staging:
<<: *default
compile: false
cache_manifest: true

After doing these 2 things I did git push staging master and got the following error:

remote:        Entrypoint application = js/application-701e5a6394eff986ab51.js js/application-701e5a6394eff986ab51.js.map
remote:        Entrypoint cleave = js/cleave-936d8527979140c68ffa.js js/cleave-936d8527979140c68ffa.js.map
remote:        [0] ./app/javascript/packs/application.js 2.79 KiB {0} [built] [failed] [1 error]
remote:        [1] ./app/javascript/packs/cleave.js 2.79 KiB {1} [built] [failed] [1 error]
remote:        
remote:        ERROR in ./app/javascript/packs/application.js
remote:        Module build failed (from ./node_modules/babel-loader/lib/index.js):
remote:        Error: Please specify a valid `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: "staging".
remote:            at module.exports (/tmp/build_b5aefc26/babel.config.js:9:11)
remote:            at readConfigJS (/tmp/build_b5aefc26/node_modules/@babel/core/lib/config/files/configuration.js:205:15
remote:            at readConfigJS.next (<anonymous>)
remote:            at Function.<anonymous> (/tmp/build_b5aefc26/node_modules/@babel/core/lib/gensync-utils/async.js:26:3)
remote:            at Generator.next (<anonymous>)
remote:            at evaluateSync (/tmp/build_b5aefc26/node_modules/gensync/index.js:251:28)
remote:            at Function.sync (/tmp/build_b5aefc26/node_modules/gensync/index.js:89:14)
remote:            at sync (/tmp/build_b5aefc26/node_modules/@babel/core/lib/gensync-utils/async.js:66:25)
remote:            at sync (/tmp/build_b5aefc26/node_modules/gensync/index.js:182:19)
remote:            at onFirstPause (/tmp/build_b5aefc26/node_modules/gensync/index.js:210:24)
remote:            at Generator.next (<anonymous>)
remote:            at cachedFunction (/tmp/build_b5aefc26/node_modules/@babel/core/lib/config/caching.js:68:46)
remote:            at cachedFunction.next (<anonymous>)
remote:            at evaluateSync (/tmp/build_b5aefc26/node_modules/gensync/index.js:251:28)
remote:            at /tmp/build_b5aefc26/node_modules/gensync/index.js:31:34
remote:            at Array.map (<anonymous>)
remote:            at Function.sync (/tmp/build_b5aefc26/node_modules/gensync/index.js:31:22)
remote:            at Function.all (/tmp/build_b5aefc26/node_modules/gensync/index.js:210:24)
remote:            at Generator.next (<anonymous>)
remote:            at loadOneConfig (/tmp/build_b5aefc26/node_modules/@babel/core/lib/config/files/configuration.js:133:45)
remote:            at loadOneConfig.next (<anonymous>)
remote:            at buildRootChain (/tmp/build_b5aefc26/node_modules/@babel/core/lib/config/config-chain.js:84:51)
remote:            at buildRootChain.next (<anonymous>)
remote:            at loadPrivatePartialConfig (/tmp/build_b5aefc26/node_modules/@babel/core/lib/config/partial.js:101:62
remote:            at loadPrivatePartialConfig.next (<anonymous>)
remote:            at Function.<anonymous> (/tmp/build_b5aefc26/node_modules/@babel/core/lib/config/partial.js:140:25)
remote:            at Generator.next (<anonymous>)
remote:            at evaluateSync (/tmp/build_b5aefc26/node_modules/gensync/index.js:251:28)
remote:            at Function.sync (/tmp/build_b5aefc26/node_modules/gensync/index.js:89:14)
remote:            at Object.<anonymous> (/tmp/build_b5aefc26/node_modules/@babel/core/lib/config/index.js:43:61)
remote:            at Object.<anonymous> (/tmp/build_b5aefc26/node_modules/babel-loader/lib/index.js:151:26)
remote:            at Generator.next (<anonymous>)
remote:            at asyncGeneratorStep (/tmp/build_b5aefc26/node_modules/babel-loader/lib/index.js:3:103)
remote:            at _next (/tmp/build_b5aefc26/node_modules/babel-loader/lib/index.js:5:194)
remote:            at /tmp/build_b5aefc26/node_modules/babel-loader/lib/index.js:5:364
remote:            at new Promise (<anonymous>)
remote:        
remote:        ERROR in ./app/javascript/packs/cleave.js
remote:        Module build failed (from ./node_modules/babel-loader/lib/index.js):
remote:        Error: Please specify a valid `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: "staging".
remote:            at module.exports (/tmp/build_b5aefc26/babel.config.js:9:11)
remote:            at readConfigJS (/tmp/build_b5aefc26/node_modules/@babel/core/lib/config/files/configuration.js:205:15
remote:            at readConfigJS.next (<anonymous>)
remote:            at Function.<anonymous> (/tmp/build_b5aefc26/node_modules/@babel/core/lib/gensync-utils/async.js:26:3)
remote:            at Generator.next (<anonymous>)
remote:            at evaluateSync (/tmp/build_b5aefc26/node_modules/gensync/index.js:251:28)
remote:            at Function.sync (/tmp/build_b5aefc26/node_modules/gensync/index.js:89:14)
remote:            at sync (/tmp/build_b5aefc26/node_modules/@babel/core/lib/gensync-utils/async.js:66:25)
remote:            at sync (/tmp/build_b5aefc26/node_modules/gensync/index.js:182:19)
remote:            at onFirstPause (/tmp/build_b5aefc26/node_modules/gensync/index.js:210:24)
remote:            at Generator.next (<anonymous>)
remote:            at cachedFunction (/tmp/build_b5aefc26/node_modules/@babel/core/lib/config/caching.js:68:46)
remote:            at cachedFunction.next (<anonymous>)
remote:            at evaluateSync (/tmp/build_b5aefc26/node_modules/gensync/index.js:251:28)
remote:            at /tmp/build_b5aefc26/node_modules/gensync/index.js:31:34
remote:            at Array.map (<anonymous>)
remote:            at Function.sync (/tmp/build_b5aefc26/node_modules/gensync/index.js:31:22)
remote:            at Function.all (/tmp/build_b5aefc26/node_modules/gensync/index.js:210:24)
remote:            at Generator.next (<anonymous>)
remote:            at loadOneConfig (/tmp/build_b5aefc26/node_modules/@babel/core/lib/config/files/configuration.js:133:45)
remote:            at loadOneConfig.next (<anonymous>)
remote:            at buildRootChain (/tmp/build_b5aefc26/node_modules/@babel/core/lib/config/config-chain.js:84:51)
remote:            at buildRootChain.next (<anonymous>)
remote:            at loadPrivatePartialConfig (/tmp/build_b5aefc26/node_modules/@babel/core/lib/config/partial.js:101:62
remote:            at loadPrivatePartialConfig.next (<anonymous>)
remote:            at Function.<anonymous> (/tmp/build_b5aefc26/node_modules/@babel/core/lib/config/partial.js:140:25)
remote:            at Generator.next (<anonymous>)
remote:            at evaluateSync (/tmp/build_b5aefc26/node_modules/gensync/index.js:251:28)
remote:            at Function.sync (/tmp/build_b5aefc26/node_modules/gensync/index.js:89:14)
remote:            at Object.<anonymous> (/tmp/build_b5aefc26/node_modules/@babel/core/lib/config/index.js:43:61)
remote:            at Object.<anonymous> (/tmp/build_b5aefc26/node_modules/babel-loader/lib/index.js:151:26)
remote:            at Generator.next (<anonymous>)
remote:            at asyncGeneratorStep (/tmp/build_b5aefc26/node_modules/babel-loader/lib/index.js:3:103)
remote:            at _next (/tmp/build_b5aefc26/node_modules/babel-loader/lib/index.js:5:194)
remote:            at /tmp/build_b5aefc26/node_modules/babel-loader/lib/index.js:5:364
remote:            at new Promise (<anonymous>)
remote:        
remote: 
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !   Push rejected to pacific-crag-46601.
remote: 
To https://git.heroku.com/pacific-crag-46601.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/pacific-crag-46601.git'

So I don't understand what I need to do now. I found some information about the problem here. However, it doesn't help me understand what I need to do specifically.

Here's the complete file content of config/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
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  additional_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

  # 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
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'

staging:
  <<: *default
  compile: false
  cache_manifest: true

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

I'd appreciate greatly any help with this. Let me know if you need more info.

Solution

  • The NODE_ENV and RAILS_ENV environment variables should be set one of three values: development, test, or production.

    Your staging and production servers should run with these variables set to production.

    If you need to point these production servers at a different service, or configure them differently, use more environment variables to configure them (e.g. - DATABASE_URL will be different on your staging server than on your production server).

    The idea is that staging is a production-like environment. It's your proving ground for new features, before you deploy them to production servers.