@nrwl/react adds dependencies to root package.json instead of library when generating publishable library

[wederchr]

Current Behavior

I'm new to NX so maybe I'm using the plugin in a way that it is not intended for. When generating a publishable react library using nx g @nrwl/react:lib component-lib --publishable=true --importPath=@myorg/component-lib in package-based repo, the packages/component-lib/package.json has neither dependencies nor peerDependencies. Instead the dependencies are added to the root package.json. As a consequence when I want to publish the library its package.json is missing the required dependencies.

Expected Behavior

I would expect the dependencies and peerDependencies to be added to the generated librarie's package.json.

Github Repo

No response

Steps to Reproduce

1. Generate library using nx g @nrwl/react:lib component-lib --publishable=true --importPath=@myorg/component-lib --style=none --bundler=vite
2. Open the generated package.json file at libs/component-lib/package.json and see that there are no dependenciesor peerDependencies.

Nx Report

>  NX   Report complete - copy this into the issue template

   Node : 18.12.0
   OS   : darwin x64
   yarn : 3.3.0
   
   nx : 15.3.0
   @nrwl/angular : 15.3.0
   @nrwl/cypress : 15.3.0
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.3.0
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.3.0
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.3.0
   @nrwl/js : 15.3.0
   @nrwl/linter : 15.3.0
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : 15.0.2
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.3.0
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.3.0
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : 15.3.0
   @nrwl/webpack : 15.3.0
   @nrwl/workspace : 15.3.0
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
   	 @ngrx/component-store: 14.0.2
   	 @ngrx/effects: 14.0.2
   	 @ngrx/entity: 14.0.2
   	 @ngrx/router-store: 14.0.2
   	 @ngrx/store: 14.0.2
   	 @ngrx/store-devtools: 14.0.2

Failure Logs

No response

Additional Information

No response

[wederchr]

@FrozenPandaz did you have the chance to take a look at this?

[mandarini]

Possibly related: https://github.com/nrwl/nx/issues/13992

[mandarini]

Can you please retry with latest?

[wederchr]

I've retried with the latest version 15.4.4 but the result is the same. The package.json is still missing dependencies/ peerDependencies.

[minuz]

I've been having similar issues and did some testing on my repo and found out the following:

• with the rollup builder, it seems to intelligently find the packages used within the lib and append it to the lib/package.json
• with vite builder, it's copying the entire root package.json into the lib.

[wederchr]

• with the rollup builder, it seems to intelligently find the packages used within the lib and append it to the lib/package.json

That's interesting since Vite uses Rollup internally.

• with vite builder, it's copying the entire root package.json into the lib.

This has been fixed with https://github.com/nrwl/nx/pull/13854 in 15.4.0

[mandarini]

@ndcunningham adding you to this conversation!

[minuz]

• with the rollup builder, it seems to intelligently find the packages used within the lib and append it to the lib/package.json

That's interesting since Vite uses Rollup internally.

• with vite builder, it's copying the entire root package.json into the lib.

This has been fixed with #13854 in 15.4.0

Just upgraded to 15.4.5 and I can confirm that its now pulling the package.json as is from the project. In regards to vite using rollup, it doesn't seems to consume everything from it though.

I did some tests switching the builders and when bundling with vite, the package.json is exactly the same as the original from the project whereas with rollup, it tweaks and find dependencies based on what you imported on your code. For instance, it automatically found that I imported Axios into my lib and it added as a peerDependency.

[wederchr]

@minuz Can you share a working example with a rollup?

[minuz]

@wederchr , I'm using the default generated by the lib react lib generator:

    "build": {
      "executor": "@nrwl/rollup:rollup",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/libs/shared/ui/style-constants",
        "tsConfig": "libs/shared/ui/style-constants/tsconfig.lib.json",
        "project": "libs/shared/ui/style-constants/package.json",
        "entryFile": "libs/shared/ui/style-constants/src/index.ts",
        "external": ["react/jsx-runtime"],
        "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
        "compiler": "babel",
        "assets": [
          {
            "glob": "libs/shared/ui/style-constants/README.md",
            "input": ".",
            "output": "."
          }
        ]
      }
    },

