Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typescript error on quasar upgrade. #11173

Closed
2 of 14 tasks
pstaabp opened this issue Oct 31, 2021 · 6 comments
Closed
2 of 14 tasks

Typescript error on quasar upgrade. #11173

pstaabp opened this issue Oct 31, 2021 · 6 comments
Assignees
Labels
Qv2 🔝 Quasar v2 issues

Comments

@pstaabp
Copy link

pstaabp commented Oct 31, 2021

Describe the bug

I have a substantial-sized project. I have just run quasar upgrade -i and upgraded from 2.1.2 to 2.2.2. Now I'm getting the following error when either doing quasar dev or quasar build:

TS2345: Argument of type '() => Router' is not assignable to parameter of type 'RouteCallback<StateInterface>'.
  Type 'Router' is not assignable to type 'Router | Promise<Router>'.
    Type 'import("/opt/webwork/webwork3/node_modules/vue-router/dist/vue-router").Router' is not assignable to type 'import("/opt/webwork/webwork3/node_modules/@quasar/app/node_modules/vue-router/dist/vue-router").Router'.
      The types returned by 'push(...)' are incompatible between these types.
        Type 'Promise<void | import("/opt/webwork/webwork3/node_modules/vue-router/dist/vue-router").NavigationFailure | undefined>' is not assignable to type 'Promise<void | import("/opt/webwork/webwork3/node_modules/@quasar/app/node_modules/vue-router/dist/vue-router").NavigationFailure | undefined>'.
          Type 'void | import("/opt/webwork/webwork3/node_modules/vue-router/dist/vue-router").NavigationFailure | undefined' is not assignable to type 'void | import("/opt/webwork/webwork3/node_modules/@quasar/app/node_modules/vue-router/dist/vue-router").NavigationFailure | undefined'.
            Type 'NavigationFailure' is not assignable to type 'void | NavigationFailure | undefined'.
              Type 'import("/opt/webwork/webwork3/node_modules/vue-router/dist/vue-router").NavigationFailure' is not assignable to type 'import("/opt/webwork/webwork3/node_modules/@quasar/app/node_modules/vue-router/dist/vue-router").NavigationFailure'.
                Types of property 'type' are incompatible.
                  Type 'ErrorTypes.NAVIGATION_ABORTED | ErrorTypes.NAVIGATION_CANCELLED | ErrorTypes.NAVIGATION_DUPLICATED' is not assignable to type 'ErrorTypes.NAVIGATION_ABORTED | ErrorTypes.NAVIGATION_CANCELLED | ErrorTypes.NAVIGATION_DUPLICATED'. Two different types with this name exist, but they are unrelated.
                    Type 'ErrorTypes.NAVIGATION_ABORTED' is not assignable to type 'ErrorTypes.NAVIGATION_ABORTED | ErrorTypes.NAVIGATION_CANCELLED | ErrorTypes.NAVIGATION_DUPLICATED'.

This on on the src/router/index.ts file.

Note: I created a new quasar project with quasar create and checked all options (same as my current project). The src/router/index.ts file is exactly the same.

Also, I have removed the node_modules file and rebuilt with npm i and still have the same error. Sometimes this seems to fix errors like this.

Codepen/jsFiddle/Codesandbox (required)

This occurs on an upgrade to an existing project and doesn't cause an error on an MWE.

To Reproduce
Steps to reproduce the behavior:

Again, since this is on an existing project on upgrade, I did:

  1. started with code on quasar 2.12.
  2. upgrade via quasar upgrade -i.
  3. The error shown above occurs.

Expected behavior

The web pack to compile without error.

Screenshots
If applicable, add screenshots to help explain your problem.

Platform (please complete the following information):
Quasar Version:
@quasar/app Version:

Quasar mode:

  • SPA
  • SSR
  • PWA
  • Electron
  • Cordova
  • Capacitor
  • BEX

Tested on:

  • SPA
  • SSR
  • PWA
  • Electron
  • Cordova
  • Capacitor
  • BEX

OS: MacOS 11.6.1
Node: v16.12.0
NPM: v8.1.0
Yarn:
Browsers:
iOS:
Android:
Electron:

@pstaabp pstaabp added the Qv2 🔝 Quasar v2 issues label Oct 31, 2021
@yusufkandemir
Copy link
Member

yusufkandemir commented Oct 31, 2021

@pstaabp It looks like there might be another package that depends on vue-router and that may have produced some conflicts. Please share the output of yarn why vue-router so we can take a look and see if that's the problem.

@pstaabp
Copy link
Author

pstaabp commented Oct 31, 2021

Here's my output:

yarn why v1.22.17
[1/4] 🤔  Why do we have the module "vue-router"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "vue-router"
info This module exists because it's specified in "dependencies".
info Disk size without dependencies: "812KB"
info Disk size with unique dependencies: "956KB"
info Disk size with transitive dependencies: "956KB"
info Number of shared dependencies: 1
=> Found "@quasar/app#[email protected]"
info This module exists because "@quasar#app" depends on it.
info Disk size without dependencies: "816KB"
info Disk size with unique dependencies: "960KB"
info Disk size with transitive dependencies: "960KB"
info Number of shared dependencies: 1
✨  Done in 1.43s.

I noticed that in package.json I have a vue-router version of 4.0.11, which is different than the one listed above. in the @quasar/app line. I changed the version of vue-router in package.json to match. Version 4.0.12. That fixed the error.

Suggestion: if this is common, perhaps quasar upgrade can ensure that the package versions match.

@yusufkandemir
Copy link
Member

Normally, you shouldn't/don't need to add major packages that @quasar/app provides like vue, vue-router, etc. Quasar Team tests these packages and makes sure that everything is working as expected with specific versions so you don't have to. I am not sure if you had a specific reason for adding vue-router to your dependencies, but we are trying to find some ways to allow explicit dependencies, see #9235. Thanks for your suggestion, it may be one of the ways to solve it, we'll try to evaluate.
So, if you don't have a specific reason, you can remove vue-router from your dependencies and the one that is coming from @quasar/app will be automatically used. Otherwise, you will have to keep them in sync manually.

@pstaabp
Copy link
Author

pstaabp commented Oct 31, 2021

FYI: I did remove vue-router from package.json, removed the node_modules directory and did a npm i to reinstall and got errors all over the place that vue-router didn't exist. That's why I had it in there.

@yusufkandemir
Copy link
Member

Your lock file probably got corrupted. So, if you remove vue-router from package.json, delete node_modules folder, and delete your lock file (yarn.lock, package-lock.json, etc.), then install dependencies by running running yarn, npm install, etc. it should work.

@pstaabp
Copy link
Author

pstaabp commented Oct 31, 2021

Yes. It was the lock file. Thanks. Maybe detecting some of this in the quasar cli would help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Qv2 🔝 Quasar v2 issues
Projects
None yet
Development

No branches or pull requests

3 participants