problem with adding typescript to project

kayn23 commented 2 years ago

Version

5.0.4

Environment info

System:
    OS: macOS 12.1
    CPU: (8) x64 Apple M1 Pro
  Binaries:
    Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node
    Yarn: Not Found
    npm: 8.12.0 - ~/.nvm/versions/node/v14.18.2/bin/npm
  Browsers:
    Chrome: 102.0.5005.61
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.2
  npmPackages:
    @element-plus/icons-vue:  1.1.4 
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.1.1 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  4.5.17 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  4.5.17 
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.17 
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.17 
    @vue/cli-plugin-router: ~4.5.0 => 4.5.17 
    @vue/cli-plugin-typescript: ~5.0.0 => 5.0.4 
    @vue/cli-plugin-unit-jest: ~4.5.0 => 4.5.17 
    @vue/cli-plugin-vuex: ~4.5.0 => 4.5.17 
    @vue/cli-service: ~4.5.0 => 4.5.17 
    @vue/cli-shared-utils:  4.5.17 (5.0.4)
    @vue/compiler-core:  3.2.36 
    @vue/compiler-dom:  3.2.36 
    @vue/compiler-sfc: ^3.0.0 => 3.2.36 
    @vue/compiler-ssr:  3.2.36 
    @vue/component-compiler-utils:  3.3.0 
    @vue/devtools-api:  6.1.4 
    @vue/eslint-config-standard: ^5.1.2 => 5.1.2 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/reactivity:  3.2.36 
    @vue/reactivity-transform:  3.2.36 
    @vue/runtime-core:  3.2.36 
    @vue/runtime-dom:  3.2.36 
    @vue/server-renderer:  3.2.36 
    @vue/shared:  3.2.36 
    @vue/test-utils: ^2.0.0-0 => 2.0.0 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^7.0.0 => 7.20.0 
    jest-serializer-vue:  2.0.2 
    vue: ^3.2.36 => 3.2.36 (2.6.14)
    vue-demi:  undefined (0.13.1)
    vue-eslint-parser:  7.11.0 
    vue-gtag: ^2.0.1 => 2.0.1 
    vue-gtag-next: ^1.14.0 => 1.14.0 
    vue-hot-reload-api:  2.3.4 
    vue-jest: ^5.0.0-0 => 5.0.0-alpha.10 (3.0.7)
    vue-loader:  15.9.8 (16.8.3)
    vue-meta-info: ^0.1.7 => 0.1.7 
    vue-router: ^4.0.0-0 => 4.0.15 (2.8.1)
    vue-style-loader:  4.1.3 
    vue-template-es2015-compiler:  1.9.1 
    vue-the-mask: ^0.11.1 => 0.11.1 
    vue3-json-viewer: ^2.2.2 => 2.2.2 
    vuex: ^4.0.0-0 => 4.0.2 
  npmGlobalPackages:
    @vue/cli: 5.0.4

Steps to reproduce

vue add typescript
 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes

📦  Installing @vue/cli-plugin-typescript...

up to date, audited 2807 packages in 5s

130 packages are looking for funding
  run `npm fund` for details

56 vulnerabilities (1 low, 11 moderate, 31 high, 13 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
✔  Successfully installed plugin: @vue/cli-plugin-typescript

? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Convert all .js files to .ts? No
? Allow .js files to be compiled? No
? Skip type checking of all declaration files (recommended for apps)? Yes

What is expected?

Typescript will be added to the project

What is actually happening?

🚀 Invoking generator for @vue/cli-plugin-typescript... ERROR Error: Cannot find module '@vue/cli-plugin-router/generator/template/src/views/HomeView.vue' from '/Users/anatoly/Documents/work/ndfl_all/node_modules/@vue/cli-plugin-typescript/generator/template/src/views' Error: Cannot find module '@vue/cli-plugin-router/generator/template/src/views/HomeView.vue' from '/Users/anatoly/Documents/work/ndfl_all/node_modules/@vue/cli-plugin-typescript/generator/template/src/views' at Function.resolveSync [as sync] (/Users/anatoly/.nvm/versions/node/v14.18.2/lib/node_modules/@vue/cli/node_modules/resolve/lib/sync.js:111:15) at renderFile (/Users/anatoly/.nvm/versions/node/v14.18.2/lib/node_modules/@vue/cli/lib/GeneratorAPI.js:518:17) at /Users/anatoly/.nvm/versions/node/v14.18.2/lib/node_modules/@vue/cli/lib/GeneratorAPI.js:303:27 at processTicksAndRejections (internal/process/task_queues.js:95:5) at async Generator.resolveFiles (/Users/anatoly/.nvm/versions/node/v14.18.2/lib/node_modules/@vue/cli/lib/Generator.js:310:7) at async Generator.generate (/Users/anatoly/.nvm/versions/node/v14.18.2/lib/node_modules/@vue/cli/lib/Generator.js:204:5) at async runGenerator (/Users/anatoly/.nvm/versions/node/v14.18.2/lib/node_modules/@vue/cli/lib/invoke.js:111:3) at async invoke (/Users/anatoly/.nvm/versions/node/v14.18.2/lib/node_modules/@vue/cli/lib/invoke.js:92:3)

gavmck commented 1 year ago

Was there a fix for this? Getting the same issue.

kayn23 commented 1 year ago

At the moment I can't say for sure. But the solution was to fix the package versions

gavmck commented 1 year ago

I got it, vue add automatically does the latest version, so it added v5, but the rest of my app was on v4 so it was incompatible. Had to vue add typescript@4

vuejs / vue-cli