window is not defined error

[vojtechruz]

Do you want to request a feature or report a bug?
bug

What is the current behavior?
When I deploy my GatsbyJs application to netlify, and I import Docs Search I get:

11:47:21 AM: See our docs page on debugging HTML builds for help https://goo.gl/yL9lND
11:47:21 AM:   3 | (function(global, factory) {
11:47:21 AM:   4 |   module.exports = factory(global);
11:47:21 AM: > 5 | }(/* this ##### UPDATED: here we want to use window/global instead of this which is the current file context ##### */ window, function(window) {
11:47:21 AM:     |  ^
11:47:21 AM:   6 |   var Zepto = (function() {
11:47:21 AM:   7 |   var undefined, key, $, classList, emptyArray = [], concat = emptyArray.concat, filter = emptyArray.filter, slice = emptyArray.slice,
11:47:21 AM:   8 |     document = window.document,
11:47:21 AM: 
11:47:21 AM:   WebpackError: window is not defined
11:47:21 AM:   
11:47:21 AM:   - zepto.js:5 Object.module.exports.element
11:47:21 AM:     ~/autocomplete.js/zepto.js:5:2
11:47:21 AM:   
11:47:21 AM:   - index.js:4 Object.<anonymous>
11:47:21 AM:     ~/autocomplete.js/src/standalone/index.js:4:1
11:47:21 AM:   
11:47:21 AM:   - index.js:3 Object.<anonymous>
11:47:21 AM:     ~/autocomplete.js/index.js:3:1
11:47:21 AM:   
11:47:21 AM:   - DocSearch.js:19 Object.<anonymous>
11:47:21 AM:     ~/docsearch.js/dist/npm/src/lib/DocSearch.js:19:1
11:47:22 AM:   
11:47:22 AM:   - main.js:11 Object._bind
11:47:22 AM:     ~/docsearch.js/dist/npm/src/lib/main.js:11:1

}(/* this ##### UPDATED: here we want to use window/global instead of this which is the current file context ##### */ window, function(window) {  

My code is here:
https://github.com/vojtechruz/vojtechruzicka-blog/blob/master/src/components/SearchBox.js

Full error log here:
https://app.netlify.com/sites/vojtechruzicka/deploys/5b17acd1c965921b0450d558

[Haroenv]

Could you use import() in componentDidMount instead?

see https://github.com/gatsbyjs/gatsby/blob/master/www/src/components/search-form.js#L259-L289 and https://github.com/gatsbyjs/gatsby/blob/d521c19d04f8ba029f3998d104288eb92846d4ed/www/src/html.js#L77

A more easy to read example of that is the react docs:

https://github.com/reactjs/reactjs.org/blob/master/src/components/LayoutHeader/DocSearch.js in combination with https://github.com/reactjs/reactjs.org/blob/ae29fa0491e5b24b68117a45c6f19716c2f31540/src/html.js#L19

The reason is that docsearch is best lazy loaded since it's not made for a standard module system directly with SSR.

Does that make sense?

[vojtechruz]

Thank you for the quick reply.

Since import can be only on the root level of file and not in methods, does it mean I can only use the script included from cdn as script tag in my html? That SSR and modules don't work together here? Are there plans for the future to enable this?

Imean I can call docsearch() like this only if there is window:

componentDidMount() {
        if(window) {
            docsearch({
                apiKey: '467e44d2366ac0de7f99703feb47c8b6',
                indexName: 'vojtechruzicka',
                inputSelector: '.search-box',
                debug: false,
            });
        }
    }

but looks like just importing docsearch throws the exception.

import docsearch from "docsearch.js";

[Haroenv]

class App extends Component {
  componentDidMount() {
    if (window) {
      import("docsearch.js").then(({ default: docsearch }) => {
        docsearch({
          apiKey: "467e44d2366ac0de7f99703feb47c8b6",
          indexName: "vojtechruzicka",
          inputSelector: ".search-box",
          debug: false
        });
      });
    }
  }
}

This is how I meant it. The other option is to use the CDN version as done by react and Gatsby themselves

[vojtechruz]

Thanks, it does work now, you can close 👍

[Haroenv]

perfect 👌

[endiliey]

Facing this :( hahaha

[Haroenv]

@endiliey, is that in docusaurus? Would be nice if you showed some code which gives this error.

I think the best option for now is to always lazy-load docsearch in code bases which are server side rendered.

[endiliey]

@Haroenv it's for Docusaurus 2, because we are creating the SSR version of the app in v2.

Since there is no official React component for DocSearch, i created our own (still simple / wip now)
https://github.com/facebook/Docusaurus/blob/master/v2/lib/theme/Search/index.js
Lazy-loaded docsearch.js

[Haroenv]

This seems good while looking at it from my phone, is this still throwing the error?

[endiliey]

It worked fine. Sorry for the trouble Sent from Mail for Windows 10 From: Haroen Viaene Sent: Sunday, 28 October 2018 10:38 PM To: algolia/docsearch Cc: Endilie Yacop Sucipto; Mention Subject: Re: [algolia/docsearch] window is not defined error (#352) This seems good while looking at it from my phone, is this still throwing the error? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[Haroenv]

No problem, feel free to get in touch if you have any more questions!