Missing Dependency - Githubissues

github-jeff commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

Many thanks @modikum I can confirm this works great.

A few notes:

When you upgrade node, and cloud9 suspends but then wakes up again, it will go back to using node 10 by default.
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.

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
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 commented 3 years ago

@modikum her solution worked great. TY.

dabit3 / next.js-amplify-workshop

Missing Dependency #21