Svelte recipe does not work

[johndeighan]

Just installing the required packages fails with a large number of deprecation and security warnings:

$ npm install -D svelte parcel-plugin-svelte parcel-bundler
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: grammar@1.0.0
npm WARN Found: svelte@3.59.2
npm WARN node_modules/svelte
npm WARN   dev svelte@"*" from the root project
npm WARN   1 more (parcel-plugin-svelte)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer svelte@"^3.0.0" from parcel-plugin-svelte@4.0.9
npm WARN node_modules/parcel-plugin-svelte
npm WARN   dev parcel-plugin-svelte@"*" from the root project
npm WARN deprecated stable@0.1.8: 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
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
npm WARN deprecated domexception@1.0.1: Use your platform's native DOMException instead
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated parcel-bundler@1.12.5: Parcel v1 is no longer maintained. Please migrate to v2, which is published under the 'parcel' package. See https://v2.parceljs.org/getting-started/migration for details.
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

added 824 packages, and audited 825 packages in 32s

81 packages are looking for funding
  run `npm fund` for details

57 vulnerabilities (1 low, 44 moderate, 12 high)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

johnd@RazerBlade MINGW64 ~/grammar
$ npm audit fix
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: grammar@1.0.0
npm ERR! Found: svelte@4.2.8
npm ERR! node_modules/svelte
npm ERR!   dev svelte@"^4.2.8" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer svelte@"^3.0.0" from parcel-plugin-svelte@4.0.9
npm ERR! node_modules/parcel-plugin-svelte
npm ERR!   dev parcel-plugin-svelte@"^4.0.9" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\johnd\AppData\Local\npm-cache\_logs\2023-12-09T16_36_05_300Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\johnd\AppData\Local\npm-cache\_logs\2023-12-09T16_36_05_300Z-debug-0.log

[johndeighan]

FYI, I created a new npm project and installed just svelte and parcel. In my package.json file, it tells me that I installed parcel 2.10.3. Then I created a simple HTML file with just an h1 containing the string "Parcel" with the name index.html. I tried to run it with the command "parcel index.html" and got the following nonsense error message:

[ThrowableDiagnostic [Error]: The plugin "@parcel/reporter-dev-server" is not compatible with the current version of Parcel. Requires "^2.10.3" but the current version is "2.9.3".] {
  diagnostics: [
    {
      message: 'The plugin "@parcel/reporter-dev-server" is not compatible with the current version of Parcel. Requires "^2.10.3" but the current version is "2.9.3".',
      origin: '@parcel/core',
      codeFrames: [Array]
    }
  ]
}

Actually, there were a bunch of these for different plugins. It thinks the current version is 2.9.3, but it's really 2.10.3. WTF is going on?

FYI, here's the output from running "npm list":

$ npm list
grammar@1.0.0 C:\Users\johnd\grammar
└── parcel@2.10.3

[mischnic]

For your first problem: parcel-plugin-svelte is a plugin for Parcel 1. And parcel is Parcel 2.

I just tried npm i -D svelte parcel in an empty folder and then npx parcel index.html worked fine. So I don't know what npm did in your case.