JSS vue - Error with server.bundle.js after jss deploy package

Question

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.

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

Answer 1

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 }

Answer 2

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