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!

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.

  • 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 Sep 20 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 Sep 20 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 Sep 20 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 Sep 21 at 18:23
up vote 0 down vote accepted

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);
}); 

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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