This is the build target and it will use babel to compile ts. The .babelrc is also the default, I'm avoiding tweaking things as it makes it hard for other devs to remember (if I really need to, will create a custom generator) .babelrc

{
  "presets": [
    [
      "@nrwl/react/babel",
      {
        "runtime": "automatic",
        "useBuiltIns": "usage"
      }
    ]
  ],
  "plugins": [["styled-components", { "pure": true, "ssr": true }]]
}

>  NX   Report complete - copy this into the issue template

   Node : 16.19.0
   OS   : darwin arm64
   yarn : 1.22.19
   
   nx : 15.4.5
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.4.5
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.4.5
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.4.5
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.4.5
   @nrwl/js : 15.4.5
   @nrwl/linter : 15.4.5
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : 15.4.5
   @nrwl/nx-cloud : 15.0.2
   @nrwl/nx-plugin : 15.4.5
   @nrwl/react : 15.4.5
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.4.5
   @nrwl/schematics : Not Found
   @nrwl/storybook : 15.4.5
   @nrwl/web : 15.4.5
   @nrwl/webpack : 15.4.5
   @nrwl/workspace : 15.4.5
   @nrwl/vite : 15.4.5
   typescript : 4.9.4
   ---------------------------------------
   Local workspace plugins:
         @expedo/react
   ---------------------------------------
   Community plugins:
         @jscutlery/semver: 2.29.3

[jaysoo]

We can look into supporting something similar with Vite, but it's an enhancement not a bug. We'll look into it, and might need to provide an Nx-specific plugin for vite.config.ts.

[mrsufgi]

Do you have any workarounds? This is making forcing us to bundle buildable libraries and not able to add them to "externals".

if I have LibSDKCoreReact that imports LibSDKCore, I want to release those two separately. when adding LibSDKCore to externals, It is not bundled, but LibSDKCoreReact is broken because the package.json doesn't contain the latest LibSDKCore as either peerDependency or Dependency.

This behavior does exist for js:tsc executor and for rollup executor

EDIT:

After looking into source code, that's not surprising: Rollup has: https://github.com/nrwl/nx/blob/master/packages/rollup/src/executors/rollup/lib/update-package-json.ts

Where Vite copy the package.json as is: https://github.com/nrwl/nx/blob/master/packages/vite/src/executors/build/build.impl.ts

[pongells]

I am also puzzled by this.

How do people work with publishable libraries using Vite?

Does everyone manually maintain the subset of peerDependencies and dependencies in the publishable package? And then is everyone manually adding the peer dependencies to the rollup config externals ?

Or.. do we simply not use the Vite builder for publishable libraries?

[alexanderkhivrych]

Oh, this is not cool. It would be nice if peer dependencies were generated automatically

[jaysoo]

Do you have any workarounds?

Currently, you will need to add these dependencies or peerDependencies into the lib's package.json by hand. It will be copied over to the output.

We have the --generatePackageJson flag for other executors, such as esbuild and rollup, so we are discussing adding it for Vite as well, but no one should be blocked on it as you can add those dependencies manually.

[Phaster911]

I am also puzzled by this.

How do people work with publishable libraries using Vite?

Does everyone manually maintain the subset of peerDependencies and dependencies in the publishable package? And then is everyone manually adding the peer dependencies to the rollup config externals ?

Or.. do we simply not use the Vite builder for publishable libraries?

I had to switch to rollup for publishable libraries

[efriandika]

Do you have any workarounds?

Currently, you will need to add these dependencies or peerDependencies into the lib's package.json by hand. It will be copied over to the output.

We have the --generatePackageJson flag for other executors, such as esbuild and rollup, so we are discussing adding it for Vite as well, but no one should be blocked on it as you can add those dependencies manually.

