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 support #28

Open
jpuerto opened this Issue Aug 21, 2018 · 2 comments

Comments

Projects
None yet
3 participants
@jpuerto

jpuerto commented Aug 21, 2018

I have used vue-cli to create a Vue.js project with typescript support. I want to use this wrapper to generate the Web Components but I can not build with the vue-cli-service tool.

2:18 Could not find a declaration file for module '@vue/web-component-wrapper'. './node_modules/@vue/web-component-wrapper/dist/vue-wc-wrapper.js' implicitly has an 'any' type.
Try `npm install @types/vue__web-component-wrapper` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue__web-component-wrapper';`

If I add a dummy typescript definition, I can build it but then it does not work as expected when loading the generated javascript library. I have loaded the polyfill and the vue lib in a HTML page like this:

    <script src="https://unpkg.com/vue"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-loader.js"></script>
    <script src="../dist/be-company-elements.js"></script>
    <be-dog/>
`
But it does not work, in the console log I can see the following:

`
Uncaught TypeError: Cannot read property 'props' of undefined
    at initialize (be-company-elements.js:1093)
    at wrap (be-company-elements.js:1241)
    at Module.5a74 (be-company-elements.js:1837)
    at __webpack_require__ (be-company-elements.js:20)
    at 044b.module.exports (be-company-elements.js:84)
    at be-company-elements.js:87

TypeError: Cannot read property '_injectedStyles' of undefined
    at addStyles (be-company-elements.js:645)
    at addStylesToShadowDOM (be-company-elements.js:627)
    at Module.8404.module.exports.__inject__ (be-company-elements.js:2182)
    at VueComponent.injectStyles (be-company-elements.js:1677)
    at VueComponent.hook (be-company-elements.js:1320)
    at callHook (vue.js:2921)
    at VueComponent.Vue._init (vue.js:4613)
    at new BeDog (vue.js:4785)

...

Uncaught TypeError: Failed to construct 'CustomElement': The result must implement HTMLElement interface

Can Typescript Vue components be generated as Web Components?

@kmiskiewicz

This comment has been minimized.

kmiskiewicz commented Oct 22, 2018

any news on this?

@mcgear

This comment has been minimized.

mcgear commented Oct 25, 2018

Just to throw in, same issue here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment