Search code examples
node.jsreactjsnext.jscodemirror

NextJS build error - ReferenceError: navigator is not defined


I'm running into this special error message while trying to build a simple NextJS application (using npm run build):

> Build error occurred
ReferenceError: navigator is not defined
    at /cdk-next/next-frontend/node_modules/codemirror/lib/codemirror.js:18:19
    at /cdk-next/next-frontend/node_modules/codemirror/lib/codemirror.js:11:83
    at Object.<anonymous> (/cdk-next/next-frontend/node_modules/codemirror/lib/codemirror.js:14:2)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/cdk-next/next-frontend/node_modules/easymde/src/js/easymde.js:2:18) {
  type: 'ReferenceError'
}
info  - Collecting page data .

I don't know who codemirror is, or why it's not letting me build my project. From reading around I gather that this issue occurs with NextJS when trying to build a project on the server side instead of the client side, because the project does not have access to a window or navigator. In that case, what should I do? The tutorial I'm following seems to breeze through this step just fine, so should I just look at their package.json and downgrade all of my packages? Any advice would be appreciated.


Solution

  • The error was with my import of import SimpleMDE from "react-simplemde-editor" (located in create-post.js of the repo link above).

    I implemented the solution proposed by modikum here: https://github.com/dabit3/next.js-amplify-workshop/issues/21.

    Now the project builds successfully.