frandiox / vite-ssr

Use Vite for server side rendering in Node
MIT License
823 stars 91 forks source link

Vite 4 support? #185

Closed lautiamkok closed 1 year ago

lautiamkok commented 1 year ago

Having trouble installing it with Vite 4. Error below:

$ npm i vite-ssr -D
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: starter@0.0.0
npm ERR! Found: vite@4.0.4
npm ERR! node_modules/vite
npm ERR!   dev vite@"^4.0.4" from the root project
npm ERR!   peer vite@"^4.0.0" from @vitejs/plugin-vue@4.0.0
npm ERR!   node_modules/@vitejs/plugin-vue
npm ERR!     dev @vitejs/plugin-vue@"^4.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^2.7.7" from vite-ssr@0.16.0
npm ERR! node_modules/vite-ssr
npm ERR!   dev vite-ssr@"*" 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! /home/lau/.npm/_logs/2023-01-15T10_09_05_724Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/lau/.npm/_logs/2023-01-15T10_09_05_724Z-debug-0.log

If I forced it:

$ npm i vite-ssr -D --force
npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: vite-ssr@0.16.0
npm WARN Found: @vitejs/plugin-vue@4.0.0
npm WARN node_modules/@vitejs/plugin-vue
npm WARN   dev @vitejs/plugin-vue@"^4.0.0" from the root project
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peerOptional @vitejs/plugin-vue@"^2.0.1" from vite-ssr@0.16.0
npm WARN node_modules/vite-ssr
npm WARN   dev vite-ssr@"*" from the root project
npm WARN 
npm WARN Conflicting peer dependency: @vitejs/plugin-vue@2.3.4
npm WARN node_modules/@vitejs/plugin-vue
npm WARN   peerOptional @vitejs/plugin-vue@"^2.0.1" from vite-ssr@0.16.0
npm WARN   node_modules/vite-ssr
npm WARN     dev vite-ssr@"*" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: vite-ssr@0.16.0
npm WARN Found: vite@4.0.4
npm WARN node_modules/vite
npm WARN   peer vite@"^4.0.0" from @vitejs/plugin-vue@4.0.0
npm WARN   node_modules/@vitejs/plugin-vue
npm WARN     dev @vitejs/plugin-vue@"^4.0.0" from the root project
npm WARN   2 more (vite-plugin-pages, the root project)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer vite@"^2.7.7" from vite-ssr@0.16.0
npm WARN node_modules/vite-ssr
npm WARN   dev vite-ssr@"*" from the root project
npm WARN 
npm WARN Conflicting peer dependency: vite@2.9.15
npm WARN node_modules/vite
npm WARN   peer vite@"^2.7.7" from vite-ssr@0.16.0
npm WARN   node_modules/vite-ssr
npm WARN     dev vite-ssr@"*" from the root project

added 30 packages, and audited 224 packages in 9s

Thanks

frandiox commented 1 year ago

Yeah I haven't had time to test this with Vite 4 yet. PRs are welcome!

champ7champ commented 1 year ago

We are really looking forward to vite 4 support

frandiox commented 1 year ago

Please try the new v0.17.0

lautiamkok commented 1 year ago

@frandiox Got the following error when starting the app after build:

Server started: http://localhost:3000
(node:37951) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/.../dist/server/main.js:1
import { defineComponent, ref, onMounted, inject, createApp, useSSRContext, resolveComponent, withCtx, createTextVNode, toDisplayString } from "vue";
^^^^^^

SyntaxError: Cannot use import statement outside a module

So I have to change this json file manually:

// ./dist/server/package.json
{
  "main": "main.js",
  "type": "commonjs",
  "ssr": {
    "assets": [
      "assets",
      "error.html",
      "favicon.ico",
      "static"
    ]
  }
}

Change "type": "commonjs", to "type": "module",.

Then everything is working perfectly.

Could you please automate that?

Thanks for your hard work!

frandiox commented 1 year ago

@lautiamkok good catch, I forgot the default changed from CJS to ESM in Vite 3. It should be fixed in the new 0.17.1 release.

lautiamkok commented 1 year ago

@frandiox thanks for fixing that and making the new release! It now works perfectly and I don't see any more errors :-D