Search code examples
vue-native

Vue Native using locally defined component issue

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

Solution

  • 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