#Importing errors for npm module within React Project, Typescript

11 messages · Page 1 of 1 (latest)

robust bay
#

I am attempting to import a npm module into my project. I used the CLI command: npm install @types/marked. Which successfully added to my dependencies in my package.json. Checking in my directory [projectDir]/node_modules/@types/marked, shows it exists on my system.

In my React project I import:

import {marked} from "marked"

let textData: string='';
//then in code
console.log(marked(textData))

Which gives no indication of error, and my LSP is able to examine methods.

In my browser/terminal I get the following error:

Module not found: Error: Can't resolve 'marked' in [projectDir]

I have attempted to uninstall (rm -rf ./node_modules)) and reinstall my node dependencies. To no avail, convincing me it is something else. I am not sure what. My best guess is a setting within my package.json

Here is my package.json:


{
  "name": "markdown",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.6",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^29.4.0",
    "@types/marked": "^4.0.8",
    "@types/node": "^18.14.2",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.4",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
daring veldt
robust bay
#

is it seriously that I was required to do both? And only did the @types/marked...

#

Is the types part only files that give definitions

#

??

charred rock
#

@robust bay a TypeScript project isn't different from a JavaScript project...
if you need marked, you install the marked package
it's that simple
however, TypeScript users need more than the JS code, tehy also need the types that go along with it, so that the compiler can check your code
if the types are provided by the library, then there is nothing else to do
if not, you will need to install the types from @types/marked
this is pretty much universal in the TypeScript ecosystem

#

as the name suggests, @types/* packages only provide types, no source code, no bundled code, nothing, only types

daring veldt
robust bay
#

Ty for the help! Even if my problem was a silly one. Learning without instructions may lead to skimming through something important, like today. Today I am here 🤷‍♂️