Closed ericis closed 1 year ago
mhartington
commented
3 years ago So sort answer, yarn2 changed how deps are resolved and can cause issue. To resolve for you situation, install the history pacakge with yarn add history
@liamdebeasi and @brandyscarney, we should probably decide if we to support Yarn 2. As far as I know, the yarn community is still pretty much on yarn 1, and yarn 2 is being treated as a completely different package manager.
liamdebeasi
commented
3 years ago Thanks for the issue. We do not have plans for full Yarn 2 support at the moment, but I will keep this issue open for now to gauge interest and collect feedback from the community.
merceyz
commented
3 years ago This issue should be renamed, it's about Yarn PnP support not Yarn 2. Yarn 2, just like Yarn 1, supports both PnP and node_modules
ericis
commented
3 years ago @merceyz my understanding is that PnP is the default for Yarn 2
Yarn 2 documentation refers to using the "node-modules" plug-in as:
Despite our best efforts some tools don't work at all under Plug'n'Play environments, and we don't have the resources to update them ourselves. There are only two notorious ones on our list: Flow, and React Native.
In such a radical case, you can enable the built-in node-modules plugin by adding the following into your local .yarnrc.yml file before running a fresh yarn install
This is pretty extreme language, seeming to suggest very strongly that projects should attempt to use PnP.
However, I can re-title the issue if it would bring clarity?
Perhaps "feat: yarn 2 with default PnP support" ?
ericis
commented
3 years ago @merceyz I noticed you are a Yarn Berry contributor, so I'll just trust your expertise and rename 😉 👍🏻
enk0de
commented
3 years ago when do you make it? i am looking forward to this...
Whizfactor
commented
2 years ago I am having to migrate to NPM back again and its affecting my development.
Facing issues when i run ng config cli.packageManager yarn
Schema validation failed with the following errors: Data path "/projects/app/architect/serve/builder" must NOT be valid. Data path "/projects/app/architect/serve/builder" must be equal to constant. Data path "/projects/app/architect/serve/builder" must be equal to constant. Data path "/projects/app/architect/serve/configurations/ci" must NOT have additional properties(progress). Data path "/projects/app/architect/serve/builder" must be equal to constant. Data path "/projects/app/architect/serve/builder" must be equal to constant. Data path "/projects/app/architect/serve/builder" must be equal to constant. Data path "/projects/app/architect/serve/builder" must be equal to constant. Data path "/projects/app/architect/serve/builder" must be equal to constant. Data path "/projects/app/architect/serve" must match exactly one schema in oneOf.
Did change "packageManager" : "yarn"
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"defaultProject": "app",
"newProjectRoot": "projects",
"projects": {
"app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": ["src/theme/variables.scss", "src/global.scss"],
"scripts": [],
"aot": false,
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"ci": {
"progress": false
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
},
"ci": {
"progress": false
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"styles": [],
"scripts": [],
"assets": [
{
"glob": "favicon.ico",
"input": "src/",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
}
]
},
"configurations": {
"ci": {
"progress": false,
"watch": false
}
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"devServerTarget": "app:serve:production"
},
"ci": {
"devServerTarget": "app:serve:ci"
}
}
}
}
}
},
"cli": {
"analytics": false,
"defaultCollection": "@ionic/angular-toolkit",
"packageManager": "yarn"
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
}
}
}
wmadden
commented
2 years ago @liamdebeasi I think this issue could use some clarification.
The Ionic CLI is actually already compatible with Yarn PnP as far as I can tell - I'm using it myself. The OP's mistake is to install their dependencies with Yarn PnP, then invoke the Ionic CLI with npx, which fails to configure Node's module loader to use PnP, so all the dependencies appear to be missing.
It looks like the steps the OP took were approximately:
npx ionic startnpx test or ionic test or something - a lot of the logs appear to be missingAll they have to do to correct their mistake is invoke their commands with yarn instead of npx, e.g. yarn exec ionic serve works fine with PnP.
Having said all that, Appflow's build system is 100% coupled to Node - it looks like it's hardcoded to invoke npm - despite documentation suggesting using Appflow with Yarn workspaces. I stumbled on this issue while I was debugging that. Should I raise a separate issue to discuss it, and should it be on this repo or somewhere else?
Whizfactor
commented
2 years ago I had to switch to NPM after using yarn 2 and I was having issues.
[Öñ [[[Ŵéð one], [Ĵûñ one] 15, 2022], [22:53]] Wisdom Ubaka < @.***> ŵŕöţé: one two]
Did you use it with yarn 1 or yarn 2??
[Öñ [[[Ŵéð one], [Ĵûñ one] 15, 2022], [21:41]] Will Madden < @.***> ŵŕöţé: one two]
@liamdebeasi https://github.com/liamdebeasi I think this issue could use some clarification.
The Ionic CLI is actually already compatible with Yarn PnP as far as I can tell - I'm using it myself. The OP's mistake is to install their dependencies with Yarn PnP, then invoke the Ionic CLI with npx, which fails to configure Node's module loader to use PnP, so all the dependencies appear to be missing.
It looks like the steps the OP took were approximately:
- Create a blank Ionic app using npx ionic start
- Install all the dependencies with Yarn PnP
- Invoke test runner with npx test or something - a lot of the logs appear to be missing
Having said all that, Appflow's build system is 100% coupled to Node - it looks like it's hardcoded to invoke npm - despite documentation suggesting using Appflow with Yarn workspaces https://ionic.io/docs/appflow/cookbook/appflow-config. I stumbled on this issue while I was debugging that. Should I raise a separate issue to discuss it, and should it be on this repo or somewhere else?
— Reply to this email directly, view it on GitHub https://github.com/ionic-team/ionic-framework/issues/23095#issuecomment-1156910004, or unsubscribe https://github.com/notifications/unsubscribe-auth/APRXSUTZ4WDCHYMVOI43JA3VPI5ZDANCNFSM4ZVRWGPA . You are receiving this because you commented.Message ID: @.***>
ericis
commented
2 years ago @wmadden I'd be happy to add any additional context that could help. So, I reran the exact same commands listed in the issue to retest as well as experimented with your suggestions "to correct [my] mistake [by invoking my] commands with yarn instead of npx".
Since the tools have upgrades and changes, we'll retest the steps.
[x] Install current Node LTS v16.15.1 and npm i -g npm
[x] Follow prerequisite instructions for Yarn 2 with corepack enable
[x] Create a new app using the latest Ionic CLI with the command npx ionic start helloworld blank --type=react --no-git --no-deps
[x] Initialize the project with latest Yarn using yarn set version stable
[x] Install dependencies with yarn install
$ yarn install
➤ YN0000: ┌ Resolution step
➤ YN0032: │ fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged
➤ YN0061: │ source-map-resolve@npm:0.6.0 is deprecated: See https://github.com/lydell/source-map-resolve#deprecated
➤ YN0061: │ svgo@npm:1.3.2 is deprecated: This SVGO version is no longer supported. Upgrade to v2.x.x.
➤ YN0061: │ stable@npm:0.1.8 is deprecated: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [5838a] doesn't provide @babel/plugin-syntax-flow (p01d86), requested by eslint-plugin-flowtype
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [5838a] doesn't provide @babel/plugin-transform-react-jsx (p65a37), requested by eslint-plugin-flowtype
➤ YN0002: │ helloworld@workspace:. doesn't provide @testing-library/dom (p28142), requested by @testing-library/user-event
➤ YN0002: │ react-dev-utils@npm:12.0.1 doesn't provide typescript (p59348), requested by fork-ts-checker-webpack-plugin
➤ YN0002: │ react-dev-utils@npm:12.0.1 doesn't provide webpack (p1012e), requested by fork-ts-checker-webpack-plugin
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 32s 619ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ yaml@npm:1.10.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yargs-parser@npm:20.2.9 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yargs@npm:16.2.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yocto-queue@npm:0.1.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ typescript@npm:4.7.4 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 1m 31s
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0007: │ core-js-pure@npm:3.23.2 must be built because it never has been before or the last one failed
➤ YN0007: │ core-js@npm:3.23.2 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 6s 121ms
➤ YN0000: Done with warnings in 2m 10s[ ] Test with yarn test
$ yarn test
FAIL src/App.test.tsx
● Test suite failed to run
Cannot find module 'history' from 'C:\Users\NOPE\src\tmp\ionic-yarn-test\helloworld\.yarn\__virtual__\@ionic-react-router-virtual-90f86b8dee\0\cache\@ionic-react-router-npm-6.1.10-5e7cf0d4e9-18ddbb26f9.zip\node_modules\@ionic\react-router\dist'
Require stack:
.yarn/__virtual__/@ionic-react-router-virtual-90f86b8dee/0/cache/@ionic-react-router-npm-6.1.10-5e7cf0d4e9-18ddbb26f9.zip/node_modules/@ionic/react-router/dist/index.js
src/App.tsx
src/App.test.tsx
at resolveSync (.yarn/cache/resolve-patch-46f9469d0d-5656f4d0be.zip/node_modules/resolve/lib/sync.js:111:15)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 7.915 s
Ran all test suites.
Watch Usage
› Press f to run only failed tests.
› Press o to only run tests related to changed files.
› Press q to quit watch mode.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press Enter to trigger a test run.💥 Interestingly, things fail the same way.
All they have to do to correct their mistake is invoke their commands with yarn instead of npx
We'll assume the original post was simply a mistake of running an npx command. And, since there is only one command that uses npx at the very beginning, let's try step three again:
[x] Let's replace npx with yarn exec as suggested and run yarn exec ionic start helloworld blank --type=react --no-git --no-deps
$ yarn exec ionic start helloworld blank --type=react --no-git --no-deps
yarn exec v1.22.18
error Couldn't find the binary ionic
info Visit https://yarnpkg.com/en/docs/cli/exec for documentation about this command.💥 This fails, because yarn exec doesn't quite work the same as npm exec or the npx alias.
So, let's just assume that a single version of the Ionic CLI must be installed globally and clutter our machine a little in order for modern yarn tooling to work properly in order to run the ionic start command one single time...
yarn commands only and install the Ionic CLI globally with yarn global add @ionic/cli💥 Despite a successful installation, the ionic command appears to have never been installed or was not registered properly.
$ ionic --version
bash: ionic: command not foundSo, let's follow the official instructions for installing the ionic CLI...
npm install --global @ionic/cliionic --version[ ] Awesome! Now, let's try the suggested yarn command replacement of npx again with the command yarn exec ionic start helloworld blank --type=react --no-git --no-deps
$ yarn exec ionic start helloworld blank --type=react --no-git --no-deps
yarn exec v1.22.18
error Couldn't find the binary ionic
info Visit https://yarnpkg.com/en/docs/cli/exec for documentation about this command.💥 This fails again, because yarn exec doesn't work the same way that npm exec or its alias npx does.
LONG way to say... still having pretty much the same, original issue.
wmadden
commented
2 years ago Sorry to hear that @ericis :/
Maybe someone from the Ionic team can help
Whizfactor
commented
2 years ago Did you use it with yarn 1 or yarn 2??
[Öñ [[[Ŵéð one], [Ĵûñ one] 15, 2022], [21:41]] Will Madden < @.***> ŵŕöţé: one two]
@liamdebeasi https://github.com/liamdebeasi I think this issue could use some clarification.
The Ionic CLI is actually already compatible with Yarn PnP as far as I can tell - I'm using it myself. The OP's mistake is to install their dependencies with Yarn PnP, then invoke the Ionic CLI with npx, which fails to configure Node's module loader to use PnP, so all the dependencies appear to be missing.
It looks like the steps the OP took were approximately:
- Create a blank Ionic app using npx ionic start
- Install all the dependencies with Yarn PnP
- Invoke test runner with npx test or something - a lot of the logs appear to be missing
Having said all that, Appflow's build system is 100% coupled to Node - it looks like it's hardcoded to invoke npm - despite documentation suggesting using Appflow with Yarn workspaces https://ionic.io/docs/appflow/cookbook/appflow-config. I stumbled on this issue while I was debugging that. Should I raise a separate issue to discuss it, and should it be on this repo or somewhere else?
— Reply to this email directly, view it on GitHub https://github.com/ionic-team/ionic-framework/issues/23095#issuecomment-1156910004, or unsubscribe https://github.com/notifications/unsubscribe-auth/APRXSUTZ4WDCHYMVOI43JA3VPI5ZDANCNFSM4ZVRWGPA . You are receiving this because you commented.Message ID: @.***>
liamdebeasi
commented
1 year ago Hi everyone,
I have an update to share. The original issue references an issue with the history dependency in Ionic React.
I recently merged a fix to the Ionic React starters (https://github.com/ionic-team/starters/pull/1691) that makes the history package a direct dependency of the project, which should resolve the reported Yarn issue. Developers with existing apps should manually add the history dependency with yarn add history.
There is also a related issue with Ionicons. Ionicons v6 now ships as a direct dependency of the Ionic React starter applications. Developers with existing apps should manually add the ionicons dependency with yarn add ionicons.
I am going to close this since the original reported issue has been resolved. For any other issues, please create a new issue. Thank you!
ionitron-bot[bot]
commented
1 year ago Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.
Bug Report
Ionic version:
*Note: I tried both node versions 14.16.0 and 15.8.0.
Current behavior:
Creating a new, blank Ionic React app and using the latest
yarnto initialize and run the project results in catastrophic failure related to inability to find dependencies.For more information, see Yarn 2 "Zero Installs" documentation: https://yarnpkg.com/features/zero-installs
*Note: I did verify that the commands
npm i,npm test, andnpm startdo work correctly with the same versions without any issue.Expected behavior:
Tests run and project starts successfully. Ideally, zero warnings (but, I recognize you don't own the entire package dependency tree).
Steps to reproduce:
npx ionic start helloworld blank --type=react --no-git --no-depscd helloworldyarn set version berryyarn installyarn test(qto stop test "watch")yarn startRelated code:
n/a
Other information:
Logs...
Ionic info: