VueJS giving me an "unknown custom element" error despite mimicking a working component

Question

I have a small vueJS app started. It's just a .html file and a .js file. Inside the HTML, I'm linking to the JS file to get my Vue components. Everything about the component seems to be in working order as far as I can tell: I literally copied the form of another component which I copied from a tutorial. So it should work, but it doesn't, or at least I can't tell why it shouldn't work.

Here is my code. The HTML:

// this is in main_step09.js
Vue.component('headline-roly', {
  props: ['title', 'body', 'date'],
  template: `
        <div>
            <h1>Today's Headline: {{ title }}</h1>
            <p>{{ body }}</p>
            <h6>Reported on: {{ date }}</h6>
        </div>
    `
});

new Vue({ el: '#root' })

<!-- actually in <head> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css">

<div id="root" class="container">
  <headline-roly title="In The News" body="lorem ipsum" date="10/16/2019"></headline-roly>
  <headline-roly title="This Just In" body="CTV News reporting" date="12/20/2019"></headline-roly>
  <headline-roly title="Spider-Man!" body="The daily bugle" date="01/16/3019"></headline-roly>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

<!-- this is where main_step09.js is included in the actual code
<script src='main_step09.js'>


</script>
-->

I don't see what I'm doing wrong. It even works in a JS Fiddle: https://jsfiddle.net/j15x32fp/

But in the browser I get the error:

"[Vue warn]: Unknown custom element: <headline-roly> - did you register the component correctly? For recursive components, make sure to provide the "name" option."

Anyone help?

Try adding some console logging in main_step09.js just to check that you aren't getting a cached version. Could you also confirm that you're registering the component before you create the Vue instance with new Vue? Does the same file contain other components that are working correctly? Are there any other error or warning messages in the console? — skirtle
– skirtle, Commented Oct 16, 2019 at 23:31
@Ohgodwhy it's unlikely OP is using Webpack with CDN resources — Phil
– Phil, Commented Oct 16, 2019 at 23:39
In addition to @skirtle's comment, you can check the Sources tab in your browser console to confirm the correct JavaScript code is loaded. — Phil
– Phil, Commented Oct 16, 2019 at 23:43
@skirtle I found my files in weird configurations with pieces of code missing. "Something went wrong" with my file saving, and the code should've been working all along. I literally had to paste stuff back in from the JSFiddle in the OP because it was entirely missing from the file. Mystery solved! Kind of. (I have no idea how the code went MIA in the first place...) — Roly Poly
– Roly Poly, Commented Oct 17, 2019 at 10:03

Benjamin Goldsbury · Accepted Answer · 2019-10-17 03:03:02Z

1

Your script doesn't know what a headline-roly is because you commented out the <script> tag for main_step09.js, where headline-roly is defined.

answered Oct 17, 2019 at 3:03

Benjamin Goldsbury

111 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

Phil Over a year ago

That's just for the snippet. The comment indicates where the <script> tag is in OP's actual code

Phil Over a year ago

Sorry for any confusion, that's my fault for editing OP's question to add a runnable snippet. You can see the original version here ~ stackoverflow.com/revisions/58422410/1

Roly Poly · Accepted Answer · 2019-10-17 10:05:22Z

0

Hey all: The solution ended up being a little strange. I restarted my computer, reinstalled my Windows 10 OS, and found that main_step09.js was ... oh.

I had the code for the Vue component sitting in the wrong file. There was a duplicate titled "main_step09-testing.js" where I had the code written.

Stupid. Oh well

answered Oct 17, 2019 at 10:05

Roly Poly

5892 gold badges10 silver badges25 bronze badges

Collectives™ on Stack Overflow

VueJS giving me an "unknown custom element" error despite mimicking a working component

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related