GeekyAnts/vue-native-core

Using locally defined component issue

djneely opened this issue · 1 comments

I posted this out on Stack but have not had any luck with regards to how to fix this issue. But seemingly I'm unable to use a locally defined component?

Stack post: https://stackoverflow.com/questions/66189955/vue-native-using-locally-defined-component-issue

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

Did I use vue-native-cli to create the project?
Yes

Am I using Expo?
No

Development platform (please complete the following information):

  • OS: iOS
  • Shell/terminal: zsh

The device on which I run my Vue Native app

  • Device: iPhone 11
  • OS: iOS 13

Apologies for this. It appears this is an issue with my new-ness to using React. After removing the

and modifying the code things are working.

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