vue-cli build fails with compile errors-CodePudding

My Vue 2.2.3 app is failing to build with 4 TypeScript-related errors that I am not sure how to remedy.

Here is what the console looks like:

Failed to compile with 4 errors                                                          6:08:46 PM

 error  in node_modules/vue/types/jsx.d.ts:39:7

TS1110: Type expected.
    37 |    * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
    38 |    */
  > 39 |   [v: `--${string}`]: string | number | undefined
       |       ^^^^^
    40 | }
    41 |
    42 | type Booleanish = boolean | 'true' | 'false'

 error  in node_modules/vue/types/jsx.d.ts:39:20

TS1005: ';' expected.
    37 |    * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
    38 |    */
  > 39 |   [v: `--${string}`]: string | number | undefined
       |                    ^
    40 | }
    41 |
    42 | type Booleanish = boolean | 'true' | 'false'

 error  in node_modules/vue/types/jsx.d.ts:39:21

TS1128: Declaration or statement expected.
    37 |    * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
    38 |    */
  > 39 |   [v: `--${string}`]: string | number | undefined
       |                     ^
    40 | }
    41 |
    42 | type Booleanish = boolean | 'true' | 'false'

 error  in node_modules/vue/types/jsx.d.ts:40:1

TS1128: Declaration or statement expected.
    38 |    */
    39 |   [v: `--${string}`]: string | number | undefined
  > 40 | }
       | ^
    41 |
    42 | type Booleanish = boolean | 'true' | 'false'
    43 | type Numberish = number | string

 ERROR  Error: Build failed with errors.

I followed the link in the console output where I got the following code. I added the file to my project src directory.

// My css.d.ts file
import type * as CSS from 'csstype';

declare module 'csstype' {
  interface Properties {
    // Add a missing property
    WebkitRocketLauncher?: string;

    // Add a CSS Custom Property
    '--theme-color'?: 'black' | 'white';

    // ...or allow any other property
    [index: string]: any;
  }
}

Of course the file above didn't fix the problem and I get the same TypeScript errors. I tried removing '--theme-color'?: 'black' | 'white'; but it didn't work either.

I am frankly not sure how to solve these issues and get the build to pass. Strangely, the app builds without any problems on my production server.

I would like to add that I am also using Veutify which may or may not be causing some of these errors.

Any help is much appreciated.

CodePudding user response：

I am seeing the same errors today with Vue: 2.6.11. Not sure how to deal with it.

UPDATE

I was able to solve the issue by updating TypeScript in my package.json. I think string literals were not supported.

I updated to TS version 4.4.4