How to create npm package with rslib?

[marek0209]

Hi, I would like to use rslib to build my react component package which I publish through npm.
How can I use rslib for this purpose? From what I can see the dist is not generating package.json.

[Timeless0911]

the dist is not generating package.json

What is this mean?

[marek0209]

I created a library by using "pnpm create rslib" and used the react template, and I would expect that when I have bundle:false set then a package.json file would be generated in dist. Do I understand correctly that in this case each component is treated as a separate entrypoint?
So in this case I would expect an exports section in package.json with a list of components.

This is my config:

import { pluginReact } from '@rsbuild/plugin-react';
import { defineConfig } from '@rslib/core';

export default defineConfig({
  source: {
    entry: {
      index: ['./src/**'],
    },
  },
  lib: [
    {
      bundle: false,
      dts: true,
      format: 'cjs',
      output: {
        cleanDistPath: true,
        distPath: {
          root: './dist/rslib',
        },
      },
    },
  ],
  output: {
    target: 'web',
  },
  plugins: [pluginReact()],
});

[Timeless0911]

Do you mean that you are a monorepo with lots of components which have their own package.json? If so, Rslib do not compile any package.json file so there will not be package.json in dist of each component. Writing exports in root package.json is enough.

[Timeless0911]

If you want each component has its own npm packages, you should build and publish them separately.

[marek0209]

Thanks, I managed to create a proper package.json with export however I have a problem with rslib build library imports, example of an error during vitest testing:

Error: Cannot find module ‘/my_app/node_modules/lodash/capitalize’ imported from my_app/node_modules/my_rslib_lib/esm/utils/myUtils.js
Did you mean to import ‘lodash/capitalize.js’?

Otherwise you have to add /index.js at the end of the mui component import.

Is there any way to solve this?

[Timeless0911]

Please provide a minimal reproduction to help us address the issue, we cannot assist with troubleshooting based on the information currently provided.
Thanks.

Why reproduction is required

[tmeindle]

You can probably set up your exports in package.json to something generic like the following to achieve what you need:

"exports": {
  ".": {
    "types": "./dist/index.d.ts",
    "require": "./dist/index.cjs",
    "import": "./dist/index.js",
  }
  "./*": {
    "types": ["./dist/*/index.d.ts", "./dist/*.d.ts"],
    "require": ["./dist/*/index.cjs", "./dist/*.cjs"],
    "types": ["./dist/*/index.d.js", "./dist/*.js"],
  }
}

[marek0209]

Thanks!