I created a new project with the vue cli.
This project is a Vue3 with Ant Design, Vue Router and Eslint.
However when I give the yarn command it shows me the following warnings.
yarn install v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents#2.3.2: The platform "win32" is incompatible with this module.
info "fsevents#2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents#1.2.13: The platform "win32" is incompatible with this module.
info "fsevents#1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "#vue/eslint-config-airbnb > eslint-import-resolver-webpack#0.13.0" has unmet peer dependency "webpack#>=1.11.0".
warning " > less-loader#7.3.0" has unmet peer dependency "webpack#^4.0.0 || ^5.0.0".
[4/4] Building fresh packages...
Done in 26.91s.
The webpack I noticed is already installed directly on vue 3. How do I resolve these warnings?
for fsevents it seems that it's a MacOS-only library so that might explain why you got the first error.
for peer dependencies and webpack if you are using Yarn it seems that you have to do yarn add webpack --peer or as #kaumadie said in a comment you can also add it directly on the package.json file of your project
With npm, you can do npm i directly in the project's folder and it should resolve all peer dependencies automatically
Hope it helped you, and have a good day !
Related
I started getting this error today
Invariant Violation: "main" has not been registered. This can happen
if:
Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
A module failed to load due to an error and AppRegistry.registerComponent wasn't called.
I read in this thread Invariant Violation: "main" has not been registered While running react-native app that might be because i have multiple versions of react native safe area content.
I ran npm why react-native-safe-area-content and this is what i got
react-native-safe-area-context#4.2.4
node_modules/react-native-safe-area-context
react-native-safe-area-context#"4.2.4" from the root project peer
react-native-safe-area-context#">= 3.0.0" from
#react-navigation/elements#1.3.3
node_modules/#react-navigation/elements
#react-navigation/elements#"^1.3.3" from #react-navigation/native-stack#6.6.2
node_modules/#react-navigation/native-stack
#react-navigation/native-stack#"^6.6.2" from the root project
#react-navigation/elements#"^1.3.3" from #react-navigation/stack#6.2.1
node_modules/#react-navigation/stack
#react-navigation/stack#"^6.2.1" from the root project peer react-native-safe-area-context#">= 3.0.0" from
#react-navigation/native-stack#6.6.2
node_modules/#react-navigation/native-stack
#react-navigation/native-stack#"^6.6.2" from the root project peer react-native-safe-area-context#">= 3.0.0" from
#react-navigation/stack#6.2.1 node_modules/#react-navigation/stack
#react-navigation/stack#"^6.2.1" from the root project
But i don't know what to do now, how should i proceed?
In my case, the version of the react-native-safe-area-context in my package.json was different from the one used in a dependency. The solution was to use the same version the dependency was using.
My package.json had 4.3.1 while my dependency (react-native-gifted-chat) had 4.4.1, a higher version.
To figure out the versions I used yarn why react-native-safe-area-context.
$ yarn why react-native-safe-area-context
yarn why v1.22.19
[1/4] 🤔 Why do we have the module "react-native-safe-area-context"...?
[2/4] 🚚 Initialising dependency graph...
[3/4] 🔍 Finding dependency...
[4/4] 🚡 Calculating file sizes...
=> Found "react-native-safe-area-context#4.3.1"
info Reasons this module exists
- "_project_#expo-app" depends on it
- Hoisted from "_project_#expo-app#react-native-safe-area-context"
info Disk size without dependencies: "1016KB"
info Disk size with unique dependencies: "1016KB"
info Disk size with transitive dependencies: "1016KB"
info Number of shared dependencies: 0
=> Found "react-native-gifted-chat#react-native-safe-area-context#4.4.1"
info This module exists because "_project_#expo-app#react-native-gifted-chat" depends on it.
info Disk size without dependencies: "968KB"
info Disk size with unique dependencies: "968KB"
info Disk size with transitive dependencies: "968KB"
info Number of shared dependencies: 0
✨ Done in 0.94s.
To match the versions I installed the specific version using the command below
yarn add react-native-safe-area-context#4.4.1
I recently install next js use to npm in raspi 4 with the raspbian operating system. Every time when I install react js, next js, and gatsby show me the same error.
At this time I install nextjs use yarn. also, I use npm and npx to show the same error. so I started to find a solution then somebody told me to use sudo so I use sudo but doesn't work
sudo yarn create next-app
check my code error output
pi#raspberrypi:/media/pi/8243-BE00/next $ sudo yarn create next-app
yarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-next-app#10.0.5" with binaries:
- create-next-app
✔ What is your project named? … myapp
Creating a new Next.js app in /media/pi/8243-BE00/next/myapp.
Installing react, react-dom, and next using yarn...
yarn add v1.22.10
info No lockfile found.
[1/4] Resolving packages...
warning next > chokidar > fsevents#2.1.3: "Please update to latest v2.3 or v2.2"
warning next > webpack > watchpack > watchpack-chokidar2 > chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning next > webpack > watchpack > watchpack-chokidar2 > chokidar > fsevents#1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning next > resolve-url-loader > rework > css > urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
warning next > resolve-url-loader > rework > css > source-map-resolve > urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
warning next > resolve-url-loader > rework > css > source-map-resolve > resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
[2/4] Fetching packages...
info fsevents#2.1.3: The platform "linux" is incompatible with this module.
info "fsevents#2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents#2.3.1: The platform "linux" is incompatible with this module.
info "fsevents#2.3.1" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents#1.2.13: The platform "linux" is incompatible with this module.
info "fsevents#1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
error An unexpected error occurred: "ENOSYS: function not implemented, symlink '../../../../terser/bin/terser' -> '/media/pi/8243-BE00/next/myapp/node_modules/#ampproject/toolbox-optimizer/node_modules/.bin/terser'".
info If you think this is a bug, please open a bug report with the information provided in "/media/pi/8243-BE00/next/myapp/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Aborting installation.
yarnpkg add --exact react react-dom next --cwd /media/pi/8243-BE00/next/myapp has failed.
Done in 293.09s.
pi#raspberrypi:/media/pi/8243-BE00/next $
You can try this next:
Remove yarn.lock.
Remove node_modules.
Use the --ignore-optional FLAG (yarn --ignore-optional); these don’t install optional dependencies.
The fsevents package is for macOS only; you don't need it in Linux.
If any of that works you can remove ignore and see if .yarnclean works.
Based on the log, looks like script is not able to create symbolic link
"ENOSYS: function not implemented, symlink '../../../../terser/bin/terser' -> '/media/pi/8243-BE00/next/myapp/node_modules/#ampproject/toolbox-optimizer/node_modules/.bin/terser'".
What is the file system you are using? I know exFAT and FAT32 don't support symbolic link.
Reference: https://learn.microsoft.com/en-us/windows/win32/fileio/filesystem-functionality-comparison
I am trying to create-react-app with typescript as I have done many times to start a new project. It says I have a missing module so I updated my brew, updated yarn, updated node, I see the issue with the engine not compatible with the module but I am not sure how to update the engine either if It deletes everything
stephens-MacBook-Pro:MobX stephen$ yarn create react-app mobx_course --template typescript
yarn create v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
warning Pattern ["object-assign#latest"] is trying to unpack in the same destination "/Users/stephen/Library/Caches/Yarn/v6/npm-object-assign-4.1.1-2109adc7965887cfc05cbbd442cac8bfbb360863-integrity/node_modules/object-assign" as pattern ["object-assign#^4.1.0","object-assign#^4"]. This could result in non-deterministic behavior, skipping.
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "create-react-app#4.0.1" with binaries:
- create-react-app
Creating a new React app in /Users/stephen/Desktop/MobX/mobx_course.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...
yarn add v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
error browserslist#4.14.7: The engine "node" is incompatible with this module. Expected version "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7". Got "13.5.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Aborting installation.
yarnpkg add --exact react react-dom react-scripts cra-template-typescript --cwd /Users/stephenbilham/Desktop/MobX/mobx_course has failed.
Deleting generated file... package.json
Deleting generated file... yarn.lock
Deleting mobx_course/ from /Users/stephen/Desktop/MobX
Done.
error Command failed.
Exit code: 1
Command: /usr/local/bin/create-react-app
Arguments: mobx_course --template typescript
Directory: /Users/stephen/Desktop/MobX
Output:
info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.
stephens-MacBook-Pro:MobX stephen$
Can you try yarn create-react-app ...?
Notice the - between create and react.
I believe the convention is to always have it linked with hyphens, e.g.
create-react-app
create-next-app
create-strapi-app
To give the solution for this error: you need to make sure your node -v is up to date mine was 13.5 and not compatible anymore so I updated it to 14.5
I tried the latest vue-cli 3 tool... full install
project setup is done correctly, but as soon as I add a new dependency, I get a list of warnings, unmet dependencies ... is it due to yarn ( I did not test npm..) or not. Anyway to solve them?
$ yarn add vue-i18n
yarn add v1.9.4
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "#vue/cli-plugin-babel > babel-loader#8.0.0-beta.4" has unmet peer dependency "webpack#>=2".
warning "#vue/cli-plugin-eslint > eslint-loader#2.1.0" has unmet peer dependency "webpack#>=2.0.0 <5.0.0".
warning "#vue/cli-plugin-pwa > workbox-webpack-plugin#3.4.1" has unmet peer dependency "webpack#^2.0.0 || ^3.0.0 || ^4.0.0".
warning "#vue/eslint-config-prettier > eslint-config-prettier#2.10.0" has unmet peer dependency "eslint#>=3.14.1".
warning " > babel-core#7.0.0-bridge.0" has unmet peer dependency "#babel/core#^7.0.0-0".
warning " > sass-loader#7.1.0" has unmet peer dependency "webpack#^3.0.0 || ^4.0.0".
[4/4] 📃 Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue-i18n#8.0.0
info All dependencies
└─ vue-i18n#8.0.0
✨ Done in 34.88s.
tl;dr: Probably not a problem except for webpack (but still probably not a problem). Since webpack is a peer dependency for multiple dependencies, non-deterministic behavior could arise due to different version constraints being listed in different dependencies.
What's Going On
Yarn presents these warnings to prevent different dependencies requiring different versions of a third sub-dependency, which may cause non-deterministic behavior. For instance here, babel-loader, eslint-loader, workbox-webpack-plugin, and sass-loader all have slightly different version constraints on webpack, which means without a yarn.lock file the version constraints are not exactly predictable. To resolve this, you could add webpack as an explicit dependency for your project, or you could yarn upgrade webpack#x.x.x to the version you desire then rely on your yarn.lock to specify this version.
The Solution
In your specific case, the only peer dependency you should be worried about is webpack because all the other ones are only required by a single dependency. However, its likely that no problems will arise if you were to just do nothing about these warnings.
Ideally, this should have been resolved by Vue in vue create process by adding webpack to the package.json, but since I am able to reproduce this error on my end I am guessing that they have not gotten around to it. I would encourage you to create an issue if one has hasn't already been made for this.
More info on Peer Dependencies
A project maintainer can specify peer dependencies in the project's package.json when they believe dependency conflicts could arise when using the package. For instance, if you visit the package.json for #vue/cli-plugin-babel then you will see webpack#>=2 listed in a peerDependencies section. Whoever wrote this Vue plugin likely added webpack as a peer dependency because they were aware how popular webpack is and wanted to warn the user that this plugin uses webpack so as to help them deal with potential conflicts.
While written with npm instead of yarn in mind, I found this article presents some useful advice for working with peer dependencies and peer dependency warnings.
Note: this is a one-way operation. Once you eject, you can’t go back! … At this point you’re on your own.
Claims the CRA docs. However, I don't see why this is. If I am using a VCS, what is preventing me from rolling back the changes made by running npm run eject? This would imply there's something outside the project that affects it, which violates some vague notions about principles of modern web dev that I have in my head..
You can revert eject if you revert the changes in VCS.
eject will just copy configuration files to your working directory so that you have edit them the way you want.
Keep in mind that once you eject, there could be changes in structure in node_modules as scripts will be looking in different paths. Also, node_modules are generally not tracked in version management systems. So after you revert the eject, you might have to install dependencies with npm install or yarn
If that doesn't work, try removing node_modules directory and run npm install or yarn again.
Basically, everything that is tracked in version management systems can be reverted back.
In this case I think a picture begins to explain it. It appears to compile somewhat your app and package.json. Although my node_modules folder appears to get bigger, if I deleted it and type yarn it comes back but only 29 MB this time instead of the larger 175 MB you can see in the screenshot prior to this.
➜ aminosee copy git:(master) ✗ yarn
yarn install v1.13.0
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning " > #typescript-eslint/eslint-plugin#1.6.0" has unmet peer dependency "typescript#*".
warning " > #typescript-eslint/parser#1.6.0" has unmet peer dependency "typescript#*".
warning "#typescript-eslint/eslint-plugin > #typescript-eslint/typescript-estree#1.6.0" has unmet peer dependency "typescript#*".
warning "#typescript-eslint/eslint-plugin > tsutils#3.10.0" has unmet peer dependency "typescript#>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev".
[4/4] 🔨 Building fresh packages...
✨ Done in 68.43s.