10

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!

Henry Woody
  • 14,024
  • 7
  • 39
  • 56
Naresh
  • 23,937
  • 33
  • 132
  • 204
  • Did you found a solution? Also check https://stackoverflow.com/questions/61568475/lerna-typescript-npm-how-do-i-properly-setup-the-config-so-that-projectnam?noredirect=1#comment109670510_61568475 – Fernando Montoya May 26 '20 at 08:07
  • No, I haven't found a good solution yet. Also looked at the SO question you pointed to. – Naresh May 26 '20 at 12:57
  • I spent most of this afternoon migrating it to https://nx.dev/, it works very well, but I just hit a build bug. – Fernando Montoya May 26 '20 at 15:28
  • 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/...`. – gabriel_vincent Jun 12 '21 at 04:07

2 Answers2

8

Finally got the solution:

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

enter image description here

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

yanky_cranky
  • 1,303
  • 1
  • 11
  • 16
  • 5
    Please add code and data as text ([using code formatting](//stackoverflow.com/editing-help#code)), 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](//meta.stackoverflow.com/a/285557). 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. – Suraj Rao Sep 24 '21 at 14:59
  • 1
    Thank you soooo much! I have no clue how you found out about this but that's wonderful – Igor Bykov May 08 '22 at 15:42
1

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.)

Zach Itzcovitch
  • 37
  • 1
  • 2