Dependencies not getting installed when library is installed as dependency

[aIacoella]

Current Behavior

Hi, I have been developing a component library for a couple of months and only now I've realized that only a subset of all of the dependencies my module is using gets installed when the module I've been developing is installed in another project.

I am actually not sure if this is how npm is supposed to work, maybe it is.

The thing is, after adding my latest dependency to my library (react-clock), when I try to build (Webpack) the "Father" project that has my library as a dependency, it throws the following error:

ERROR in ./node_modules/widget-components/dist/index.js
Module not found: Error: Can't resolve 'react-clock' in 'C:\Users\User\code\Project\node_modules\widget-components\dist'
 @ ./node_modules/widget-components/dist/index.js 1:441-463
 @ ./src/main/js/components/widgets/Image.js
 @ ./src/main/js/util/widgetSelector.js
 @ ./src/main/js/service/reportEngine.js
 @ ./src/main/js/Dashboard.js

ERROR in ./node_modules/widget-components/dist/index.js
Module not found: Error: Can't resolve 'react-clock/dist/Clock.css' in 'C:\Users\User\code\Project\node_modules\widget-components\dist'
 @ ./node_modules/widget-components/dist/index.js 1:236-273
 @ ./src/main/js/components/widgets/Image.js
 @ ./src/main/js/util/widgetSelector.js
 @ ./src/main/js/service/reportEngine.js
 @ ./src/main/js/Dashboard.js

Here I'll post the dependencies I have in my library's package.json:

  "dependencies": {
    "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.29",
    "@fortawesome/free-brands-svg-icons": "^5.13.1",
    "@fortawesome/free-regular-svg-icons": "^5.13.1",
    "@fortawesome/free-solid-svg-icons": "^5.13.1",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "@react-pdf/renderer": "^1.6.10",
    "@types/lodash": "^4.14.159",
    "@types/recharts": "^1.8.14",
    "autoprefixer": "^9.8.6",
    "bootstrap": "^4.5.0",
    "classnames": "^2.2.6",
    "cssnano": "^4.1.10",
    "lodash": "^4.17.20",
    "moment": "^2.27.0",
    "moment-timezone": "^0.5.31",
    "react-bootstrap": "^1.3.0",
    "react-clock": "^3.0.0",
    "react-resize-detector": "^5.0.6",
    "react-scripts": "^3.4.1",
    "react-sizeme": "^2.6.12",
    "recharts": "^1.8.5",
    "rollup-plugin-postcss": "^3.1.8",
    "rollup-plugin-svg": "^2.0.0"
  }

and the subset of node_modules the library is installing when it is installed as a dependency: /Project/node_modules/widget-components/

edit: I forgot to add that my component library is installed as a git repo in the "father" project. I don't know if this has an impact or not.

Suggested solution(s)

The way I made the "Father" project work (correctly build), was to install react-clock as a dependency of the main project. This is of course only a workaround, and I'm trying to make it work as it is supposed to work.

My environment

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 4.74 GB / 15.82 GB
  Binaries:
    Node: 12.16.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 85.0.4183.102
    Edge: Spartan (44.18362.449.0)
    Internet Explorer: 11.0.18362.1
  npmPackages:
    tsdx: ^0.14.0 => 0.14.0
    typescript: ^3.9.7 => 3.9.7

[agilgur5]

Sorry to hear about your troubles, but unfortunately this doesn't seem related to TSDX. TSDX doesn't impact how you install dependencies or what your package.json says. This seems like a general ask for help for debugging NPM installation.

Issues also are not a support forum for debugging help. Feel free to use StackOverflow or something, but even there the expectation is that you furnish an MVCE, which is lacking here. You provided a single fairly large package.json (should be two) and some folders, not a reproducible example.

I can offer some suggestions below, but again, this is not a support forum for debugging help, especially not for issues unrelated to TSDX.

---

only now I've realized that only a subset of all of the dependencies my module is using gets installed when the module I've been developing is installed in another project.

I am actually not sure if this is how npm is supposed to work, maybe it is.

It should automatically install everything in your package's package.json#dependencies when your package is installed, so that error does seem weird

    "autoprefixer": "^9.8.6",
    [...]
    "rollup-plugin-postcss": "^3.1.8",
    "rollup-plugin-svg": "^2.0.0"

I don't know what your library looks like, but these are normally devDeps, not dependencies.

and the subset of node_modules the library is installing when it is installed as a dependency: /Project/node_modules/widget-components/

I think you meant /Project/node_modules/widget-components/node_modules. Also would be better to use ls (or, on Windows, dir) to output what's there rather than using a screenshot.

So it looks like it's missing a bunch of dependencies, but it also has an additional dependency that isn't present in your package.json -- react-overlays.

I suspect you're installing the wrong version of your package, and hence you have an outdated node_modules. That would also suggest some version of your package has an incorrect package.json if the code references react-clock but it's not installed.

Otherwise I would just recommend deleting node_modules and re-installing everything.

I forgot to add that my component library is installed as a git repo in the "father" project. I don't know if this has an impact or not.

No, it shouldn't. That just changes how it's installed and how you reference a version. If you're using git installation I would recommend pinning to a specific commit-ish or, preferably, tag, as branches can change but a commit doesn't (and tag shouldn't). Perhaps you pinned to a branch and so you're getting different versions as you update.