Marked Previewer. Markdown npm issue

JavaScript
1

Hello! I’m working on the markdown previewer.

I’m having a lot of trouble getting the npm to work… I know there’s a CDN script tag I can use, but I’d like to understand how to get these npms to work as well.

I installed marked locally via npm install --save marked

I then put import { marked } from "marked"; at the top of my page.

However, when I try and use marked.parse(), it throws an error and says:
Uncaught TypeError: Failed to resolve module specifier "marked". Relative references must start with either "/", "./", or "../".

when I add / or ./ it then says:
GET http://127.0.0.1:5500/marked net::ERR_ABORTED 404 (Not Found)

Sorry, I’m really struggling with these npm installs.

3 
{
  "name": "skynyrd",
  "version": "1.0.0",
  "description": "",
  "main": "lynyrd.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "marked": "^8.0.1"
  }
}

When I try and test that it’s working, I use

const html = marked.parse("# Marked in Node.js/n/nRendered by **marked**.");
console.log(html);

Which works when I have use the CDN, however, when I use the npm I installed it throws those errors.

4

Also have another file that was generated called package-lock.json, which contains:

{
  "name": "skynyrd",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "skynyrd",
      "version": "1.0.0",
      "license": "ISC",
      "dependencies": {
        "marked": "^8.0.1"
      }
    },
    "node_modules/marked": {
      "version": "8.0.1",
      "resolved": "https://registry.npmjs.org/marked/-/marked-8.0.1.tgz",
      "integrity": "sha512-eEbeEb/mJwh+sNLEhHOWtxMgjN/NEwZUBs1nkiIH2sTQTq07KmPMQ48ihyvo5+Ya56spVOPhunfGr6406crCVA==",
      "bin": {
        "marked": "bin/marked.js"
      },
      "engines": {
        "node": ">= 16"
      }
    }
  }
}

Not sure if that helps at all

6

Can I put it anywhere? I put it in a couple places and it still threw the following error.

lynyrd.html:1 Uncaught TypeError: Failed to resolve module specifier "marked". Relative references must start with either "/", "./", or "../".
8 
{
  "name": "skynyrd",
  "version": "1.0.0",
  "description": "",
  "main": "lynyrd.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "marked": "^8.0.1"
  }
}
10

You’d be correct! It is called lynyrd.js

{
  "name": "skynyrd",
  "version": "1.0.0",
  "description": "",
  "main": "./lynyrd.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "marked": "^8.0.1"
  }
}

Have that, same error. I don’t know what the heck.

12

Oh wait a second! There’s been a new development.
In my html I had
<script type="module" src="lynyrd.js"></script>

I removed the type=“module”. It’s not working yet, but I get a new error.
and its’

Uncaught SyntaxError: Cannot use import statement outside a module (at lynyrd.js:14:1)
14

Screenshot 2023-09-08 103502
Screenshot 2023-09-08 1035021004×526 22.9 KB

16

I can make one up quick! I’m new to all of this text editor stuff, but migrating from the in browser stuff FCC used up until now.

Anyhoot, I can copy it to stackblitz and share the editor URL, if that’s what you mean!
Sorry about the noob language

17

Ya sorry, I don’t even know what you mean by test… So apparently I’m not testing it.

19

I use live-server yes!

21

ok sorry, just googling how to link vscode to github to do that

23

Sorry, I just started using stacckblitz 2 days ago… Not sure how to share things and whatnot.
But I copy/pasted the html, js, & package.json code to their respective files in there. Hopefully this is what you needed.

24

Pretty sure if you want to use ESM you have to import from the ESM build.

import { marked } from "./node_modules/marked/lib/marked.esm.js";

document.documentElement.innerHTML = marked("# I am using markdown.");

Are you not going to use React or some other framework?

Because that isn’t how you would do it in a React app.

25

I’ll eventually be using React yes.
Was just tinkering with npm’s in vscode, trying to install some and get them to work…

Didn’t even know that I had to import them differently for React. What a complicated little task this is ending up being. Or did you just mean the way I was utilizing markdown wouldn’t be the way I would in React?

26

This import totally worked! is there a simple answer as to why?

in the marked documentation it told me I’d just need the line I had. So how do I know when I need to actually import it from a different location?

Also going back to how you’d do it in React. Did you mean how you’d import it, or how you would utilize it?

27

I think you are just a little too curious, which usually isn’t a bad thing. It does however make things more complicated as you have to learn about too many different things all at once.

So the issue is you are sort of mixing Node and the Browser. In this case, the dependency (markedjs) does have an ESM build which can be used in the browser but the way you import modules in plain JS is different from a Node app.

Uncaught TypeError: The specifier “marked” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “…/” or “/”.

https://dplatz.de/blog/2019/es6-bare-imports.html

You also have to check the specific dependency and which environment it is meant to be used in. There are plenty of libraries you can install using npm that don’t run in the browser at all.

1 Like
28

I think you’re definitely right about the curiosity, I’m getting too side tracked with these details that I should be worrying about after I actually know how to code! I’ve probably wasted 8 hours on tinkering with this stuff, instead of just doing the project.

Anyhoot! Thank you for explaining that. I bookmarked your response and I’m going to go through it again in the future when I have a better understanding of everything. I honestly don’t think I even have the knowledge base to understand a lot of those concepts right now anyway. I naively though the npm universe was going to be more simple than it is, I definitely underestimated it’s complexity.

I appreciate your patience! Definitely doesn’t go unnoticed with me.

1 Like
29

Don’t stop being curious, it is super valuable for learning.

But there is a limit to how many things you can learn and juggle all at once. So pick your battles wisely.

When learning about web development you often get into rabbit holes that quickly become more like black holes you can never get back out of.

Time management is hard.

30

Buddy, you are absolutely nailing what I have been experiencing and what’s going through my mind.

I started on the css/html stuff around April, and moved onto the JS, then bounced to a Udemy JS course, now I’m back to FCC… But I get side tracked by little things I don’t understand (like the npm), and spend weeks trying to figure it out. And sometimes, as it turns out, the information is beyond my knowledge base so I can’t even get a great grasp of it anyway because I’m missing other information to link it all together.

But yes, when I don’t understand something my mind wants to get to the bottom of it and figure out it’s fundamentals… But it’s causing me to be horribly slow with getting through FCC… So I’m going to have to start just moving forward, do what I can to finish the lessons/projects, and trust the process that it’ll all eventually come together.

Thanks again for the help!