Good Morning,

Yesterday I was working on a fresh install of Sitecore 9.1 and followed the documentation for JSS with vue.

Everything was fine. I was able to connect my local app with my Sitecore.

The API Key return a json.

Then I started to add new components and made a deploy package. In the Content Editor I can see my app, and all components inside. Imgur

Nevertheless, in Experience Editor I have this error:

Error Rendering Sitecore.JavaScriptServices.ViewEngine.Presentation.JsLayoutRenderer: window is not defined ReferenceError: window is not defined at C:\inetpub\wwwroot\vue.jss\dist\my-app\server.bundle.js:1:396975 at C:\inetpub\wwwroot\vue.jss\dist\my-app\server.bundle.js:1:396933 at e.exports (C:\inetpub\wwwroot\vue.jss\dist\my-app\server.bundle.js:1:400178) at Object. (C:\inetpub\wwwroot\vue.jss\dist\my-app\server.bundle.js:1:382155) at __webpack_require__ (C:\inetpub\wwwroot\vue.jss\dist\my-app\server.bundle.js:1:236) at Object. (C:\inetpub\wwwroot\vue.jss\dist\my-app\server.bundle.js:1:107516) at __webpack_require__ (C:\inetpub\wwwroot\vue.jss\dist\my-app\server.bundle.js:1:236) at Object. (C:\inetpub\wwwroot\vue.jss\dist\my-app\server.bundle.js:1:381784) at __webpack_require__ (C:\inetpub\wwwroot\vue.jss\dist\my-app\server.bundle.js:1:236) at Object. (C:\inetpub\wwwroot\vue.jss\dist\my-app\server.bundle.js:1:380876)
   à Sitecore.JavaScriptServices.ViewEngine.NodeServices.HostingModels.Http.HttpNodeInstance.d__7`1.MoveNext()
--- Fin de la trace de la pile à partir de l'emplacement précédent au niveau duquel l'exception a été levée ---
   à System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   à System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   à Sitecore.JavaScriptServices.ViewEngine.NodeServices.HostingModels.OutOfProcessNodeInstance.d__13`1.MoveNext()
--- Fin de la trace de la pile à partir de l'emplacement précédent au niveau duquel l'exception a été levée ---
   à System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   à System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   à Sitecore.JavaScriptServices.ViewEngine.NodeServices.DefaultNodeServices.d__10`1.MoveNext()
--- Fin de la trace de la pile à partir de l'emplacement précédent au niveau duquel l'exception a été levée ---
   à System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   à Sitecore.JavaScriptServices.ViewEngine.NodeServices.DefaultNodeServices.d__10`1.MoveNext()
--- Fin de la trace de la pile à partir de l'emplacement précédent au niveau duquel l'exception a été levée ---
   à System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   à System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   à Sitecore.JavaScriptServices.ViewEngine.Node.Helpers.AsyncHelpers.RunSync[TResult](Func`1 func)
   à Sitecore.JavaScriptServices.ViewEngine.Presentation.JssRenderer.PerformRender(TextWriter writer, IRenderEngine renderEngine, String moduleName, String functionName, Object[] functionArgs)
   à Sitecore.JavaScriptServices.ViewEngine.Presentation.JssRenderer.Render(TextWriter writer)

Thanks for helping me

It looks like the relevant error is this: window is not defined.

This means something in your code (or a 3rd party component) is referencing the window object, which is only available when JavaScript is running in the browser. When Node is rendering your JavaScript (server-side rendering), window won't be available.

Do you have any first or third-party components that are attempting to use window? If it's a component you control, I would suggest adding a conditional statement around your usage of window, e.g.

if (typeof window !== 'undefined') { // it's safe to reference window here }

  • Thanks Adam, I don't use currently Third-party component, I have just duplicated the Welcome Component from the example. Then, I created a gulpfile to generate components easily Then, I changed webpack to generate CSS from SCSS. I will look again. – tomagladiator May 10 at 16:08
  • I disabled Uglify and find that "style-loader" made this error, I will find an alternative. Thanks ! – tomagladiator May 10 at 16:16
  • That is strange, as style-loader is a webpack-specific dev dependency. Meaning, it shouldn't be in the deployed app bundle. – Adam Weber May 10 at 16:22
  • It was my mistake when I implemented SCSS. I fixed it like this: { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ "css-loader", // translates CSS into CommonJS "sass-loader" // compiles Sass to CSS ] }), }, – tomagladiator May 11 at 13:44
up vote 1 down vote accepted

How I fixed this error.

  1. First, disable UglifyJsPlugin from webpack.shared.js
  2. "jss deploy package"
  3. Then go to the line specified in the error dist\my-app\server.bundle.js
  4. You will find what plugin are causing this error

In my case I needed to change my code in webpack.shared.js like this:

    {
      test: /\.(scss|css)$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          "css-loader", // translates CSS into CommonJS
          "sass-loader" // compiles Sass to CSS
        ]
      }),
    },

Thanks to @Adam for helping me

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.