Vite 3 peer dependency issues persist

[matthew-e-brown]

Build tool

Vite

Where do you see the problem?

In the terminal

Describe the bug

465 fixed the peer-deps problem by requiring vite@^2.9.0. However, installing @crxjs/vite-plugin alongside a project with vite@2.9.15 and @vitejs/plugin-vue@2.3.4 (which is the latest version of plugin-vue that has vite@^2.9.0 as one of its peer-deps, instead of vite@^3.0.0) still causes warnings.

It looks like it comes from @vitejs/plugin-react in the optionalDependencies of @crxjs/vite-plugin. Since v1.3.2, @vitejs/plugin-react has had vite@^3.0.0 as a peer-dep. Since the semver constraint on @vitejs/plugin-react is >=1.2.0, 1.3.2 gets installed, causing a warning.

I believe setting @vitejs/plugin-react to ~1.2.0 (until the issues with Vite 3 are resolved) should fix the warnings. Thankfully they're only warnings, this time.

I can submit a pull request for this, if that would make things easier.

Reproduction

1. Create a new Vite project (npm init vite), and adjust the semver constraints to the latest vite@^2.9.0-compatible verions:

   {
       "name": "vite-project",
       "private": true,
       "version": "0.0.0",
       "type": "module",
       "scripts": {
           "dev": "vite",
           "build": "vue-tsc --noEmit && vite build",
           "preview": "vite preview"
       },
       "dependencies": {
           "vue": "^3.2.37"
       },
       "devDependencies": {
           "@vitejs/plugin-vue": "^2.3.4",
           "typescript": "^4.6.4",
           "vite": "^2.9.15",
           "vue-tsc": "^0.39.5"
       }
   }

2. Attempt to install @crxjs/vite-plugin@1.0.14 (latest).

Logs

[Matthew@MATT-PC ~/Desktop/vite-project] $ npm i -D @crxjs/vite-plugin
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @vitejs/plugin-react@2.0.1
npm WARN Found: vite@2.9.15
npm WARN node_modules/vite
npm WARN   dev vite@"^2.9.15" from the root project
npm WARN   2 more (@crxjs/vite-plugin, @vitejs/plugin-vue)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer vite@"^3.0.0" from @vitejs/plugin-react@2.0.1
npm WARN node_modules/@vitejs/plugin-react
npm WARN   optional @vitejs/plugin-react@">=1.2.0" from @crxjs/vite-plugin@1.0.14
npm WARN   node_modules/@crxjs/vite-plugin
npm WARN
npm WARN Conflicting peer dependency: vite@3.0.9
npm WARN node_modules/vite
npm WARN   peer vite@"^3.0.0" from @vitejs/plugin-react@2.0.1
npm WARN   node_modules/@vitejs/plugin-react
npm WARN     optional @vitejs/plugin-react@">=1.2.0" from @crxjs/vite-plugin@1.0.14
npm WARN     node_modules/@crxjs/vite-plugin

added 155 packages, and audited 156 packages in 2s

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

found 0 vulnerabilities

System Info

  System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 19.85 GB / 31.91 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.8.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.54)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @crxjs/vite-plugin: ^1.0.14 => 1.0.14
    vite: ^2.9.15 => 2.9.15

Severity

annoyance

[BurtHarris]

I think I ran into this same thing on my first try. At the Windows command line, I got:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @vitejs/plugin-react@2.0.1
npm WARN Found: vite@2.9.15
npm WARN node_modules/vite
npm WARN     optional @vitejs/plugin-react@">=1.2.0" from @crxjs/vite-plugin@1.0.14
npm WARN     node_modules/@crxjs/vite-plugin

added 129 packages, and audited 130 packages in 7s

The rest of the messages shown above did not appear. Being new to bundlers and vite, I'm not sure how significant it is, but I gather it is just an annoyance.

@jacksteamdev Note: I was following instructions from the link you e-mailed me, https://dev.to/jacksteamdev/create-a-vite-react-chrome-extension-in-90-seconds-3df7. This article says to use npm init vite@^2, is that still needed? I see in https://crxjs.dev/vite-plugin/getting-started/vanilla-js/create-project apparently conflicting instructions to use npm init vite@latest. Not exactly sure which instructions are correct.

[willjohnathan]

looks like the official documentation has been updated to specify vite 2.9 or use the beta crxjs plugin with vite 3.

https://crxjs.dev/vite-plugin/getting-started/vue/create-project

[BurtHarris]

Fixing the docs is good by me.

[devlopersabbir]

@willjohnathan I think it is better to use npm init vite@latest command to initialize your project.