Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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!

Issue Analytics

State:
Created 4 years ago
Comments:5

Top GitHub Comments

1reaction

jeanpcocommented, Jun 3, 2019

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

0reactions

JoshTheDerfcommented, Jun 4, 2019

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 .