[Vite] Project Crystal - Vite build not copy lib package json to output directory

[gperdomor]

Current Behavior

I create a new workspace with Nx 18.0.3 with a react library

build command ran without issues but the output folder not contains the package.json file required for publish the library...

I also override the default build target without success

  "targets": {
    "build": {
      "options": {
        "generatePackageJson": true
      }
    },
  }

Expected Behavior

package.json should be present in the output directory

GitHub Repo

No response

Steps to Reproduce

1. Create a new Nx workspace and install @nx/react plugin
2. Create a react library, select vitest as unit test tool and vite + swv for bundler and compiler
3. Build your library

Nx Report

❯ nx report                                       

 >  NX   Report complete - copy this into the issue template

   Node   : 20.11.0
   OS     : darwin-x64
   npm    : 10.4.0
   
   nx (global)        : 18.0.3
   nx                 : 18.0.3
   @nx/js             : 18.0.3
   @nx/jest           : 18.0.3
   @nx/linter         : 18.0.3
   @nx/eslint         : 18.0.3
   @nx/workspace      : 18.0.3
   @nx/devkit         : 18.0.3
   @nx/eslint-plugin  : 18.0.3
   @nx/react          : 18.0.3
   @nx/rollup         : 18.0.3
   @nrwl/tao          : 18.0.3
   @nx/vite           : 18.0.3
   @nx/web            : 18.0.3
   typescript         : 5.3.3

### Failure Logs

_No response_

### Package Manager Version

_No response_

### Operating System

- [X] macOS
- [ ] Linux
- [ ] Windows
- [ ] Other (Please specify)

### Additional Information

_No response_

[estevaolucas]

I'm facing the same issue.

   Node   : 20.9.0
   OS     : darwin-arm64
   pnpm   : 8.15.2
   
   nx (global)        : 18.0.4
   nx                 : 18.0.4
   @nx/js             : 18.0.4
   @nx/eslint         : 18.0.4
   @nx/workspace      : 18.0.4
   @nx/eslint-plugin  : 18.0.4
   @nx/react          : 18.0.4
   @nx/rollup         : 18.0.4
   @nx/vite           : 18.0.4
   @nx/web            : 18.0.4
   typescript         : 5.1.6

[ccreusat]

Hello, same issue here 👋🏼

Node   : 18.16.1
OS     : darwin-arm64
pnpm   : 8.8.0

nx (global)        : 18.1.2
nx                 : 18.1.2
@nx/js             : 18.1.2
@nx/eslint         : 18.1.2
@nx/workspace      : 18.1.2
@nx/cypress        : 18.1.2
@nx/eslint-plugin  : 18.1.2
@nx/react          : 18.1.2
@nx/rollup         : 18.1.2
@nx/vite           : 18.1.2
@nx/web            : 18.1.2
typescript         : 5.3.3

Creating a react library with this command :

nx g @nx/react:library mylib  --importPath=@scope/mylib --publishable --unitTestRunner=vitest --bundler=vite

[ccreusat]

hey @gperdomor @AgentEnder

If I want to copy the package.json to the output directory, I need to add this to project.json

"targets": {
    "build": {
      "executor": "@nx/vite:build",
      "outputs": [
        "{options.outputPath}"
      ],
      "options": {
        "outputPath": "dist/libs/my-new-lib",
        "main": "libs/my-new-lib/src/index.ts",
        "tsConfig": "libs/my-new-lib/tsconfig.lib.json",
        "assets": [
          "libs/my-new-lib/*.md"
        ]
      }
    },
    "nx-release-publish": {
      "options": {
        "packageRoot": "dist/{projectRoot}"
      }
    }
  },
  "tags": [],
  "release": {
    "version": {
      "generatorOptions": {
        "packageRoot": "dist/{projectRoot}",
        "currentVersionResolver": "git-tag"
      }
    }
  }

Why using the command below doesn't generate correct configuration for publishable libs ?

nx g @nx/react:library mylib --importPath=@scope/mylib --publishable --unitTestRunner=vitest --bundler=vite

[ccreusat]

It looks like nx g @nx/react doesn't work correctly with publishable argument.

The same but with @nx/js to generate a publishable lib works fine and adds the lib to the release projects array in nx.json

[oidacra]

same here.

[hpierre74]

Same same, no package in dist using vite with nx g @nx/react:library mylib --importPath=@scope/mylib --publishable --unitTestRunner=vitest --bundler=vite

Node   : 18.13.0
OS     : linux-x64
npm    : 8.19.3

nx                 : 18.1.3
@nx/js             : 18.1.3
@nx/jest           : 18.1.3
@nx/linter         : 18.1.3
@nx/eslint         : 18.1.3
@nx/workspace      : 18.1.3
@nx/cypress        : 18.1.3
@nx/devkit         : 18.1.3
@nx/eslint-plugin  : 18.1.3
@nx/react          : 18.1.3
@nrwl/tao          : 18.1.3
@nx/vite           : 18.1.3
@nx/web            : 18.1.3
typescript         : 5.3.3

[zachlewton]

also running into this issue

Node   : 18.20.2
OS     : darwin-arm64
yarn   : 1.22.19

nx                 : 18.2.2
@nx/js             : 18.2.2
@nx/jest           : 18.2.2
@nx/linter         : 18.2.2
@nx/eslint         : 18.2.2
@nx/workspace      : 18.2.2
@nx/devkit         : 18.2.2
@nx/eslint-plugin  : 18.2.2
@nx/react          : 18.2.2
@nx/rollup         : 18.2.2
@nrwl/tao          : 18.2.2
@nx/vite           : 18.2.2
@nx/web            : 18.2.2
typescript         : 5.4.3

[edezekiel]

I'm also running into this issue. My workaround is to install the rollup-plugin-copy npm package. Then, I modify the vite.config.ts file so that it copies the package.json into the dist folder after the bundle has been built. With this workaround, I'm able to run npm link and install the package locally in other apps for development.

     import copy from 'rollup-plugin-copy';
     
      // ... rest of config file ...

      plugins: [
        copy({
          targets: [
            { src: 'package.json', dest: '../../dist/libs/shared' }
          ],
          hook: 'writeBundle'
        })
      ]

Here a commit in an example repo demonstrating the workaround.