Webpacker: javascript is not load in Production

[yongwoon]

My project work well in local env.

But, When I deploy the app to ec2 via capistrano 3, Vue js does not work. And also no error message?

What's problem ?

Project Env

Rails 5.2
webpacker verson: 3.5
vue version: 2.5.16
vue-loader 14.2.2
vue-template-compiler 2.5.16

package.json

{
  "name": "dream_line",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "3.5",
    "vue": "^2.5.16",
    "vue-loader": "14.2.2",
    "vue-template-compiler": "^2.5.16"
  },
  "devDependencies": {
    "webpack-dev-server": "2.11.2"
  }
}

environments/production.rb

Rails.application.configure do
  config.webpacker.check_yarn_integrity = false
  config.cache_classes = true
  config.eager_load = true
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = false
  config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
  config.assets.js_compressor = :uglifier
  config.assets.css_compressor = :sass
  config.assets.compile = false
  config.active_storage.service = :local
  config.log_level = :debug
  config.log_tags = [ :request_id ]
  config.i18n.fallbacks = true
  config.active_support.deprecation = :notify
  config.log_formatter = ::Logger::Formatter.new

  if ENV["RAILS_LOG_TO_STDOUT"].present?
    logger           = ActiveSupport::Logger.new(STDOUT)
    logger.formatter = config.log_formatter
    config.logger    = ActiveSupport::TaggedLogging.new(logger)
  end
  config.active_record.dump_schema_after_migration = false
end

config/webpack/production.js

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

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

[gurkanoluc]

I'm having the same issue.

[xlanex6]

So I am...

[xlanex6]

@yongwoon / @gurkanoluc Do you find a solution ? I'm still on it

[gauravtiwari]

Could you please share an example on github?

[feliperaul]

Same issue here as well.

[feliperaul]

@gauravtiwari Take a lok at a real world, production example:

https://planilha.tramitacaointeligente.com.br/planilhas/ED2sUXz32-R9CJKdkmtf8Q

If you want to see the code of this example, I posted it on SO: https://stackoverflow.com/questions/50957238/vue-js-app-works-in-development-but-not-mounting-template-in-production-with-rai

[torce]

Same issue here.
I have tried with several browsers. happens with chromium 57, Chrome 67 but surprisingly works with Firefox ESR 52.
When I select the element <!-- --> and reload the page, I can see in the inspector for a moment the <div> of the vue element, then disappears.

[feliperaul]

@torce I managed to finally fix it changing the way of mounting the component.

Try import Vue from 'vue' (instead of vue/dist/vue.esm) and then:

const app = new Vue({
    el: domElement,
    render: h => h(RootComponent)
  })

The comments that appear in the hello_vue.js scaffold tell you that you can choose between using the DOM as your template OR loading the component with a render function; they both do work in development, but only the latter (loading the component with a render function, using vue instead of vue/dist/vue.esm and render: h => h(RootComponent) worked for me in production.

This has been, by far, the longest, most frustrating debugging session of my life, since there are absolutely no errors in console, you just stare into a blank screen, and Vue is running since it removes the DOM element it was mounted to from the DOM.

Source of solution: https://stackoverflow.com/a/48651338/1290457

[torce]

I solved it finally, I still don't know exactly what happened, but it seems related with vue-router.
I was deploying to a subpath in the server (mydomain.com/testing) and using the history mode of vue-router. Things that I have tried:

• Changing the history mode to the default one solved it.
• Changing the deployment path to the root of the domain worked also.
• Setting the base parameter of vue-router as suggested here worked.

It still surprises me that this doesn't show any error or warning in the console. I don't know if the problem is related with vuejs, vue-router, webpacker or if this is the intended behaviour.

[howtwizer]

In case of Vue.js and production problems.
In my case problem was in content security policy recommendations from webpacker docs.

Rails.application.config.content_security_policy do |policy|
  if Rails.env.development?
    policy.script_src :self, :https, :unsafe_eval
  else
    policy.script_src :self, :https
  end
end

Removing else part fixing production.

Chrome silently ignoring this. Firefox shows warnings.

[jits]

Just to add to @howtwizer's suggestion above, which solved the issue for us:

We use FirebaseUI, which needs the ability to load third party scripts. Thus removing the CSP rule solved the issue in a non-development environment.