CodeMirror cannot find "navigator"

[ericeasthope]

CodeMirror breaks the default build.

Error

ReferenceError: navigator is not defined
    at /Users/ericeasthope/Desktop/myApp/node_modules/codemirror/lib/codemirror.js:18:19
    at /Users/ericeasthope/Desktop/myApp/node_modules/codemirror/lib/codemirror.js:11:83
    at Object.<anonymous> (/Users/ericeasthope/Desktop/myApp/node_modules/codemirror/lib/codemirror.js:14:2)
    at Module._compile (internal/modules/cjs/loader.js:1128:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:983:32)
    at Function.Module._load (internal/modules/cjs/loader.js:891:14)
    at Module.require (internal/modules/cjs/loader.js:1023:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/ericeasthope/Desktop/myApp/node_modules/@nteract/editor/lib/index.js:13:38)
    at Module._compile (internal/modules/cjs/loader.js:1128:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:983:32)
    at Function.Module._load (internal/modules/cjs/loader.js:891:14)
    at Module.require (internal/modules/cjs/loader.js:1023:19)
    at require (internal/modules/cjs/helpers.js:72:18)

Steps to reproduce

create-nteract-app myApp
cd myApp
yarn dev

Edit: could this be related? -> JedWatson/react-codemirror#77

[scook12]

Having this issue, as well and manual setup isn't a workaround. Anyone know how to fix this?

Reproduce:

yarn create next-app myApp
cd myApp
yarn add @nteract/core @nteract/stateful-components @interact/editor 
yarn add lodash.isequal styled-components // breaks without these, too
yarn dev

in pages/notebook.tsx:

import React from 'react'
import Notebook from '@nteract/styled-components

const MyNotebook = () => (
  <React.Fragment>
    <Notebook />
  </React.Fragment>
)

export default MyNotebook

Error

ReferenceError: navigator is not defined
    at /Users/sam10266/Code/lab/lab/node_modules/codemirror/lib/codemirror.js:18:19
    at /Users/sam10266/Code/lab/lab/node_modules/codemirror/lib/codemirror.js:11:83
    at Object.<anonymous> (/Users/sam10266/Code/lab/lab/node_modules/codemirror/lib/codemirror.js:14:2)
    at Module._compile (internal/modules/cjs/loader.js:945:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:962:10)
    at Module.load (internal/modules/cjs/loader.js:798:32)
    at Function.Module._load (internal/modules/cjs/loader.js:711:12)
    at Module.require (internal/modules/cjs/loader.js:838:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Users/sam10266/Code/lab/lab/node_modules/@nteract/editor/lib/index.js:13:38)
    at Module._compile (internal/modules/cjs/loader.js:945:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:962:10)
    at Module.load (internal/modules/cjs/loader.js:798:32)
    at Function.Module._load (internal/modules/cjs/loader.js:711:12)
    at Module.require (internal/modules/cjs/loader.js:838:19)
    at require (internal/modules/cjs/helpers.js:74:18)

[pnutmath]

You may be using SSR with react, if so you need to import addons only when loads in browser:

You can try snippet like following:

import { isBrowser } from 'browser-or-node';
if (isBrowser) {
    require('codemirror/mode/xml/xml.js');
    require('codemirror/addon/edit/closetag.js');
    require('codemirror/addon/selection/active-line.js');
}

[scook12]

@pnutmath I've tried a lot of dynamic imports like this and it hasn't worked so far. Ideas on where this should be put?

I'd like to get a definitive solution to this if possible. The build breaks immediately - I haven't written any components that are using SSR yet, it's the default next.js boilerplate.

[pnutmath]

@scook12 - its not a dynamic import, I am not loading this modules on server side, it imports only for client side

[markbmullins]

Just wanted to report pnutmath's solution did work for me in Next.js

import { isBrowser } from "browser-or-node";
if (isBrowser) {
  require("codemirror/lib/codemirror.css");
  require("codemirror/theme/material.css");
  require("codemirror/mode/xml/xml");
  require("codemirror/mode/javascript/javascript");
  require("codemirror/mode/css/css");
}

[chriddyp]

@markbmullins - Thanks for updating! Where did you place this code? I'm trying to get the basic instructions working on my machine to no avail.

[markbmullins]

It goes in whatever component you were trying to import code mirror into. This replaces that import.

[pgzmnk]

I resolved this issue by changing:

const codemirror_1 = __importDefault(require("codemirror"));

to

const codemirror_1 = __importDefault(require("react-codemirror"));

in node_modules/@nteract/editor_custom/lib/index.js

[hesiyuan]

When would this issue be fixed? it's not a good solution to modify the imports in the node_modules anyway.

[hesiyuan]

For those who are seeing the same issue, the correct fix is to dynamically import the codemirror editor in the presentation-cell.js file

replace the import for CodeMirrorEditor with the following

import dynamic from "next/dynamic";
const CodeMirrorEditor = dynamic(import("@nteract/editor"), {
  ssr: false
});

Ensure that you have also installed next/dynamic