First of all, let me apologize if I make so many mistakes in this posts, since I don't really understand how dependencies work and how monorepos are handled (I am trying :P ).
I am currently using a huge monorepo with 12 packages and 2 apps. It is working with no problems with yarn, but I am considering migrating to pnpm specially because of performance issues and to decrease how long it takes to install.
My current problem is that pnpm is way more strict, so I am getting an error regarding to another subpackage not exporting something.
src/components/StatusBall.tsx:6:3 - error TS2305: Module '"../../node_modules/services/lib/status"' has no exported member 'serverID'.
6 serverID,
~~~~~~~~~~~~~~~~~
This is not exactly correct, if I go to the "services" package lib (dist) folder, it is properly compiled, but If i go to StatusBall and I use ctrl+click it sends me to
...frontend\node_modules\.pnpm\#focus+services#1.15.1_sfoxds7t5ydpegc3knd667wn6m\node_modules\services\lib\status\index.d.ts
But this file is missing the export serverId I can see in my lib folder.
What is wrong? Am I missing something?
Related
I'm working on a project built by someone else. I know it was bootstrapped by create-react-app because it says so in README.md.
However, I'm not sure if it has been ejected or not. There are many posts out there teaching you how to actually eject it, but I failed to find a way to check it in the first place. Any help is appreciated!
Some immediate giveaways that a create-react-app project has been ejected:
The dependencies field in package.json no longer contains react-scripts. Instead, it is populated with many additional packages like Babel, Eslint, Jess, Webpack and various Webpack loaders.
The absence of eject script.
The start, build and test no longer follows this format react-scripts start, react-scripts build etc.
A new directory named config appears.
Just sharing because you may or may not see all of these signs in your project as they were probably ejected a long time ago. I hope no one will spend two hours wondering why a certain package didn't work only to discover that the project has been ejected and the package only works with unejected ones.
Many thanks to #YuryTarabanko!
So I tried creating another project using CRA and ejecting it. Right after the ejection, a new directory called config popped up and there were some modifications in other directories, too.
Then I took a look at the project I'm actually interested in. The config directory is right there, with a structure similar to that config dir in the new project that popped up after the ejection. So I'm sure this project has been ejected, too!
Edit:
As Yuri pointed out in the comment:
The most noticeable difference IMHO would be the absence of eject command in package.json#scripts section though ;)
I somewhat agree with the script in package.json, but it could have easily been removed. If the project is in a repo, you should be able to look at the history of a few files to be certain.
It's my first experience with react and as stated in official docs, I was trying out create-react-app to create my first react app.
But I notice that it takes around 15-20 minutes to get finished( even though I have good internet connection) and once it was completed, I noticed the space taken by the newly created folder to be around 165-170 MB.
Isn't there any quicker way to get started with react as the above mentioned method probably installs some modules that are never going to be used.
Thank You.
I also faced the same problem when i first started learning react. What i did was i manually configured webpack to bundle my code. And then i created central node_modules folder in particular place. So anytime i want start a react project i just create a symlink to the node_modules folder. And also if i want install a new package, i go the central folder and install it, so the package will be available in the node_modules folder and for any of my project that may need it. That way i only need to install a package once not every time i want to use it for a new project.
But recently i found a package manager called pnpm. Instead of downloading a package anytime need to install it, pnpm maintains a central cache of packages such that anytime you want to install a package, it just creates a symlink(or junction in windows) (similar to what i used to do).
Conclusion
In conclusion i would recommend you to just configure a bundler (vite is cool) by yourself and use pnpm to install packages. You can read more about pnpm on there website
I am fairly new to react and typescript. I have included the dropdown tree select in my project but it is missing the index.d.ts file in the #types\react-dropdown-tree-select folder. I am not really sure how to generate or make one (not sure of the contents). I tried the dts-gen, but it gives an error as "Couldn't load module "react-dropdown-tree-select". Please install it globally (npm install -g react-dropdown-tree-select) and try again." Even when I have installed it globally.
react-dropdown-tree-select author here.
Currently react-dropdown-tree-select doesn't have any typings, simply because no one ever created them. However, I can see how this can be important for TS users. If you'd like to submit a PR or collaborate on creating typings, I'd be glad to answer any questions you may have.
Thanks for your interest in this component.
I am using a package named react-native-linear-gradient which can be found here. I had to go through quite a lengthy process to eventually get the link to my project (by manually linking via the Binary link with libraries in XCode. I got it working fine, however, each time I install a new package via NPM, linear-gradient is removed from my node-modules folder.
1.Can anyone shed some light on why this is happening? (Happy to provide additional information)
2.Will this impact deployment of the application if this is not solved?
SOLVED: Downgraded to 5.7.1... It seems 5.8.0 seems to cause the same error Michael mentioned.
Recently I've been running into an issue and I'm not sure how to best resolve it. We have a very modular architecture on the front end. We write individual angular components, put them in different repo's, and then include them in other apps as they are required, built with webpack & included via NPM.
Recently I've run into issues where multiple versions of a module end up in the compiled /dist folder coming from different places such as:
Directly included in the App I'm working on
2x Indirectly included through a module that I included (see chart for details).
The reason different versions could be used is that at the time CodeA is written ModuleA may be at version 1, then at a later date CodeB is written which also uses ModuleA which is now at version 2.
Then CodeA and CodeB are included in CodeC and now you have a module name collision on ModuleA.
With this setup, I believe if the multiple modules by the same name are loaded, the last one to get loaded is going to be the code behind that module name. Meaning it will be the one to be used by all modules. So there's no guarantee that the most up-to-date version is will be used. This usually results in getting an error that a method on ModuleA by name XXX does not exist.
To make sure I'm running the latest version of the module I have to go in and manually update (npm install) and build with webpack (npm run build) each library and then push them all to Github. Then I have to npm install in my root app. This isn't always an easy thing to do as the individual libraries' code may need updated to use the latest version of the module in question.
I'm looking for a solution to this issue. I'm guessing a structural/organizational change that will help us to not get into this predicament. If you have any solutions/advice/articles I need to check out please share. Thanks!