Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Uncaught TypeError: Cannot read property 'props' of undefined
See original GitHub issueNo matter what I try, I always get the above message when trying to use my simple web component in a chrome browser. In Firefox, the error is slightly different:
TypeError: options is undefined
src/main.js:
import Vue from 'vue';
import vueCustomElement from 'vue-custom-element';
import HelloWorld from './components/HelloWorld.vue';
Vue.use(vueCustomElement);
Vue.customElement('hello-world', HelloWorld);
src/components/HelloWorld.vue:
<template>
<div>
<h1>Hello World</h1>
<div>{{ msg }}</div>
</div>
</template>
<script>
export default {
props: {
msg: {
type: String
}
}
}
</script>
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World example</title>
<script src="/assets/js/helloworld.js" async deferred></script>
</head>
<body>
<hello-world msg="just a prop"></hello-world>
</body>
</html>
What am I doing wrong?
Issue Analytics
- State:
- Created 5 years ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
React - TypeError: Cannot read property 'props' of undefined
I'm trying to create a click event be able to delete an item on my list, but when I click it I get...
Read more >TypeError: Cannot read property 'props' of undefined (Example)
According to the compiler, props does not exist. ... Uncaught TypeError: Cannot read property 'props' of undefined at Constructor.render ...
Read more >Lifting the state up - Props Uncaught TypeError: Cannot read ...
Uncaught TypeError : Cannot read properties of undefined (reading 'map'). It looks like my properties from Counters component in the App ...
Read more >Use ES6 Arrow Functions to Resolve "TypeError - Pluralsight
1TypeError: Cannot read property '<your property name>' of undefined. If you run into this error while writing React, the odds are high that ......
Read more >How to Read React Errors (fix 'Cannot read property of ...
This error usually means you're trying to use .map on an array, but that array isn't defined yet. That's often because the array...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Apparently it works fine when running in dev mode, but the problem occurs when building for production. So after some more trial and error I found out that, apparently, depending on which webcomponent library I want to use I need to use a different build command.
This command doesn’t work at all and results in the above error:
vue build --target wc --name hello-world ./src/main.js(see note below)This command has to be used to use the “official” vue-web-component-wrapper library:
vue build --target wc --name hello-world ./src/components/HelloWorld.vueNote: official library requires a .vue file as the entry: https://cli.vuejs.org/guide/build-targets.html#web-componentThis command has to be used to use the vue-custom-element library:
vue-cli-service build --target lib --name hello-world src/main.jsMaybe the docs can/should be clearer about this?
Thanks for taking your time!
@karol-f you should mention this in the readme: