With web publishable libraries, all dependencies of all files (tests, stories) are added to the package.json

[tinkertrain]

Current Behavior

Hello! I have a question about web publishable libraries.

Context: Most of our libraries are components using React and Storybook, sometimes we import a certain dependency into the story file, but this dependency is not really used in the actual component.

For example, let's say I have 2 Nx publishable libraries: @my-scope/button and @my-scope/modal, in the "modal" story file (Modal.stories.js) we import the button, just to have our button triggering opening the modal. No other file in "modal" uses the button and the index.js doesn't export anything from the stories file.

As you can see, button it's not really a dependency of modal. But when I build the modal library, the package.json includes the button in the dependencies field... so the question is, how can I avoid that? Is there a way to tell Nx to ignore certain files that I can't see?

• I added **/*.stories.js", to the exclude section of the tsconfig.lib.json to no avail
• Same thing happens if some dependencies are used in .test.js files.
• It does not happen if you use mdx stories.
• I'm not sure if should try this with namedInputs, or implicitDependencies, or something else Nx provides, I did try those but maybe I'm using them wrong?

Expected Behavior

I would expect that the dependencies added would only be taken from the entry point (index.js) and expand from there.

Steps to Reproduce

1. Have at least 2 publishable libraries (ie, modal and button)
2. Import one in to the other's story or test file (import button into modal.stories.js)
3. Build

Example 'build' target configuration:

"build": {
  "executor": "@nrwl/web:rollup",
  "outputs": ["{options.outputPath}"],
  "options": {
    "outputPath": "dist/packages/components/modal",
    "tsConfig": "packages/components/modal/tsconfig.lib.json",
    "project": "packages/components/modal/package.json",
    "entryFile": "packages/components/modal/src/index.js",
    "external": ["react/jsx-runtime"],
    "format": ["esm", "cjs"],
    "buildableProjectDepsInPackageJsonType": "dependencies",
    "rollupConfig": [
      "@nrwl/react/plugins/bundle-rollup",
    ],
  },
  "dependsOn": [
    {
      "target": "build",
      "projects": "dependencies"
    }
  ]
},

Environment

Please note I'm not in latest due to being affected by this issue: #10539

   Node : 16.14.0
   OS   : darwin x64
   npm  : 8.3.0
   
   nx : 14.1.7
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.1.7
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.1.7
   @nrwl/eslint-plugin-nx : 14.1.7
   @nrwl/express : Not Found
   @nrwl/jest : 14.1.7
   @nrwl/js : 14.1.7
   @nrwl/linter : 14.1.7
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : 14.1.7
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.1.7
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.1.7
   @nrwl/web : 14.1.7
   @nrwl/workspace : 14.1.7
   typescript : 4.4.4
   rxjs : 6.6.7
   ---------------------------------------
   Community plugins:
   	 @jscutlery/semver: 2.25.2
   	 ngx-deploy-npm: 3.1.9

Thanks!

[AgentEnder]

We remove dev dependencies from the generated package.json IIRC, you may be able to add something like this in your modal libraries dev deps:

{
  "devDependencies": {
    "@my-scope/button": "*"
  }
}

[tinkertrain]

Thanks for the suggestion @AgentEnder, but I don't think that will scale, what if for some reason someone makes a change to the "modal" component and actually imports the button into the source code? then they need to know to remove it from devDependencies, and when you have 100+ components all with stories then even the first task of making those devDependencies lists will be quite large.

Ideally I think the behaviour should be like the mdx style stories, they just seem to not be taken into account when creating the dependency graph, it might actually be a "bug as a feature" though, because is inconsistent and should behave just like the js stories.

[JulioC]

We remove dev dependencies from the generated package.json IIRC, you may be able to add something like this in your modal libraries dev deps:

{
  "devDependencies": {
    "@my-scope/button": "*"
  }
}

I've tried adding this to the package.json in my project (not the root one), and it didn't work. The generated packages.json still includes the unwanted dependency.

Using executor @nrwl/js:tsc, with @nrwl/js@15.0.13

[JosefBredereck]

I think this is a valid point. We have a similar issue.

In our mono repo, where we have numerous publishable libraries, we also have a @workspace/test-utils lib. This lib is publishable by itself to be consumed externally. But every time we build/publish our other packages, the @workspace/test-utils will be added as a dependency because we use it in our *.spec.ts files.

Since Nx has such presents in the market already, it would be a good idea to reduce the dependencies as much as possible and declutter the node module mess.

(also linking this to #10227 since it is an extension of the issue. And #8096 because it describes something similar)

[github-actions]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.