vue-cli-plugin-quasar

vue-cli-plugin-quasar copied to clipboard

Describe the bug I started getting the following error during both of dev and build runs. The error appears in every .ts file, where I have anything imported from 'quasar'. So in my case - uid and Notify. TS7016: Could not find a declaration file for module 'quasar/src/utils/uid.js'. '/path/to/app/node_modules/quasar/src/utils/uid.js' implicitly has an 'any' type.

To Reproduce Error only started appearing after upgrading from 2.. to 3.0.1. I have followed the upgrade guide as posted in release notes. The rest of the code is otherwise unchanged. I import from quasar with the following statement from docs, e.g. import { uid } from 'quasar'.

Expected behavior Requested helpers being imported and not to throw any errors during compilation.

Platform (please complete the following information): Node: 14.3.1 NPM: 6.14.8 vue-cli-plugin-quasar: 3.0.1 quasar: 1.14.1 @quasar/extras: 1.9.8

Additional context The interesting bit is that the IDE (VSC) highlights uid function signature as expected () => string, despite the above mentioned error. Moreover, from time to time, with no apparent reason, the dev (vue-cli-service serve) command seems to compile just fine without any errors.

I'm still hesitating to post this issue, however I'm completely puzzled as to why such would be happening. I will gladly provide any additional info if needed, yet I'm not sure where to start looking for potential cause of this problem.

Kind regards

Hey there @mv-go, could you check if the problem happens also on a fresh install? Do you have the time to produce a repro?

Hey! Will try today, yup.

hey @IlCallo , sorry for a late reply!

Unfortunately, I was not able to reproduce the issue on a fresh install. Which only has me bugging, what is going wrong in my larger project.

Anyhow, since I can not reliably reproduce the issue, I guess this thread can be closed :(

Ooops, never mind, I think I found it. What helped is removing a bunch of (I think) unnecessary code from my project's vue.config. Yeah, we do have a fairly large (50k+ lines) codebase, most of which was written a fair bit ago by people who are no longer with us.

Anyhow, steps that allowed me to reproduce.

1. vue create with all the usual suspects + typescript (and Class-style component syntax)
2. vue add quasar with, once again, nothing special (font awesome, roboto, ie11 support, allow overwriting vue default components, etc.)
3. create a simple utils folder with utils.ts inside, which imports uid from quasar and exports a single method, like so

import { uid } from 'quasar'

export const generateUid = (): string => {
  const newUid = uid()
  return newUid
}

4. import this helper in HelloWorld.vue -> import { generateUid } from '../utils/utils'
5. call it in created

created () {
    this.uuid = generateUid()
}

6. display it in component

<div>
      my new uid {{ uuid }}
</div>

7. modify vue.config.js with a bunch of Webpack configs (from my larger project). Below is the entire file contents

module.exports = {
  chainWebpack: config => {
    const rule = config.module.rule('ts')
    rule.uses.delete('thread-loader')
    rule.use('ts-loader')
      .loader('ts-loader')
      .tap(options => {
        // modify the options...
        options.transpileOnly = false
        options.happyPackMode = false
        return options
      })

    const ruleX = config.module.rule('tsx')
    ruleX.uses.delete('thread-loader')
    ruleX.use('ts-loader')
      .loader('ts-loader')
      .tap(options => {
        // modify the options...
        options.transpileOnly = false
        options.happyPackMode = false
        return options
      })
  },

  pluginOptions: {
    quasar: {
      importStrategy: 'kebab',
      rtlSupport: false
    }
  },
  transpileDependencies: [
    'quasar'
  ]
}

8. modify build scripts in package.json to use modern option as well "build": "vue-cli-service build --modern"
9. run npm run build
10. command will fail with the following error

[tsl] ERROR in /path/to/project/src/utils/utils.ts(1,17)
      TS7016: Could not find a declaration file for module 'quasar/src/utils/uid.js'. '/path/to/project/node_modules/quasar/src/utils/uid.js' implicitly has an 'any' type.

Not sure, why the above config would break the build, but here I am. Remove the aforementioned Webpack config (except for pluginOptions and transpileDependencies of course) resolves the issue. I'll still leave this here for anyone else, who might stumble upon this.

@IlCallo once again, thank you for your help. If you have any idea as to why this is happening - please spare a couple of minutes to educate me on the issue :)

Kind regards