componentOptions.tag is undefined

[aoi-umi]

when use Select of ivew on jsx, it will throw an error TypeError: Cannot read property 'match' of undefined
input:

<Select >
  <Option></Option>
</Select>

output:

TypeError: Cannot read property 'match' of undefined

expected:

no error

iview/iview#3697 (comment)

[haoqunjiang]

Please provide a reproduction repo.
We can't debug without any real code to run.

[aoi-umi]

@sodatea
https://codesandbox.io/s/vue-antd-template-hihlw?file=/src/components/ButtonCounter.vue

line 47

let btn = (<ButtonCounter
          style={{ marginTop: "10px" }}
          type="button"
          count={count}
          onChange={onChange}
        />);
        console.log(111111111, btn.componentOptions);

the componentOptions.tag is undefined

[haoqunjiang]

Isn't this expected? componentOptions.tag isn't guaranteed to have a value.

[haoqunjiang]

It will only have a value when you pass a string as the first argument. When a constructor is passed, it will be undefined.

[aoi-umi]

@sodatea
but it is not undefined in template,
how can I get it in jsx?
https://codesandbox.io/s/vue-antd-template-hihlw?file=/src/App.vue
click the button,the tag is tag:"ButtonCounter"

[RichieChoo]

@sodatea you did not find why the select throw error,close issue first. Too irresponsibility

[haoqunjiang]

First and foremost, I have addressed the problem, it's not a bug of the JSX plugin. It's the component library that has used a property that is not guaranteed to exist. So it needs to be fixed in iView, not the JSX plugin.

[haoqunjiang]

componentOptions.tag only exists if you construct the element with expressions like h('Option'), but would be undefined when you construct it with h(Option).

We prefer the latter form when writing render functions because it's more efficient (there needs to be a resolve process if you refer to a component with its name string).
So, whenever Option is available in the current scope, the JSX plugin compiles <Option> to h(Option), and only falls back to h('Option') if you forgot to write import Option from ..., which is a bad practice.

[RichieChoo]

@sodatea Please accept my apologies.I have imported Option from ..., it's iview bug.

[JinGem]

wow, thanks. now i know what's causing this problem
i convert JSX to render and ran into this problem.

h(
  Option, // should be "Option"
  { props: { disabled: this.isReadonly, value: source.code } },
  [source.name]
)