Vue-class-component: example error with typescript 2.6.1

[keenwon]

$ npm install && npm run example
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

> [email protected] example D:\Test\vue-class-component
> npm run build && webpack --config example/webpack.config.js


> [email protected] build D:\Test\vue-class-component
> npm run build:ts && npm run build:main


> [email protected] build:ts D:\Test\vue-class-component
> tsc -p .

src/component.ts(38,16): error TS2532: Object is possibly 'undefined'.
src/component.ts(40,58): error TS2532: Object is possibly 'undefined'.
src/component.ts(41,16): error TS2532: Object is possibly 'undefined'.
src/component.ts(41,34): error TS2532: Object is possibly 'undefined'.
src/component.ts(44,14): error TS2532: Object is possibly 'undefined'.
src/component.ts(45,14): error TS2532: Object is possibly 'undefined'.

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build:ts"
npm ERR! node v6.10.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build:ts: `tsc -p .`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build:ts script 'tsc -p .'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vue-class-component package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     tsc -p .
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs vue-class-component
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls vue-class-component
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     D:\Test\vue-class-component\npm-debug.log

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v6.10.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `npm run build:ts && npm run build:main`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'npm run build:ts && npm run build:main'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vue-class-component package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run build:ts && npm run build:main
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs vue-class-component
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls vue-class-component
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     D:\Test\vue-class-component\npm-debug.log

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "example"
npm ERR! node v6.10.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] example: `npm run build && webpack --config example/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] example script 'npm run build && webpack --config example/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vue-class-component package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run build && webpack --config example/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs vue-class-component
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls vue-class-component
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     D:\Test\vue-class-component\npm-debug.log

package info:

$ npm ls --depth 0
[email protected] D:\Test\vue-class-component
+-- @types/[email protected]
+-- @types/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

[justerest]

I have problem after updating typescript too.

TS1238: Unable to resolve signature of class decorator when called as an expression. Type '<VC extends VueClass<Vue>>(target: VC) => VC' is not assignable to type 'typeof Game1Main'. Property 'extend' is missing in type '<VC extends VueClass<Vue>>(target: VC) => VC'.

[keenwon]

@justerest same with you.

https://github.com/keenwon/vue-normailzr-example

[justerest]

@keenwon, there is new feature in typescript 2.6
// @ts-ignore
I just mute it and it work.

[keenwon]

@justerest
uh...... it works, but not a good idea.

[ktsn]

This seems only to happen if we compile it with ts-loader. tsc does not provide such errors. I have no idea what is the root cause.

@HerringtonDarkholme Do you have any idea to fix this?

[schoening]

Could this be related to one of TypeScripts new features?

Invoke uncalled decorators
Occasionally you might try to use a decorator without calling it first.
Thankfully, TypeScript can use some basic heuristics to figure these scenarios out, and can provide a useful error message with a handy quick-fix to correct from something like @Input to @Input().

https://blogs.msdn.microsoft.com/typescript/2017/10/31/announcing-typescript-2-6/

[HerringtonDarkholme]

@ktsn We need to update Vuex type definition. TS2.6 disallows export default expression in d.ts.

The breaking of Vuex causes other erros. in @keenwon 's example.

[ktsn]

@HerringtonDarkholme I guess there is another cause regarding this problem because the example in this repo also get this kind of error even though it does not depends on Vuex.

[HerringtonDarkholme]

@ktsn Oh, I see.

I guess the problem is strictFunctionTypes. Investigating.

[HerringtonDarkholme]

Already fixed in https://github.com/vuejs/vue/pull/6819. need releasing.

[ktsn]

Thanks for investigation. OK, let's wait the next vue release.

[darylteo]

Hi all, just encountered this issue (or something similar) and it was blocking me majorly.

You can downgrade to 2.5, or add "strictFunctionTypes": false temporarily to get across this hurdle.

Not sure why this was closed, because this was a hard one to figure out. Hope this helps any others (and thanks @HerringtonDarkholme for the key piece of information I needed 👍 )

[HerringtonDarkholme]

@darylteo Vue2.5.3 has released. Try it!

[darylteo]

@HerringtonDarkholme woot! just tried it and it works! thanks x2!

[vladyslav2]

if you updated Vue and still have same issue - make sure you did not forget to update vue-loader, vue-template-compiler and etc

[PSausM]

Where can I find information which version of vue, typescript, vue-loader work together. It's really a nightmare.

[vladyslav2]

I'm not sure if I can do this, if not please delete my post

@PSausM I was very confused too so I decide to create an article how to fix every issue I got https://webdevelop.pro/vuejs-with-typescript.html

[JianShaw]

It happens today.my typescript version is 3.2.3. add "strictFunctionTypes": false solve my problem.

[asanchezfe]

Having same issue today with a fresh installation.

[skyfly200]

Same issue today as well with a fresh install. Been using Vue-CLI for a few weeks and I love it! So far trying typescript has been the largest hurdle I've reached with it, and seeing as I just started learning typescript it's even more painful. How can we get the fresh install to build smoothly without needing modification, so beginners to Vue can feel even more comfortable. It would be so great if this could be resolved!

[adrianord]

Was going through the Microsoft Vue TypeScript Vue Starter tutorial thing and ran into this issue. I agree with @skyfly200, would be nice to resolve for anyone new coming in that may not think to search the error.

[ktsn]

Please don't post to the issue which is closed 1 year ago. The issue with Vue v2.5.18 is already filed on #294