feat(v3-preset): Add typescript support

[ElijahKotyluk]

TS Support for Vuetify 3 CLI Alpha testing.

To test

• Clone and check out this branch

In a separate directory

vue create my-app

Vue prompt

Manually select Vue 3, TypeScript, Vuex and Vue Router.

? Please pick a preset: (Use arrow keys)
    Default ([Vue 2] babel, eslint) 
    Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  ❯ Manually select features 

cd into app dir

cd my-app

Install vuetify/vue-cli-plugins

yarn add -D '../local/path/to/vue-cli-plugins-vuetify'

Invoke vuetify

vue invoke vuetify

Vuetify prompt

? Choose a preset: (Use arrow keys)
  Default (recommended) 
  Preview (v3 + vite)
  Prototype (rapid development) 
❯  V3 (alpha) 
  Configure (advanced) 

Run app

yarn dev

[ElijahKotyluk]

In the template component files?

[glen-84]

I'm using webpack 5, and I'm seeing errors similar to this:

ERROR in ../../node_modules/vuetify/lib/components/VIcon/VIcon.mjs 11:0-61
Module not found: Error: Can't resolve '../../util' in 'D:\Programming\Projects\*\v4\front-end\node_modules\vuetify\lib\components\VIcon'
Did you mean 'index.mjs'?
BREAKING CHANGE: The request '../../util' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve '../../util' in 'D:\Programming\Projects\*\v4\front-end\node_modules\vuetify\lib\components\VIcon'
  using description file: D:\Programming\Projects\*\v4\front-end\node_modules\vuetify\package.json (relative path: ./lib/components/VIcon)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: D:\Programming\Projects\*\v4\front-end\node_modules\vuetify\package.json (relative path: ./lib/util)
      Field 'browser' doesn't contain a valid alias configuration
      D:\Programming\Projects\*\v4\front-end\node_modules\vuetify\lib\util is not a file
 @ ../../node_modules/vuetify/lib/components/VIcon/index.mjs 1:0-47 1:0-47
 @ ../../node_modules/vuetify/lib/components/index.mjs 36:0-34 36:0-34
 @ ./vuetify.ts 5:0-53 10:4-14
 @ ./main.ts 4:0-32 5:31-38

This can be used as a workaround, but I believe that the correct fix is to make changes like this:

-import { convertToUnit, flattenFragments } from "../../util";
+import { convertToUnit, flattenFragments } from "../../util/index.mjs";

... which, I suppose, would be the following in the TSX files:

-import { convertToUnit, flattenFragments } from '@/util'
+import { convertToUnit, flattenFragments } from '@/util/index.mjs'

Could you please make these changes?

[ElijahKotyluk]

@glen-84 I'm going to look at supporting Webpack 5 as a separate issue.