Vue3 upgrade: migrate Vue CLI / Webpack to Vite

[severinbeauvais]

Karim said he was interested in working on this one.

Vite is recommended for Vue3 + Typescript (ref).

Vite is compatible with Vue2 (ref).

So, we should upgrade ASAP to make our future lives easier.

• investigate pros and cons (timeboxed)
• try it with one of the Entity UIs (Filings/Create/Edit) Will be handled in Create UI - Implement what's left of Vue CLI migration to Vite #17118
• create new tickets for significant remaining work
• document the above in a RFC for others to see

[severinbeauvais]

@seeker25 Do you have any comments on the following...

• should we change or not?
• implications of both options?
• effort needed to change?

[seeker25]

1. Probably, faster compile times, lighter
   https://vitejs.dev/guide/why.html

2. Might need to figure out how to do library builds - other sticking points

3. I don't think it's too difficult, here's a boiler plate project I was messing around with:
   https://github.com/iMuFeng/vite-vue2-starter

[severinbeauvais]

@jdyck-fw @Mihai-QuickSilverDev @davemck513 I'd like to groom this (or timebox it to a 3) and bring it in to the next sprint.

cc: @JazzarKarim FYI

[severinbeauvais]

Tentatively tagged to next sprint.

[severinbeauvais]

See this PR for possible sample Vite packages and config:
bcgov/name-examination#1385

[severinbeauvais]

From July 6 Vue3 meeting:

(Rollup replaces Webpack, but some Webpack files may be needed to resolve TS errors. Talk to @thorwolpert about this.)

[JazzarKarim]

For Reference, you can find everything below in this PR: bcgov/business-create-ui#556

Vite

• Next generation front-end tooling that aims to provide a leaner and faster development experience
• Fast development server startup
• Fast hot module replacement
• Dev Server Start time in milliseconds.
• Hot module replacement in an instant.

How does it pull it off?

• Vite utlizes the fact that browsers now support native ES Modules. Directly ship files from browser to server
• For files that still need processing like TS files, Vite uses a GO based JS bundler which is super fast

Steps for our UIs:

Remove:

"@vue/cli-plugin-babel": "^5.0.8"
"@vue/cli-plugin-eslint": "^5.0.8"
"@vue/cli-plugin-typescript": "^5.0.8"
"@vue/cli-plugin-unit-jest": "^5.0.8"
"@vue/cli-service": "^5.0.8"
"sass-loader": "^10.4.1" (not using webpack anymore, vite supports all common css preprocessors)
"vue-template-compiler": "2.7.10" (compiling single file components will be taken care of vite plugin to be installed)

Install Vite, vite plugin for vue 2, and vitest:

"vite": "4.3.9"
"@vitejs/plugin-vue2": "^2.2.0" (vue plugin for vite to teach vite how to deal with single file components)
"vitest": "0.33.0"

Provide support only for modern browsers:

Delete babel.config.js
Delete babel related dependecies: core-js
In .eslintrc.js, update env from node: true to es2021: true (in source code we're working now in es module land not in node)

Add Vite config file:

vite.config.js
Please check the PR for details.

Index.HTML

Move index.html to root of project
Make changes to it. Please check the PR for details.

Package.json scripts.

Update scripts in package.json
Change:
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lint:nofix": "vue-cli-service lint --no-fix",
    "test:unit": "vue-cli-service test:unit --testPathPattern --coverage",
    "test:debug": "node --inspect-brk node_modules/.bin/vue-cli-service test:unit --testPathPattern --no-cache --watch --runInBand"

To:
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "lint": "eslint . --ext .js,.ts,.vue",
    "test:unit": "vitest",
    "test:coverage": "vitest run --coverage"

Now it's npm run dev not serve to run development server

Environment variables

We usually update environment variables: VUE_APP_ --> VITE_ (in .env)
Syntax for using env variables changes: process.env --> import.meta.env

HOWEVER, since we have a lot of dependecies on process.env, we will keeping it. In order to do that:
install: "vite-plugin-environment": "^1.1.3"
In vite.config.js, add to the plugins array:
EnvironmentPlugin({
  BUILD: 'web' // Fix for Vuelidate, allows process.env with Vite.
}),

Notes:

Changed webpack-env in types in tsconfig.json to vite/client.

I got lots and lots of errors. This is the summary of the errors fixed:

Transforming JavaScript decorators to the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides) is not supported yet error.
Vite version 4.4.3 was causing this error. Using version 4.3.9 fixed this error.

The requested module does not provide an export named: 
    - I changed export shared interfaces to export type { } in index.ts
    - We need to change import { Debounce } from BusinessLookup.vue (common component) to import type { Debounce }
    - This error is usually fixed by adding import "type". 

This syntax requires an imported helper but module 'tslib' cannot be found:
In package.json, add: "tslib": "2.6.0"
npm i

Eslint going crazy and finding errors in everything,
Create .eslintignore file and add to it:
    coverage/
    dist/
    node_modules/
    public/

ReferenceError: require is not defined error, COULDN'T BE FIXED.
Tests are not running. Vitest currently executes the tests but all fail due to various errors.

[JazzarKarim]

Follow-up ticket: #17118

[severinbeauvais]

@Mihai-QuickSilverDev @davemck513 Although there is some follow-up work, this ticket has accomplished its intended purpose, so I propose we close it.