-
-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support Lerna and/or Yarn Workspaces #1333
Comments
I'm using a
🎉 You can |
This is pretty nice. Does Babel transpilation still work in this case though? |
The individual packages under |
I would prefer to not have to transpile all our packages when used in an overall app and yet I know that when we publish to npm we need them to be ES5-consumable. |
For me the holy grail of Lerna support with CRA would look something like,
The idea here is that we have a monorepo for web clients that can contain multiple CRA-based apps as peers that have access to a few shared other packages (e.g. a lib of shared presentational components, maybe a lib with some api calling utils, anything else). The CRA apps should be able to require code from the other packages and Babel should know to transpile such code coming from within the monorepo automatically. Is this possible with Lerna and CRA at the moment? Any related issues or info I can look at? |
While I'm no longer using |
Yarn added workspaces in 1.0 recently, don't know how it impacts this but thought it might be worth mentioning. |
@gaearon I've got babel transpilation working alongside Lerna in a private fork of CRA. Add something like this to the end of module.exports.lernaRoot = path
.resolve(module.exports.appPath, '../')
.endsWith('packages')
? path.resolve(module.exports.appPath, '../../')
: module.exports.appPath
module.exports.appLernaModules = []
module.exports.allLernaModules = fs.readdirSync(
path.join(module.exports.lernaRoot, 'packages')
)
fs.readdirSync(module.exports.appNodeModules).forEach(folderName => {
if (folderName === 'react-scripts') return
const fullName = path.join(module.exports.appNodeModules, folderName)
if (fs.lstatSync(fullName).isSymbolicLink()) {
module.exports.appLernaModules.push(fs.realpathSync(fullName))
}
}) Webpack configs: // before
{
include: paths.appSrc
}
// after
{
include: paths.appLernaModules.concat(paths.appSrc)
} Jest config: // before
transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$'],
// after
transformIgnorePatterns: [
// prettier-ignore
'[/\\\\]node_modules[/\\\\](?!' + paths.allLernaModules.join('|') + ').*\\.(js|jsx|mjs)$'
] Don't have the time to make a PR & add tests, comments, etc. but should be easy for someone else to do |
Great!! @ashtonsix . I also have the lerna set up with CRA based on your code. My folder structure is
For anyone else, the key for webpack in CRA app to transpile jsx is add lerna packages absolute path in BTW: I have it done without forking CRA, but used a mechanism to extend CRA webpack config, you may find more detail steps in #1328 (comment) |
I've created an example monorepo and PR 3741 that adds support for it.
I assume that it is agreed that cra-comps should be transpiled just like app src (including JSX) since that seems to be the request from above comments, but some further questions about desired functionality:
Is this the correct place to try to get the answers for those questions? |
I'm also getting error ../shared/lib/icons/coffee.d.ts 2:0
Module parse failed: The keyword 'interface' is reserved (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import React, { CSSProperties } from 'react';
> interface Props {
| width: CSSProperties['width'];
| height: CSSProperties['height']; This is shared typescript package( I have same kind of setup for another up and it doesn't gives errors but for this it gives errors. |
My first attempt to integrate CRA with lerna was based on https://juliangaramendy.dev/monorepo-demo/ That was pretty successful and orthodox: components are built separately (before the CRA app), and then are then available as dependencies of the CRA app like any other dependency in So I looked for another way to do this and found it here: The steps are:
The are various ways to implement this change to
Anyway I did it using I needed to do something else (one more thing) as well: because the TypeScript source in the component packages are in Given this new method (i.e. editing My example of making this change is at cwellsx/view@8d046d9 |
There's another issue here #8071 discussing it along with a pull request, if you would like to check it out and upvote it. |
This worked well for me. Saved my tail. |
@cwellsx I'm doing the same thing to import shared packages into my CRA package, and this works beautifully. But one thing I'm struggling with is getting absolute import paths working within my shared package. I can use absolute imports in my CRA app by setting I'd also like to do this within my shared package, but updating Is there another way to get absolute import paths working within shared packages? |
Successful setup:
Using same setup as: https://github.com/anthanh/lerna-react-ts-transpile-modules/tree/master/packages/webapp
Also:
|
@ricklove thanks. do you mind putting all that in a repo? I think it would help a lot of people. |
@ricklove thanks, i was just able to make my lerna monorepo work following those same steps! Anyway, it would be great if create-react-app could make it easier to add those customizations without requiring those external packages. 😄 |
would be fantastic to have this feature. I followed the same tutorial that @raphaelpc followed and it does the job, but it doesn't feel right to change the start script to |
This is my solution: Add this to the end of /config/paths: module.exports.appLernaModules = []
const folderLernaPackageName = '@my-monorepo' // this is the name of your packages folder in package.json. For example: name: '@my-monorepo/utils'
const lernaRoot = path.resolve(module.exports.appPath, '../../')
const lernaPackages = path.join(lernaRoot, 'packages') // this is the name of your packages folder in monorepo
const regexpFolderLernaPackage = new RegExp(`^${folderLernaPackageName}\\/`, 'g')
const lernaPackagesFromDependencies = Object.keys(
require(resolveApp('package.json')).dependencies
)
.filter((packageName) => packageName.startsWith(folderLernaPackageName))
.map((packageName) => packageName.replace(regexpFolderLernaPackage, ''))
fs.readdirSync(lernaPackages).forEach((folderName) => {
const isDependencyNeed = lernaPackagesFromDependencies.includes(folderName)
if (isDependencyNeed) {
module.exports.appLernaModules.push(path.join(lernaPackages, folderName))
}
}) Replace this in /config/webpack.config.js: // before
{
include: paths.appSrc
}
// after
{
include: paths.appLernaModules.concat(paths.appSrc)
} Thanks for the idea @ashtonsix |
After
I stopped reading. |
That feeling you get when you have the same problem a year later and find an answer written by your past self. Thanks past @ricklove ! Note: your memory is not great. |
Hey guys.. any update on this i'm still stuck today trying to setup my existing cra app with lerna. Anyone tried to do it with craco? I'm getting weird error:
|
Hey @ricklove! I'm back form the future. Note: jest testing is still an issue... |
I asked a (currently unanswered) stackoverflow question about this same issue here and just got reminded of this thread since I'm subscribed :) would be really interested in this. I'd like the individual packages to all get built incrementally and then refer to the dist folders instead of the src at dev time, but it seems like many people refer to the actual src directories of their monorepo packages which is a bit awkward |
@ricklove I'm here for all your time traveling |
Guys, use turborepo, this issue isn't gonna be adressed |
|
This is possible with Yarn PNP and CRA but not out of the box, you need to set up some kind of auto-build as soon as any files change based on watchman. It's not that difficult to get it working though. |
Are there any plans to support Lerna? By default Lerna uses the
packages
directory to store the packages. Right now the content of that folder is not transpiled so it's not possible to use ES6 code in there. It would be nice to have the possibility to use Lerna to create a monorepo application with create-react-app.I've tried using the
src
directory with Lerna, but that conflicts with not ignoringnode_modules
directory inside thesrc
directory, so it gives a ton of lint errors when you do so.The text was updated successfully, but these errors were encountered: