How can I npm link a local package in a monorepo to another application?

154 Views Asked by At

So I've been at this for a while, I have a npm workspace with a my packages (a monorepo basically) and I am trying to link a ui library I'm working on (the library is using react) so that I can use it on another application (react as well). When I do the linking the library folder does show under my node_modules folder in my main application but it still gets an error, I've been looking at other answers but I haven't found one that quite fits my problem.

This is the error that I currently get:

Could not find a declaration file for module 'ui'. 'C:/Users/.../Documents/.../.../packages/ui/lib/index.js' implicitly has an 'any' type.

package.json for the library I'm linking

{
  "name": "ui",
  "private": true,
  "version": "1.0.0",
  "license": "UNLICENSED",
  "scripts": {
    "dev": "vite",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "^20.6.3",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "react": "^17.0.2 || ^18.2.0",
    "react-dom": "^17.0.2 || ^18.2.0",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vite-plugin-dts": "^3.5.3"
  },
  "main": "./lib/index.js",
  "module": "dist/ptr-ui.es.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/ptr-ui.es.js",
      "require": "./dist/ptr-ui.umd.js",
      "types": "./dist/index.d.ts"
    }
  },
  "dependencies": {
    "@tanstack/react-table": "^8.10.3"
  }
}

package.json for the main project where I am trying to use the linked library

{
  "name": "client-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/md5": "^2.2.1",
    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.11",
    "md5": "^2.3.0",
    "merge": "^1.2.1",
    "moment": "^2.29.2",
    "node-sass": "npm:sass@^1.26.5",
    "oidc-client": "^1.9.1",
    "print-js": "^1.6.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-json-pretty": "^2.2.0",
    "react-scripts": "^5.0.1",
    "rimraf": "^2.7.1",
    "ui": "1.0.0"
  },
  "devDependencies": {
    "@types/node": "^17.0.5",
    "react-app-env": "^1.2.3",
    "react-context-devtool": "^2.0.3",
    "typescript": "^4.5.4"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ]
}

I've tried a lot of things but I just can't find a solution, let me know if there are any other files that might give more context as to what could be going wrong. Also both projects are using the same node version

0

There are 0 best solutions below