The error shown when yarn start command is given
Error details:
Internal Error: confusion#workspace:.: This package doesn't seem to be present in your lockfile; try to make an install to update your resolutions
at J.getCandidates (C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:2:276872)
at i.getCandidates (C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:2:266282)
at C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:2:286432 at C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349928
at new Promise (<anonymous>)
at e.exports (C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349910)
at o (C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349611)
at C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349684
at C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349727
at new Promise (<anonymous>)
My package.json file is
{
"name": "confusion",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
}
}
I have tried adding
"scripts":{
"start":"react-scripts start"
}
But no change in the error.
Cross-posting from this question:
The problem in here seems to be an existing yarn.lock file inside of one of the workspaces. Deleting it solves the problem.
More info:
Example: 3 workspaces: 2 create-react-app (app, home) and one shared component: (components)
Inside the component folder a lingering yarn.lock file exists. Remove it.
Also check that:
All your workspaces have "private:true" in each of their package.json (same level as name, private, source).
Check that you have added your workspaces inside a "workspaces" key in the main package.json
When you're executing yarn workspaces myworkspace myworkspace matches the name of your workspace in its package.json. In my case, the name of the workspace inside the components folder is called #schon/components, so I need to address it as yarn worksapces #schon/components instead.
It means a certain package is not installed, and you need to install it.
Try running yarn install to install the required packages.
If this does not work, try deleting the node_modules folder and run yarn install again.
If it fails, delete both node_modules folder and yarn.lock file and run yarn install.
try to remove node_modules by installing this package globally
yarn add global rimraf
then remove the node
the -> rimraf node_moules
then remove the yarn.lock the install it by yarn
Related
I am attempting to use the React devtools to produce a flamegraph profile of my app, but I was greeted with the message:
After checking my package.json version number, I saw it was set to "^16.4.1".
I performed an update to both the React and React-Dom versions: npm i --save react#16.5 && npm i --save react-dom#16.5, which updated both versions in the package json to "^16.5.2". I also cleared my node_modules and deleted the package.lock before doing an npm install once again.
However, when I run both my local instance of the app and push changes to my staging environment, it is outputting 16.14.0 as the version number that I have specified to log out in at the start of the App.jsx...
This is puzzling also as the logged out a version earlier than my package.json originally stated...
Is there somewhere that I am missing to update versions that could be causing this?
I have done a global search in my project for 16.14 to see if there is anything and it seems that some of my dependencies have mentioned this version, but I wouldn't think that it would be an issue?
package.lock
------------
"dependencies": {
...
"react": {
"version": "16.14.0",
...
},
...
"react-dom": {
"version": "16.14.0",
...
},
...
}
I don't understand what is going wrong here?
My Repository Structure is
codebook
-packages
-clii
-local-api
-local-client
-lerna.json
-package.json
I installed local api to clii and local-client to local-api but for publishing i wanted to change the name of local-api and local-client so I changed local-api to #codebook/local-api and #codebook/local-client. And ran lerna bootstrap.
I was getting a npm ERR! code E404. So i deleted the node_modules in each subfolders. I thought lerna bootstrap would link the new files as well as install the packages. But it is'nt working. And now all the packages are missing from each sub repositories. I can't do a npm install in each of this repositories. What should i do to install all the packages?
If you are changing the package name of an internal dependency that you have already added to other packages, you need to change that package name in the dependent package.json files as well. Unfortunately I'm not aware of a way to tell lerna to migrate or "rename" a dependency in the project.
So if you changed local-api to #codebook/local-api you need to go into the package.json for clii and update local-api to #codebook/local-api as well.
That said: In my experience, lerna bootstrap is pretty buggy and 404s a lot. I do not know why. All of my issues with it were solved by using lerna for adding dependencies, and yarn workspaces to download and link dependencies. The difference being, lerna just adds to the package.json file while yarn does the downloading and symlinking work.
So the process here would be to add workspaces: ["packages/*"] to your package.json and add new deps via the following commands:
lerna add #codebook/local-api --scope=clii --no-bootstrap
yarn install
TLDR:
how can I instruct storybook to use babel-loader v8.1.0 OR force react-scripts to use babel-loader v^8.2.2 ?
Details
I Develop a lib with ./example folder which is itself project created with create-react-app. I wanted to add storybook in addition to the normal example pages, so I installed storybook.
after installing storybook I can no longer start the example project with yarn start or the story book with yarn storybook.
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-loader": "8.1.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:
D:\Eliav\projects\git projects\react-xarrows\examples\node_modules\babel-loader (version: 8.2.2)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
well I know what the issue but I don't know how to fix it:
I'm using react-scripts v4.0.3 which for unknown reason requiring exactly babel-loader v8.1.0. i can see this it in yarn.lock:
react-scripts#^4.0.1:
version "4.0.3"
...
dependencies:
...
babel-loader "8.1.0"
and storybook requiring babel-loader v8.2.2 or above:
"#storybook/builder-webpack4#6.2.9":
version "6.2.9"
...
dependencies:
...
babel-loader "^8.2.2"
already tried
what is written in the error above.
hoped that yarn upgrade would upgrade babel-loader from v8.1.0 to v8.2.2 but it does not work because react-scripts require exactly v8.1.0
a workaround that worked
Create a .env file in your project directory and include SKIP_PREFLIGHT_CHECK=true in the file.
but I want to avoid it. is it possible?
So for anyone to whom this is still unclear.
I used create-react-app to create a new app
I added storybook using npx sb init
then they clashed.
SOLUTION:
yarn add babel-loader#8.1.0
UPDATE:
The error you often see is that CRA (create-react-app) relies on specific dependencies (e.g. for webpack or babel).
What can also be done is you specify which versions those dependencies must resolve to, based on the error messages
This can be done using the resolutions field in package.json, e.g.:
"resolutions": {
"babel-loader": "8.1.0",
"webpack": "4.x.x",
}
After this all will work Fine.
2 Links to consider https://github.com/facebook/create-react-app/issues/10123
and https://github.com/storybookjs/storybook/issues/4764#issuecomment-740785850
Seems that most people are installing the package to get it to work even thou it says not to install in manually.
So try:
yarn add babel-loader#8.1.0
reHi!
Here's the deal, we have a monorepo. We're using Lerna & Yarn with a bunch of Angular Libraries.
In every package.json for the packages/libraries, we have something like:
"prepublishOnly": "yarn build <library name goes here>"
The way Yarn works for workspaces is yarn install, does what it does. Because we use workspaces, it creates symlinks to the packages. For example, if we have a package called #foo/bar, in the top-level node_modules, we would have node_modules/#foo/bar be a symlink to libs/foo-bar.
Yarn Workspaces is all fine and dandy, except the stuff in node_modules/#foo/bar isn't ready to be published. First, we need to build the package using Angular CLI's compiler.
We accomplish that with the already mentioned prepublishOnly script in package.json.
What works is when all the packages need are to be built. The flow goes:
yarn install - Does the symlink/workspace magic.
lerna publish --contents dist - Does the monorepo magic. Lerna will see that all the packages have had modifications, and run the prepublishOnly across all the packages. This way, what's in node_modules/#foo will be "legit" NPM packages (the output of Angular CLI building the libraries)
The problem is when a single library has a modification.
yarn install - Does the symlink/workspace magic. All the things in node_modules/#foo will be symlinks to libs/<package-name> which, at this point, are source files. Not NPM packages
lerna publish --contents dist - Starts... and goes "Oh, only Package A has changed. So let me run against it." Lerna will fail due to the other packages inside node_modules NOT being legit NPM packages.
I need to figure out how to either:
Always build all the packages when doing a publish OR
Somehow use packages from the NPM registry during the build process
I feel like I'm missing something simple somewhere.
If there are examples I can give to help explain, please ask.
Always build all the packages when doing a publish
in your root package.json (considering you've lerna as a dev dependency)
{
"scripts": {
"publish-ci": "lerna run build && lerna publish --content dist"
}
}
in your library1 packages
"scripts": {
"build": "yarn build library1"
}
now you can run yarn publish-ci on your root folder and everything will be built and published.
you could also use lerna publish --from-package flag to publish only changed package.
Somehow use packages from the NPM registry during the build process
Here, you need lerna to only changed packages, not for publishing, a hacky way to get this is
in your root package.json
{
"scripts": {
"publish-ci": "node custom.publish.js"
}
}
in custom.publish.js
var { execSync } = require("child_process");
let packagesChangedString = execSync("yarn lerna changed --toposort --json --loglevel silent").toString();
let packageChanged = JSON.parse(packagesChangedString.substring(packagesChangedString.indexOf("["), packagesChangedString.lastIndexOf("]") + 1));
console.log(packageChanged);
packageChanged.forEach(changed => {
// exec npm publish manually without using lerna for publishing.
execSync("cd " + changed.location + " && npm publish" );
});
I created a React project using npx create-react-app my-app command. I then tested the project using npm start. When I commit the project to Github, I get a security advisory in the project page.
serialize-javascript vulnerability found in yarn.lock
**Remediation**
Upgrade serialize-javascript to version 2.1.1 or later.
I do not have the serialize-javascript dependency in my package.json file. Here is the project in Github - https://github.com/shankarps/ReactPracticeProject/
How can i fix this error?
How can i ensure that the latest dependencies are included in the project when it is created?
This GitHub issue has a pretty good conversation on this:
https://github.com/yarnpkg/yarn/issues/4986
"The workaround of adding sub-dep A as a direct dep just to fix a security issue is worse because it creates confusion (the package is not used directly) as well as a maintenance burden." - kumar303
As a couple others have suggested, adding a resolutions field to your package.json file might be more ideal.
"resolutions": {
"serialize-javascript": "^2.1.1"
}
I had the same issue Reported by GitHub for my React app created by npx create-react-app:
Here is what I did to resolve this security alert for serialize-javascript to do with yarn.lock.
yarn add serialize-javascript
And then git commit and push the changes of package.json and yarn.lock to GitHub. As a result, the alert was gone.
Just put the serialize-javascript in the resolutions inside package.json so you can force it to use the last update. then run yarn upgrade.
Same issue occurred me, tried below ways and worked
1) yarn add serialize-javascript
git add .
git commit -m "Message here"
git push origin master
2) Add resolutions in package.json file
"resolutions": { "serialize-javascript": "^2.1.1" }
and try yarn upgrade
From https://github.com/facebook/react/issues/17559#issuecomment-563457352
There's nothing about React apps that requires the use of this plugin. It's just something being used by react-scripts/Webpack.
One partial solution is to add the yarn.lock file to the .gitignore. That way the alert will not be shown.