Missing Dependency

[github-jeff]

Excellent tutorial.

Also more as a heads up there is an issue with amazon cloud9 IDE (default) and it's detailed in tailwind issue Issue: 2810

(it reports as easymde):

./node_modules/easymde/dist/easymde.min.css
TypeError: getProcessedPlugins is not a function

I thought the real problem is Node 10x is installed by default on cloud9 IDE machines. It is made note of in the prerequisites which was read but not actually checked on the EC2 machine. To correct, I used the following guide.
Upgrade Node

However the build problems continued, and this is where I became jammed up.

ReferenceError: navigator is not defined
    at /home/ec2-user/environment/node_modules/codemirror/lib/codemirror.js:18:19
    at /home/ec2-user/environment/node_modules/codemirror/lib/codemirror.js:11:83
    at Object.<anonymous> (/home/ec2-user/environment/node_modules/codemirror/lib/codemirror.js:14:2)
    at Module._compile (node:internal/modules/cjs/loader:1109:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.<anonymous> (/home/ec2-user/environment/node_modules/easymde/src/js/easymde.js:2:18) {
  type: 'ReferenceError'
}

I have tried:
npm install codemirror
with the import: import CodeMirror from 'codemirror'; in both create-post.js and edit-post/[id].js

I have also tried:
npm install easymde

Any help would be appreciated.

Update: I have narrowed this down to this include
import SimpleMDE from "react-simplemde-editor

Update 2: I have also tried:
uiwjs/react-md-editor
Also failed to compile.

[modikum]

This should work... using NextJs's way of dynamically importing a package on the client only

import dynamic from "next/dynamic";

const SimpleMdeEditor = dynamic(
	() => import("react-simplemde-editor"),
	{ ssr: false }
);

<SimpleMdeEditor 
        value={post.content}
        onChange={value => setPost({ ...post, content: value })}
/>

[github-jeff]

Many thanks @modikum I can confirm this works great.

A few notes:

1. When you upgrade node, and cloud9 suspends but then wakes up again, it will go back to using node 10 by default.
2. Need to remove from the import section of create-post.js and /edit-post/[id].js respectively.

import SimpleMDE from "react-simplemde-editor"

and replace with:
import dynamic from "next/dynamic";

Place this section just above the return section in the functions "createpost" and "editpost" respectively

const SimpleMdeEditor = dynamic(
	() => import("react-simplemde-editor"),
	{ ssr: false }
);

This:

<SimpleMdeEditor 
        value={post.content}
        onChange={value => setPost({ ...post, content: value })}
/>

is the same as:
<SimpleMDE value={post.content} onChange={value => setPost({ ...post, content: value })} />
which is already in the code provided, but in my (opinion) it's easier to read with the indented format.

3. Lastly, delete tailwind.config.js and run:
   npx tailwindcss init --full
   then add back in the plugin as specified in the tutorial
   ref: tailwindcss: issue 2810

4. I was not able to use npx serverless unless I added the credentials to the .bashrc file. ref Calling AWS services from an environment in AWS Cloud9

[github-jeff]

@modikum her solution worked great. TY.