Indeed, it's not blocking us. However, it's forcing us not to use vite for publishable library. Since, there is no benefit adding it manually.

[Phaster911]

It still happens in [email protected], although a package.json file is generated upon when building, dependencies and peerdependencies are not included in that package.json

[StringKe]

I am also puzzled by this. How do people work with publishable libraries using Vite? Does everyone manually maintain the subset of peerDependencies and dependencies in the publishable package? And then is everyone manually adding the peer dependencies to the rollup config externals ? Or.. do we simply not use the Vite builder for publishable libraries?

I had to switch to rollup for publishable libraries

Did you try @nx/rollup in the latest version of nx?

I'm having a problem where the dependencies are packaged correctly, but the core-js dependency is missing, do you have the same problem?

[Phaster911]

I am also puzzled by this. How do people work with publishable libraries using Vite? Does everyone manually maintain the subset of peerDependencies and dependencies in the publishable package? And then is everyone manually adding the peer dependencies to the rollup config externals ? Or.. do we simply not use the Vite builder for publishable libraries?

I had to switch to rollup for publishable libraries

Did you try @nx/rollup in the latest version of nx?

I'm having a problem where the dependencies are packaged correctly, but the core-js dependency is missing, do you have the same problem?

Is core-js installed by one of your dependencies? You could try to install it in the lib

[StringKe]

I am also puzzled by this.

How do people work with publishable libraries using Vite?

Does everyone manually maintain the subset of peerDependencies and dependencies in the publishable package? And then is everyone manually adding the peer dependencies to the rollup config externals ?

Or.. do we simply not use the Vite builder for publishable libraries?

I had to switch to rollup for publishable libraries

Did you try @nx/rollup in the latest version of nx?

I'm having a problem where the dependencies are packaged correctly, but the core-js dependency is missing, do you have the same problem?

Is core-js installed by one of your dependencies? You could try to install it in the lib

No, I guess it was added by babel. I didn't use any corejs api.

[maa-dar]

still the same with 16.4.2 even when selecting webpack :S this is a very big deal not sure how nx manged to produce so much hype with a very basic concept missing

[meeroslav]

There have been a lot of changes recently, which I believe resolve these issues:

• The detection of external dependencies, used for generating package.json deps has been reworked and should be accurate now
• When you generate a publishable library with latest codebase, existing dependencies will automatically be added to the package.json
• We no longer support/suggest usage of --generatePackageJson flag for libraries, but instead using @nx/dependency-checks linter rule - https://nx.dev/packages/eslint-plugin/documents/dependency-checks#dependency-checks-rule

The dependencies will/should still be added to the root package.json, but your publishable lib's package.json should contain its own dependencies set with version ranges that suit your needs. The linter rule is there to assist you.

[meeroslav]

I will close this issue since the original issue information is no longer applicable. If you still have issues with the latest version, please open a new issue and provide minimal repo so we can quickly debug it.

[jaysoo]

To clarify a few things, since people might still be interested in this issue. Nx plugins that build or bundle (vite, rollup, etc.) will no longer manage the dependencies/peerDependencies in package.json moving forward. This feature has always had some issues, where Nx detects some deps that shouldn't be included, or that we don't provide granular support to differentiate dependencies vs peerDependencies.

As of now, all new buildable/publishable libs will have the @nx/dependency-checks added, so when running nx lint <lib>, Nx will check that dependencies/optionalDependencies/peerDependencies in the source package.json are correctly (based on the Nx graph). When something is wrong (e.g. missing dep), you can run nx lint --fix <lib> to update the file.

The lint rule allows projects to still benefit from Nx graph, for checking problems with dependencies. Additionally, it is much more flexible in what to ignore, and where the dependency be belong to (peer vs optional vs dependencies). Nx will no longer touch the dependencies in the output package.json, so you control everything from source.

For more details on the lint rule, see the docs https://nx.dev/packages/eslint-plugin/documents/dependency-checks

[github-actions[bot]]

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.