Vite build mode development results in error Could not resolve entry module "development/index.html"

Question

I am new to Vite but I am not new to Vue. I haven't used Vue much since 2.0 and I am now creating a new PWA on Vue3. I see Vue3 has a new library called Vite for deploying and running development servers.

As a background I have another similar Vue app that doesn't use Vite where I have 3 .env files, .env.development, .env.staging, and .env.production.

In my old VueJS application these env variables work correctly when I do npm run build --mode development and the app builds and sets variables to use their dev versions correctly, but with Vite I am trying to do a similar thing but I'm getting weird results. I know it's something I'm doing wrong because I can't find anyone having the same issue on using Google.

Basically I want my Vue application to use different variables depending on what env I'm deploying for which worked on my older Vue application but I can't get it to work with Vite.

Whenever I do npm run build --mode development I get an error

Could not resolve entry module "development/index.html".
error during build:
RollupError: Could not resolve entry module "development/index.html".
    at error (file:///Users/khernandez/Desktop/Sprint23-21/OnlineScheduler/node_modules/rollup/dist/es/shared/node-entry.js:2287:30)
    at ModuleLoader.loadEntryModule (file:///Users/khernandez/Desktop/Sprint23-21/OnlineScheduler/node_modules/rollup/dist/es/shared/node-entry.js:24881:20)

As if its looking for a folder called development. I DONT want to create a new folder for every env, I just want my env variables to switch so that my Vue application can use the correct data depending on where I am deploying to.

I have a sneaking suspicion that I am misunderstanding how Vite does deployment but I'm not sure what exactly I am misunderstanding. What am I doing wrong?

Answer 1

--mode must be added to the build script command instead of the npm command.

package.json

"scripts": {
  "build": "vite build --mode development"
}

Then npm run build

Answer 2

You can use an extra set of -- to signify to npm that your arguments are done and to send the rest to the command. That way you can use your single NPM build task to do multiple modes.

• npm run build -- --mode development
• npm run build -- --mode qa
• etc