Vue Native using locally defined component issue

Question

I'm working on a test of Vue Native. Very familiar with native iOS and Android development as well as Vuejs in the context of web/SPAs. Figured I would give Vue Native a go to see about using it for some of our smaller projects. I'm running into an issue though just getting started. Please see below my steps to reproduce the issue I'm running into.

Create a new project:

vue-native init vuenativetest --no-expo

I then followed the basic hello world instructions here: https://vue-native.io/getting-started.html

react-native run-ios --simulator "iPhone 11" // works fine

I then jumped over to setting up a basic component of my own from here but trying to 'organize' the code a bit initially. https://vue-native.io/docs/composing.html

create components/HeaderTest.vue

<template>
  <div>Hello Header</div>
</template>

<script>
export default {
  name: "HeaderTest.vue"
}
</script>

<style scoped>

</style>

App.vue

<template>
  <view class="container">
    <header-test />
    <text class="text-color-primary">{{ message }}</text>
    <button title="Press me!" @press="exclaim" />
  </view>
</template>

<script>
import HeaderTest from "./components/HeaderTest";

export default {
  components: { HeaderTest },
  data() {
    return {
      message: "Hello World"
    };
  },
  methods: {
    exclaim() {
      this.message += "!";
    }
  },
};
</script>

<style>
.container {
  flex: 1;
  background-color: white;
  align-items: center;
  justify-content: center;
}
.text-color-primary {
  color: blue;
  font-size: 30px;
}
</style>

react-native run-ios --simulator "iPhone 11" // launches but seeing following error

Invariant Violation: Element type is invalid: expected a string (for built-in components but got: undefined). You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named inports....

Also note that I did try moving this out into the root of the directory as well but to no avail.

What am I doing wrong here? Thanks ahead of time for any guidance.

edit: Created a git repo should anyone want to see all of the code: https://github.com/djneely/vuenativetest

dvbii · Accepted Answer · 2021-02-15 19:57:44Z

1

Seems like you are using div tags which are not supported. The correct tag would be text or view. https://vue-native.io/docs/basic-components.html

answered Feb 15, 2021 at 19:57

dvbii

262 bronze badges

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

Comments

djneely · Accepted Answer · 2021-02-15 20:03:10Z

0

Thanks. It appears it is my newness to React here. Per your comment. I updated the HeaderTest code and I'm in good shape now. Thanks!

<template>
<view>
  <text>Hello Header</text>
</view>
</template>

answered Feb 15, 2021 at 20:03

djneely

1,16915 silver badges27 bronze badges

Collectives™ on Stack Overflow

Vue Native using locally defined component issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related