How to package only the dist folder in a monorepo

Question

I am using lerna and yarn workspaces in my monorepo. The package structure looks like this:

root
`--- packages
     |--- pkg1
     |    |--- src
     |    |    `--- index.ts
     |    `--- dist
     |         `--- index.js
     `--- pkg2
          |--- src
          |    `--- index.ts
          `--- dist
               `--- index.js

• src folder gets compiled into dist folder.
• From each package, I would like to publish only the dist folder so that the imports work without the need of a main entry in package.json pointing inside the dist folder. This is easy to do with lerna: lerna publish --contents dist.

This works fine for external projects needing to use this repo, however it doesn't work within the repo itself. For example, if pkg2, depends on pkg1, it looks for pkg1's index.js file at pkg1/index.js while in reality the compiled version is sitting under pkg1/dist/index.js. How can I make this work?

P.S. I have seen this work in repositories like material-ui, but I can't explain how it works there!

Babysitter

Did you found a solution? Also check #61568975 – Potaufeu

No, I haven't found a good solution yet. Also looked at the SO question you pointed to. – Babysitter

I spent most of this afternoon migrating it to nx.dev, it works very well, but I just hit a build bug. – Potaufeu

It's not the solution I wanted, but what I did was set the outDir to './' in tsconfig.json. This way the transpiled files are all dumped in the root folder and I can reference them without /dist/.... – Laroche

Answer 1

Finally got the solution:

You need to add publishConfig in the package.json of the dependency to be injected, refer following:

EDIT: Please find the code below:

{
  "name": "@name/shared",
  "version": "1.0.0",
  "description": "Shared dependencies for react-native and reactJs",
  "main": "dist/index",
  "types": "dist/index",
  "files": [
    "dist"
  ],
  "publishConfig": {
    "directory": "dist"
  },

Cheers

Garate

Please add code and data as text (using code formatting), not images. Images: A) don't allow us to copy-&-paste the code/errors/data for testing; B) don't permit searching based on the code/error/data contents; and many more reasons. Images should only be used, in addition to text in code format, if having the image adds something significant that is not conveyed by just the text code/error/data. – Pritchett

Thank you soooo much! I have no clue how you found out about this but that's wonderful – Strawworm

Answer 2

Have a look at the "files" field of package.json file https://docs.npmjs.com/files/package.json#files

The "files" field is an array of files to include in your project. If you name a folder in the array, then it will also include the files inside that folder. (Unless they would be ignored by another rule.)

Later

This is ignoring index.d.ts inside dist for me – Stedman