JS lifecycle methods & dependency methods but firing. However, mounted console.log are being logged.

First of I just want to say that I've read this thread but could spot the relevant info to my problem. https://github.com/chrisvfritz/prerender-spa-plugin/issues/31.

Question breakdown: 1 - Explanation of the problem 2 - Example of what's not working 3 - Project files with relevant code

My problem is the following:

The JS and other dependencies such as Vuelidate and ElementUI does not seem to work, but I can log stuff to the console and do stuff in mounted() like such:

mounted: function () {

      console.log(this.$refs['arrow']);
      console.log(document.querySelectorAll('.middle-box'));

      this.$nextTick(function () {
        TweenLite.fromTo('.middle-box', 2, {y: -10, opacity: 0, delay: 1}, {y: 0, opacity: 1, delay: 1});
        TweenLite.fromTo('h2', 2, {y: -10, opacity: 0, delay: 1}, {y: 0, opacity: 1, delay: 1});
        TweenLite.fromTo('#logo-second', 2, {y: -10, opacity: 0, delay: 1}, {y: 0, opacity: 1, delay: 1});
        TweenLite.fromTo('.bottom-right-box', 2, {y: -10, opacity: 0, delay: 1}, {y: 0, opacity: 1, delay: 1});
      })
    }

I'm getting this odd warning from VSCode and I'm not sure what to do with it, but I'm adding a screenshot in case it'd relevant.

Screen Shot 2019-05-18 at 12 01 33 PM

Other than the stuff inside mounted(), nothing seems to work. The following are not firing at all:

data () {
      return {
        active: false,
        name: '',
        password: '',
        email: '',
        message: ''
      }
    },
    validations: {
      email: {
        required,
        email
      },
      name: {
        required
      }
    },
    methods: {
      mouseOver: function() {
        this.active = !this.active;
        this.$refs['arrow'].style.transform = "translateX(50px)";
        this.$refs['arrow'].style.animationName = "TextNeon"
        this.$refs['arrow'].style.animationDuration = "4s"
        this.$refs['email-h3'].style.transform = "translateX(-30px)"
        this.$refs['email-h3'].style.animationName = "TextNeon"
        this.$refs['email-h3'].style.animationDuration = "4s"
      },

      mouseLeave: function() {
        this.active = !this.active;
        console.log("mouseLeave");
        this.$refs['arrow'].style.transform = "translateX(0px)";
        this.$refs['arrow'].style.animationName = "TextNeonOut"
        this.$refs['arrow'].style.animationDuration = "1s"
        this.$refs['email-h3'].style.transform = "translateX(0px)"
        this.$refs['email-h3'].style.animationName = "TextNeonOut"
        this.$refs['email-h3'].style.animationDuration = "1s"
      }
    },

From package.json

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.2.0",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^2.30.1",
    "prerender-spa-plugin": "^3.4.0",
    "vue-loader": "^13.7.3",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.11.5"
 }

From main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'  // Add this
import router from './router'       // Add this
import Vuelidate from 'vuelidate';

import ElementUI from 'element-ui';

Vue.use(ElementUI);
Vue.use(VueRouter);
Vue.use(Vuelidate);

const root = new Vue({
  el: '#app',
  router,
  render: h => h(App),
  mounted () {
    // You'll need this for renderAfterDocumentEvent.
    document.dispatchEvent(new Event('render-event'))
  }
})

from index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="google-site-verification" content="Mfh0KP-FE-LrI_AlishCVUth0GUttSi3fBSjOPG4KoY" />
    <link href="https://fonts.googleapis.com/css?family=Lora:300;400,400i,700,700i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Yantramanav:100,300" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>coma</title>
  </head>
  <body>
    <div id="app">
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/CSSPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/easing/EasePack.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenLite.min.js"></script>
  </body>
</html>

From webpack.config.js my imports

var path = require('path')
var webpack = require('webpack')
var PrerenderSpaPlugin = require('prerender-spa-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')

From process.env.NODE_ENV === 'production'

