1

This is a similar issue to this one: JSS vue - Error with server.bundle.js after jss deploy package

But unfortunately I can't comment on that one because my rep is not high enough. I believe the issue is stemming from at least one of the node modules/Vue plugins I am importing and using on the site. One is using the window variable quite a few times. Is there any way to go around this? I can't control the use of window because it's used in a 3rd party plugin.

Any help is appreciated!

Improve this question

3 Answers 3

Reset to default
1

You can probably polyfill window as a Node global so that it has something to work against. However, if the library is not designed to support SSR there may be other issues getting it to work.

Improve this answer
4
  • I found a node package that might work as a polyfill, do you know where I might include this in the webpack pipeline so that it gets outputted as a global variable? The way this starter project is setup is somewhat foreign to me.
    – atflick
    Commented Sep 20, 2018 at 17:21
  • You would likely just import the module in the /server/server.js entry point, but hard to say without knowing which package you're looking at. Presumably it will add a window object to the node global object. As Kam mentioned though, you may run into other issues during SSR with this library, depending on what it's expecting to do with window.
    – Adam Weber
    Commented Sep 20, 2018 at 18:01
  • Is it as simple as importing something like this npmjs.com/package/window at the top of server.js? import Window from 'window'; export const window = new Window();
    – atflick
    Commented Sep 20, 2018 at 20:04
  • Still not having any luck with trying many things. I feel like something should be built into these sample apps, otherwise it will limit a lot of frontend plugins and prevent people from wanting to use this JSS setup.
    – atflick
    Commented Sep 21, 2018 at 18:23
0

Ok so I solved this by adding the plugins through a conditional in the main.js file. Before I was adding directly in the components but this wasn't working. I'm not sure if this is a permanent solution though. I may look into adding Nuxt.js to this project to better handle the SSR aspect of Sitecore JSS. 

import i18ninit from './i18n';
import { createApp } from './createApp';
import './registerServiceWorker';
import Vue from 'vue';
import VueFullPage from 'vue-fullpage.js';
import createjs from 'createjs-module';

i18ninit().then((i18n) => {
  // HTML element to place the app into
  const rootElement = document.getElementById('root');

  // retrieve the initial app state if it is defined
  const initialState = window.__JSS_STATE__ || null;

  if (typeof window !== 'undefined') {
    // register Vue full page global component
    Vue.use(VueFullPage);
    Vue.prototype.$createjs = createjs;
  }

  const { app } = createApp(initialState, i18n);
  app.$mount(rootElement);
});
Improve this answer
0

I ran into this with a 3rd party library (Flickity fullscreen) that wasn't checking if window is defined. Instead of using import I changed it to use require()

if (typeof window !== 'undefined') {
  // window is undefined on SSR and fullscreen.js doesn't check for it
  require('flickity-fullscreen/fullscreen.js');
  require('flickity-fullscreen/fullscreen.css');
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.