'Module not found: Can't resolve "NPM LINKED MODULE" when using npm-link

I'm working on a TypeScript React application which heavily relies on a private NPM package. I can successfully link the NPM package, but after doing so I get the error <pre>/src/components/xxxx/xxxx/xxxxx/xxxxHoc.tsx Module not found: Can&apos;t resolve &apos;@CompanyName/Company-package&apos; in &apos;/home/liam/CompanyName/Company-product/src/components/xxxx/xxxx/xxxxx&apos;</pre> riddle all over the application where the npm package is imported. NPM isntalling this package traditionally does works as intended but I need to be able to locally test the package.

Typically when I npm-link the package it gets removed from package.json, I'm not sure if thats how it's supposed to work? would love some insight if possible

I was successfully able to npm-link this package to a laravel applicaiton, but linking it to this particular react app does not work.

Main projects package.json file

{
"name": "Company-product",
"version": "0.1.0",
"private": true,
"dependencies": {
  "@aws-sdk/client-dynamodb": "^3.37.0",
  "@aws-sdk/util-dynamodb": "^3.37.0",
  "@elastic/apm-rum": "^5.9.1",
  "@elastic/apm-rum-react": "^1.3.1",
  "@fingerprintjs/fingerprintjs": "^3.3.0",
  "@fortawesome/fontawesome-svg-core": "^1.2.36",
  "@fortawesome/free-regular-svg-icons": "^5.15.4",
  "@fortawesome/free-solid-svg-icons": "^5.15.4",
  "@fortawesome/react-fontawesome": "^0.1.16",
  "@CompanyName/NPM-LINKED-MODULE": "^2.10.0",
  "@testing-library/jest-dom": "^5.14.1",
  "@testing-library/react": "^11.2.7",
  "@testing-library/user-event": "^12.8.3",
  "@types/fingerprintjs": "^0.5.28",
  "@types/jest": "^26.0.24",
  "@types/js-cookie": "^2.2.7",
  "@types/node": "^12.20.33",
  "@types/react": "^16.14.17",
  "@types/react-csv": "^1.1.2",
  "@types/react-dom": "^16.9.14",
  "@types/react-router-dom": "^5.3.1",
  "@types/react-select": "^3.0.28",
  "aws-sdk": "^2.1012.0",
  "bootstrap": "^4.6.0",
  "deepmerge": "^4.2.2",
  "formik": "^2.2.9",
  "highcharts": "^8.2.2",
  "highcharts-react-official": "^3.1.0",
  "husky": "^4.3.8",
  "ismobilejs": "^1.1.1",
  "js-cookie": "^2.2.1",
  "jwt-decode": "^3.1.2",
  "luxon": "^1.28.0",
  "mobx": "^6.3.5",
  "mobx-react-lite": "^3.2.1",
  "moment": "^2.29.1",
  "moment-timezone": "^0.5.33",
  "node-sass": "^4.14",
  "nvm": "^0.0.4",
  "react": "^17.0.2",
  "react-bootstrap": "^1.6.4",
  "react-csv": "^2.0.3",
  "react-dom": "^17.0.2",
  "react-map-gl": "^6.1.17",
  "react-router-dom": "^5.3.0",
  "react-scripts": "4.0.1",
  "react-select": "^3.1.1",
  "react-table": "^7.7.0",
  "react-toastify": "^6.2.0",
  "typescript": "^4.4.4",
  "urijs": "^1.19.7",
  "utility-types": "^3.10.0",
  "web-vitals": "^0.2.4",
  "worker-loader": "^3.0.8",
  "yup": "^0.32.11"
},
"husky": {
  "hooks": {
    "pre-commit": "sh ./hooks/pre-commit"
  }
},
"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"
  ]
},
"devDependencies": {
  "@types/luxon": "^1.27.1",
  "@types/react-map-gl": "^5.2.11",
  "@types/react-table": "^7.7.7",
  "@types/urijs": "^1.19.17"
}

The linked NPM package package.json file


{
    "name": "@CompanyName/linked-module",
    "version": "2.10.0",
    "description": "Company Package",
    "author": "Company",
    "license": "MIT",
    "repository": "CompanyName/company-package",
    "main": "dist/bundle.js",
    "types": "dist/index.d.ts",
    "dependencies": {
        "@types/jquery": "^3.3.33",
        "@types/node": "^12.20.33",
        "@types/urijs": "^1.19.6",
        "axios": "^0.21.4",
        "deepmerge": "^4.2.2",
        "dotenv": "^8.2.0",
        "highcharts": "^8.2.2",
        "ismobilejs": "^1.1.1",
        "moment": "^2.24.0",
        "urijs": "^1.19.7"
    },
    "devDependencies": {
        "ts-loader": "^6.2.1",
        "typescript": "^3.8.3",
        "webpack": "^4.42.0",
        "webpack-cli": "^3.3.11"
    }
}

Thanks for any awnsers


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source