new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new HtmlWebpackPlugin({
      template: 'index.html',
      filename: path.resolve(__dirname, 'dist/index.html')
    }),
    new PrerenderSpaPlugin({
      staticDir: path.resolve(__dirname, './dist'),
      routes: [
        '/', 
        '/about', 
        '/contact',
        '/gallery', 
        '/exhibits',
        '/asia',
        '/beautiful-darkness',
        '/forest',
        '/placelessness',
        '/the-glow',
        '/rediscover-the-sublime',
        '/inner-outer-worlds',
        '/the-world-within'
      ],
      postProcessHtml: function (context) {
          var titles = {
            '/': 'Home',
            '/about': 'About',
            '/contact': 'Contact',
            '/gallery': 'Gallery',
            '/exhibits': 'Exhibits',
            '/asia': 'Asia',
            '/beautiful-darkness': 'Beautiful Darkness',
            '/forest': 'Forest',
            '/placelessness': 'Placelessness',
            '/the-glow': 'The Glow',
            '/rediscover-the-sublime': 'Rediscover The Sublime',
            '/inner-outer-worlds': 'Inner Outer Worlds',
            '/the-world-within': 'The World Within'
          }
          return context.html.replace(
            /<title>[^<]*<\/title>/i,
            '<title>' + titles[context.route] + '</title>'
          )
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })

I'm also attaching the entire project as a ZIP here. I have removed all the assets so I can upload this.

coma.zip

Thank you so much in advance. Hopefully someone known!

Hi @jeanpco. Thought I commented on this already, but apparently not. I appreciate you going through all the effort to include the detail you've provided.

The issue appears to be that you have not configured prerender-spa-plugin to listen for the render-event event.

Try adding the following.

webpack.config.js

    new PrerenderSpaPlugin({
      staticDir: path.resolve(__dirname, './dist'),
      // Add this section to tell prerender to render when "render-event" is fired.
      renderer: new PrerenderSpaPlugin.PuppeteerRenderer({
        renderAfterDocumentEvent: 'render-event'
      }),
      routes: [
        '/', 
        '/about', 
        '/contact',
        '/gallery', 
        '/exhibits',
        '/asia',
        '/beautiful-darkness',
        '/forest',
        '/placelessness',
        '/the-glow',
        '/rediscover-the-sublime',
        '/inner-outer-worlds',
        '/the-world-within'
      ],
      postProcessHtml: function (context) {
          var titles = {
            '/': 'Home',
            '/about': 'About',
            '/contact': 'Contact',
            '/gallery': 'Gallery',
            '/exhibits': 'Exhibits',
            '/asia': 'Asia',
            '/beautiful-darkness': 'Beautiful Darkness',
            '/forest': 'Forest',
            '/placelessness': 'Placelessness',
            '/the-glow': 'The Glow',
            '/rediscover-the-sublime': 'Rediscover The Sublime',
            '/inner-outer-worlds': 'Inner Outer Worlds',
            '/the-world-within': 'The World Within'
          }
          return context.html.replace(
            /<title>[^<]*<\/title>/i,
            '<title>' + titles[context.route] + '</title>'
          )
        }
    }),

That should be all you need.

Thank you so much! I will give it a shot!

Humm.. Seems like I'm still getting the same issue.

However, looking at the doc https://github.com/chrisvfritz/prerender-spa-plugin for renderAfterDcoumentEvent. It says:

// Optional - Wait to render until the specified event is dispatched on the document.
// eg, with `document.dispatchEvent(new Event('custom-render-trigger'))`
renderAfterDocumentEvent: 'custom-render-trigger', ( 'render-event' ) in our case.

But where do we actually dispatch that render-event?

My webpack.config now looks like this.

var path = require('path')
var webpack = require('webpack')
var PrerenderSpaPlugin = require('prerender-spa-plugin') // Here
var HtmlWebpackPlugin = require('html-webpack-plugin') // And here

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new HtmlWebpackPlugin({
      template: 'index.html',
      filename: path.resolve(__dirname, 'dist/index.html')
    }),

    new PrerenderSpaPlugin({
      staticDir: path.resolve(__dirname, './dist'),
      renderer: new PrerenderSpaPlugin.PuppeteerRenderer({
        renderAfterDocumentEvent: 'render-event'
      }),
      routes: [
        '/', 
        '/about', 
        '/contact',
        '/gallery', 
        '/exhibits',
        '/asia',
        '/beautiful-darkness',
        '/forest',
        '/placelessness',
        '/the-glow',
        '/rediscover-the-sublime',
        '/inner-outer-worlds',
        '/the-world-within'
      ],
      postProcessHtml: function (context) {
          var titles = {
            '/': 'Home',
            '/about': 'About',
            '/contact': 'Contact',
            '/gallery': 'Gallery',
            '/exhibits': 'Exhibits',
            '/asia': 'Asia',
            '/beautiful-darkness': 'Beautiful Darkness',
            '/forest': 'Forest',
            '/placelessness': 'Placelessness',
            '/the-glow': 'The Glow',
            '/rediscover-the-sublime': 'Rediscover The Sublime',
            '/inner-outer-worlds': 'Inner Outer Worlds',
            '/the-world-within': 'The World Within'
          }
          return context.html.replace(
            /<title>[^<]*<\/title>/i,
            '<title>' + titles[context.route] + '</title>'
          )
        }
    }),

    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

Thank you!

It looks like you're already dispatching that event in your main component's mounted hook. If not, you'll need to do so there.

On Tue, Jun 4, 2019, 7:21 AM Jean-P Firme de design web < notifications@github.com> wrote:

Humm.. Seems like I'm still getting the same issue.

However, looking at the doc https://github.com/chrisvfritz/prerender-spa-plugin for renderAfterDcoumentEvent. It says:

// Optional - Wait to render until the specified event is dispatched on the document. // eg, with document.dispatchEvent(new Event('custom-render-trigger')) renderAfterDocumentEvent: 'custom-render-trigger', ( 'render-event' ) in our case.

But where do we actually dispatch that render-event?

My webpack.config now looks like this.

var path = require('path') var webpack = require('webpack') var PrerenderSpaPlugin = require('prerender-spa-plugin') // Here var HtmlWebpackPlugin = require('html-webpack-plugin') // And here

module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/', filename: 'build.js' }, module: { rules: [ { test: /.css$/, use: [ 'vue-style-loader', 'css-loader' ], }, { test: /.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] }, devServer: { historyApiFallback: true, noInfo: true, overlay: true }, performance: { hints: false }, devtool: '#eval-source-map' }

if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new HtmlWebpackPlugin({ template: 'index.html', filename: path.resolve(__dirname, 'dist/index.html') }),
new PrerenderSpaPlugin({
  staticDir: path.resolve(__dirname, './dist'),
  renderer: new PrerenderSpaPlugin.PuppeteerRenderer({
    renderAfterDocumentEvent: 'render-event'
  }),
  routes: [
    '/',
    '/about',
    '/contact',
    '/gallery',
    '/exhibits',
    '/asia',
    '/beautiful-darkness',
    '/forest',
    '/placelessness',
    '/the-glow',
    '/rediscover-the-sublime',
    '/inner-outer-worlds',
    '/the-world-within'
  ],
  postProcessHtml: function (context) {
      var titles = {
        '/': 'Home',
        '/about': 'About',
        '/contact': 'Contact',
        '/gallery': 'Gallery',
        '/exhibits': 'Exhibits',
        '/asia': 'Asia',
        '/beautiful-darkness': 'Beautiful Darkness',
        '/forest': 'Forest',
        '/placelessness': 'Placelessness',
        '/the-glow': 'The Glow',
        '/rediscover-the-sublime': 'Rediscover The Sublime',
        '/inner-outer-worlds': 'Inner Outer Worlds',
        '/the-world-within': 'The World Within'
      }
      return context.html.replace(
        /<title>[^<]*<\/title>/i,
        '<title>' + titles[context.route] + '</title>'
      )
    }
}),

new webpack.optimize.UglifyJsPlugin({
  sourceMap: true,
  compress: {
    warnings: false
  }
}),
new webpack.LoaderOptionsPlugin({
  minimize: true
})
]) }

Thank you!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/chrisvfritz/prerender-spa-plugin/issues/318?email_source=notifications&email_token=ABMW76ZQPOT5VLY2IW2FDELPYZF3VA5CNFSM4HN2SQSKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODW4H6KA#issuecomment-498630440, or mute the thread https://github.com/notifications/unsubscribe-auth/ABMW764JOEY7UVY24BQ6UI3PYZF3VANCNFSM4HN2SQSA .

chrisvfritz / prerender-spa-plugin

JS lifecycle methods & dependency methods but firing. However, mounted console.log are being logged. #318