[Docs] transpiled packages

[rgbkrk]

Are there repositories or recommendations for making lerna monorepos that have packages requiring transpiling?

Particular motivations:

• exporting React components as modules
• flow types across packages

[slorber]

Hi @rgbkrk I'm looking for the same but did not find anything

Check this issue as well:
vercel/next.js#707

I think it would be great to have a Lerna boilerplate with some idiomatic setting. Sure we can take a look at projects like babel as inspiration but they are pretty complex projects with specific requirements, while most of us just want to develop a webapp :)

[ravicious]

I did what was suggested in one of the issues @slorber linked to: my shared packages are scoped under a common name. So I have a package bar that's in packages/bar, but its package.json has "name": "@foo/bar".

At work, we use webpack and babel for transpiling, so to make it work I had to do the following:

1. Set resolve.symlinks to false.
   • This is needed for the next step.
2. Add /@foo/ regex to the include array of the rule that uses babel-loader.
   • Since we turned off symlinks resolving in the previous point, other packages from the monorepo are going to resolve to node_modules/@foo/<package-name>, not ../<package-name>.
   • This was suggested in next.js issue, so I just went to see how they implemented it and did something similar.
3. Change node_modules in resolve.modules to path.resolve(__dirname, 'node_modules').
   • Otherwise webpack 2 tried to require dependencies from the node_modules of local linked packages. But that's probably because I use file:../bar for specifying them in package.json, as I don't publish them anywhere.
4. Set up Jest to transpile files under the @foo scope.
   • This means adding "transformIgnorePatterns": ["<rootDir>/node_modules/(?!@foo)"] to Jest's configuration. Unexpected token export jestjs/jest#2550 (comment)

So now exported React components/Flow types can be transpiled by babel!

One more thing I did was to add flow-bin to devDependencies of the monorepo's package.json, but idk if it's necessary.

[LukasBombach]

Dude @ravicious that worked! Thank you! For others following this, I had to not do the step with path.resolve(__dirname, 'node_modules'), I simply had to keep the normal node_modules string (in a create-react-app-app)

[LukasBombach]

Ok, it does not quite work. I have to restart my webpack dev server any time I make changes to my imported packages.

[ravicious]

Yes, that was my problem as well. That happened after upgrading yarn to 1.0 I think. Unfortunately, I stopped working on the project that was using this stack, so I don’t have a solution for this issue.

[LukasBombach]

I see, thank you

[sibelius]

@ravicious do you have a repo example of this structure?

[ravicious]

@sibelius Unfortunately not, I don't own rights to that project.

[rgbkrk]

https://github.com/nteract/nteract uses both lerna and yarn workspaces, feel free to check it out. We have a common webpack config in packages/webpack-configurator, a flowconfig that resolves the right packages, and a jest config in our package.json that says how to map modules.

Update: nteract is on typescript now so not all of the above applies anymore.

[sibelius]

for jest config check this entria/entria-fullstack#13

you need to use require.resolve, instead of node_modules because you can't know whether workspace will hoist or not

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.