ReferenceError: navigator is not defined, Meteor project

[pandabrand]

Hi,
I'm not using webpack, I have a meteor project where I am using react components. When I start up my app I get the following error:

W20161026-21:37:12.911(-5)? (STDERR) ReferenceError: navigator is not defined
W20161026-21:37:12.912(-5)? (STDERR)     at Object.<anonymous> (/Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:594:20)
W20161026-21:37:12.912(-5)? (STDERR)     at eq (/Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:229:229)
W20161026-21:37:12.913(-5)? (STDERR)     at Object.module.exports (/Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:237:3)
W20161026-21:37:12.914(-5)? (STDERR)     at __webpack_require__ (/Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:30:30)
W20161026-21:37:12.915(-5)? (STDERR)     at Object.<anonymous> (/Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:65:2)
W20161026-21:37:12.915(-5)? (STDERR)     at Object.module.exports (/Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:203:31)
W20161026-21:37:12.916(-5)? (STDERR)     at __webpack_require__ (/Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:30:30)
W20161026-21:37:12.916(-5)? (STDERR)     at Object.defineProperty.value (/Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:50:18)
W20161026-21:37:12.916(-5)? (STDERR)     at /Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:53:10
W20161026-21:37:12.917(-5)? (STDERR)     at webpackUniversalModuleDefinition (/Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:3:20)

Any idea how to get around this?

[kevinrademan]

+1

[i-kitaev]

Unfortunately Summernote only uses the browser navigator, so there is no possibility for server-side-rendering.

[sxhuan]

try this to work around with ssr
import React, { Component } from 'react';

    constructor(props) {
        super(props);
        if (typeof window !== 'undefined') {
          this.ReactSummernote = require('react-summernote').default;
        }
        this.state = {
            placeholder: 'Please write something here...',
            activeTab: '1'
        };
      }

  onChange(content) {
    console.log('onChange', content);
  }

  render() {
    const ReactSummernote = this.ReactSummernote;
    if (typeof window !== 'undefined' && ReactSummernote) {
        return (
            <ReactSummernote
              value="Default value"
              options={{
                height: 350,
                dialogsInBody: true,
                toolbar: [
                  ['style', ['style']],
                  ['font', ['bold', 'underline', 'clear']],
                  ['fontname', ['fontname']],
                  ['para', ['ul', 'ol', 'paragraph']],
                  ['table', ['table']],
                  ['insert', ['link', 'picture', 'video']],
                  ['view', ['fullscreen', 'codeview']]
                ]
              }}
              onChange={this.onChange}
            />
          );
    }
    else {
        return <textarea />;
    }
  }
}

export default HtmlEditor;

[timknapp12]

Any updates on this? I'm getting the same error and @StanleySong 's work around did not work for me unfortunately. I'm using nextjs with ssr