Skip to content
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

Creating a component named map should warn the user (as with button) #8025

Open
pqvst opened this issue Apr 14, 2018 · 16 comments · May be fixed by #8051
Open

Creating a component named map should warn the user (as with button) #8025

pqvst opened this issue Apr 14, 2018 · 16 comments · May be fixed by #8051

Comments

@pqvst
Copy link

pqvst commented Apr 14, 2018

Version

2.5.15

Reproduction link

https://jsfiddle.net/e2yxoomh/2/

Steps to reproduce

Create a component that includes the word "map" (case insensitive). For example:

  • Map
  • MapView
  • mapper

What is expected?

I expect these to work, or at least give me some sort of error message.

What is actually happening?

Nothing happens. The components do not render. There is no error message.

@posva
Copy link
Member

posva commented Apr 14, 2018

Because you're using the in-browser templates, self-closing tags are not working as expected, so it's not that anything containing map isn't working, it's that things are not passed to Vue as you expect.

About the map element, it should indeed warn it is an existing element (same warning as button), so I'm changing the title of the issue to reflect that

@posva posva changed the title Component names that include the word "map" fail silently Creating a component named map should warn the user (as with button) Apr 14, 2018
@pqvst
Copy link
Author

pqvst commented Apr 14, 2018

Ah, I forgot that map is a valid HTML element. But, even if I don't use self-closing tags, a component named MapView doesn't work :/
https://jsfiddle.net/e2yxoomh/11/

@posva
Copy link
Member

posva commented Apr 14, 2018

it does work, you need to use map-view beacuse in browser you cannot use uppercase for element names

@posva posva closed this as completed Apr 14, 2018
@posva posva reopened this Apr 14, 2018
@pqvst
Copy link
Author

pqvst commented Apr 14, 2018

Hmm ok. Well, it seems uppercase works for the first character.

  • Foobar => Works
  • FooBar => Doesn't work

@posva
Copy link
Member

posva commented Apr 14, 2018

You should checkout the style guide section of the docs, it will help you with that 🙂

@pqvst
Copy link
Author

pqvst commented Apr 14, 2018

Ok, thanks. In any case, some warnings would be useful. I wasted quite a few hours trying to figure out what was wrong.

@emanuelmutschlechner
Copy link

emanuelmutschlechner commented Apr 16, 2018

@posva Comparison of reserved Vue HTML tags vs specs. `map` is already in there.
Vue HTML MDN WHATWG
abbr abbr abbr
  acronym  
address address address
  applet  
area area area
article article article
aside aside aside
audio audio audio
b b b
base base base
  basefont  
bdi bdi bdi
bdo bdo bdo
  bgsound  
  big  
  blink  
blockquote blockquote blockquote
body body body
br br br
button button button
canvas canvas canvas
caption caption caption
  center  
cite cite cite
code code code
col col col
colgroup colgroup colgroup
  command  
content content  
data data data
datalist datalist datalist
dd dd dd
del del del
details details details
dfn dfn dfn
dialog dialog dialog
  dir  
div div div
dl dl dl
dt dt dt
element element  
em em em
embed embed embed
fieldset fieldset fieldset
figcaption figcaption figcaption
figure figure figure
  font  
footer footer footer
form form form
  frame  
  frameset  
h1 h1 h1
h2   h2
h3   h3
h4   h4
h5   h5
h6   h6
head head head
header header header
hgroup hgroup hgroup
hr hr hr
html html html
i i i
iframe iframe iframe
  image  
img img img
input input input
ins ins ins
  isindex  
kbd kbd kbd
  keygen  
label label label
legend legend legend
li li li
link link link
  listing  
main main main
map map map
mark mark mark
  marquee  
menu menu menu
menuitem menuitem  
meta meta meta
meter meter meter
  multicol  
nav nav nav
  nextid  
  nobr  
  noembed  
  noframes  
noscript noscript noscript
object object object
ol ol ol
optgroup optgroup optgroup
option option option
output output output
p p p
param param param
picture picture picture
  plaintext  
pre pre pre
progress progress progress
q q q
rp rp rp
rt rt rt
rtc rtc  
ruby ruby ruby
s s s
samp samp samp
script script script
section section section
select select select
shadow shadow  
  slot slot
small small small
source source source
  spacer  
span span span
  strike  
strong strong strong
style style style
sub sub sub
summary summary summary
sup sup sup
table table table
tbody tbody tbody
td td td
template template template
textarea textarea textarea
tfoot tfoot tfoot
th th th
thead thead thead
time time time
title title title
tr tr tr
track track track
  tt  
u u u
ul ul ul
var var var
video video video
wbr wbr wbr
  xmp  

edited by @posva: collapsed the table as it took too much space

@emanuelmutschlechner
Copy link

emanuelmutschlechner commented Apr 16, 2018

Warnings only work when components are registered globally e.g.

Vue.component('map', () => import('@js/components/Map'))

When imported and registered locally in components, no warnings are triggered. e.g.

<script>
import Map from '@js/components/Map';
export default {
    components: {Map}
}
</script>
<template>
    <div><map/></div>
<template>

@Justineo
Copy link
Member

In any case, some warnings would be useful. I wasted quite a few hours trying to figure out what was wrong.

@pqvst If you use in-DOM template, Vue cannot warn you about the use of something like MapView. They are parsed by the browser first and what Vue got is just an element with the tagname mapview:

image

@hatashiro
Copy link
Contributor

I'm thinking of working on this. Will upload a PR in a while!

@saavor
Copy link

saavor commented Jun 1, 2018

screenshot 2018-05-31 at 8 28 05 pm

I was able to find the error but not where it was coming from because vue has a warn() function and the errors always link to that instead of where the error is coming from.

@saavor
Copy link

saavor commented Jun 1, 2018

Ok, so it's not working because of the browser by default setting the tag names to lowercase but vue is still looking for the elements with the upper case letters resulting in it not working

and here is proof: https://jsfiddle.net/e2yxoomh/50/

you just need to replace
Vue.component("MapView"
with
Vue.component("Mapview"
everything else can stay the same

@Zelig880
Copy link

Hi guys, is there anything needed for this Issue? It has bee open for over a year.

I can work on it if you want too.

@Mayank1170
Copy link

Mayank1170 commented Jul 21, 2022

Seems intresting. Think to work on it

@DaZuiZui
Copy link

is there anything needed for this issuse?

@nitin-pandita
Copy link

Hmm ok. Well, it seems uppercase works for the first character.

  • Foobar => Works
  • FooBar => Doesn't work

Yeah the first Letter should be uppercase

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

Successfully merging a pull request may close this issue.