vite-ssr icon indicating copy to clipboard operation
vite-ssr copied to clipboard

vite-ssr build runs in development mode

Open MiguelDeRoudriges opened this issue 2 years ago • 2 comments
trafficstars

Here is my package json:

{
  "name": "my-vue-app",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "rm -rf dist && vite-ssr build",
    "start": "node ./server/index"
  },
  "dependencies": {
    "@vueuse/head": "^1.1.26",
    "compression": "^1.7.4",
    "express": "^4.18.2",
    "vite-ssr": "^0.16.0",
    "vue": "^3.2.47",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "vite": "^4.3.5"
  }
}

When i do npm run build and then run my express server. My application runs in development mode.

When i try to log "import.meta.env" it shows me that mode at the same time is "production" and PROD is false. How is this even possible?

{
  BASE_URL: '/',
  MODE: 'production',
  DEV: true,
  PROD: false,
  SSR: true
}

MiguelDeRoudriges avatar May 08 '23 12:05 MiguelDeRoudriges

I encountered the same problem as you with vite-ssr build generating a development version of the client. This is using vite 4 and vue 3.

After some hacky debugging I could generate the correct production build by adding an additional argument for defaultNodeEnv of resolveConfig.

I.e. Change this:

https://github.com/frandiox/vite-ssr/blob/50461a4e0ebf431fdd96771e069a5e759e275b6b/src/config.ts#L57-L63

to this:

export async function resolveViteConfig(mode?: string) {
  return resolveConfig(
    {},
    'build',
    mode || process.env.MODE || process.env.NODE_ENV,
    mode || process.env.MODE || process.env.NODE_ENV
  )
}

Then running NODE_ENV=production npm run build in my project (which calls vite-ssr build) I'd get the output I was expecting and not a development build with warnings etc.

I also noticed that the mode isn't being sent through to the resolveViteConfig function so not sure why that is even an argument to the function: https://github.com/frandiox/vite-ssr/blob/50461a4e0ebf431fdd96771e069a5e759e275b6b/src/build/index.ts#L24 https://github.com/frandiox/vite-ssr/blob/50461a4e0ebf431fdd96771e069a5e759e275b6b/src/config.ts#L70

I'm not sure the impacts this hack might have so best if someone with knowledge on this project and vite have a look. For now I've gotten around it in my build process (docker) by adding:

RUN sed -i "s/    return (0, vite_1.resolveConfig)({}, 'build', mode || process.env.MODE || process.env.NODE_ENV);/    return (0, vite_1.resolveConfig)({}, 'build', mode || process.env.MODE || process.env.NODE_ENV, mode || process.env.MODE || process.env.NODE_ENV);/" ./node_modules/vite-ssr/config.js

...before I call the build command :D Very hacky I know and will break after an update! I'm not using it on a professional site, so not too bothered for now. Hopefully this will help get it fixed properly in the mean time.

dtrethewey avatar Sep 17 '23 16:09 dtrethewey

It's an unclear moment from the Vite side. You need to run the build command with NODE_ENV=production

- "build": "rm -rf dist && vite-ssr build",
+ "build": "rm -rf dist && NODE_ENV=production vite-ssr build",

neSpecc avatar Sep 20 '23 12:09 neSpecc