Vue.js "export 'Filelist' was not found in '@/components/Filelist'

Question

I'm facing an issue with my first Vue Project. I already googled for a while but can't find something very usefull.

I simply try to create a parent ("Files") and a child component ("Filelist") and use the Filelist in Files. This is not working as expected. I can't see the mistake, beacause i already added

export default {
  name: 'Filelist',

The only hint I can get is from the browser console

[Vue warn]: Unknown custom element: <Filelist> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Files> at src/docs/categories/Files.vue
       <App> at src/App.vue
         <Root>

and

./src/App.vue (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue) 42:14-22"

export 'Filelist' was not found in '@/components/Filelist'

Thanks a lot in advance

The code of Files:

<template>
  <div class="">
    <h1>Hedajo</h1>
    <Filelist :msg="sometext"/>
    {{ sometext }}
  </div>
</template>

<script>
import { Filelist } from "@/components/Filelist.vue";

export default {
  name: "Files",
  components: {
    Filelist
  },
  data() {
    return {
      sometext: "hejo",
    };
  },
  methods: {

  }
};

</script>

<style scoped>
</style>

The code of Filelist:

<template>
  <component class="">
    {{ msg }}
    <p>hewhwe</p>
    {{ hedadi }}
    {{ testi }}
  </component>
</template>

<script>
export default {
  name: 'Filelist',
  props: ["msg"],
  data () {
    return {
      testi: "hedadi",
    };
  }
};
</script>

<style scoped>
</style>

score 3 · Accepted Answer · answered Jan 03 '19 at 10:47

3

It's a default export, so you don't need to extract it. Try

import Filelist from "@/components/Filelist.vue";

answered Jan 03 '19 at 10:47

Aseider

5,875
1
14
25

Wow :D Thank you really much. When do i need { }? 6 min and i can mark your answer as correct – RacoonOnMoon Jan 03 '19 at 10:50
You can use the { } Syntax to import named exports. So if you would have something like `export class MyClass {}`, then you would import it with `import {MyClass} from '...'`. For more details, see: https://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import?rq=1 – Aseider Jan 03 '19 at 10:54

score 0 · Answer 2 · answered Jan 03 '19 at 10:48

You will need to register FileList as a component before using it.

<template>
  <div class="">
    <h1>Hedajo</h1>
    <Filelist :msg="sometext"/>
    {{ sometext }}
  </div>
</template>

<script>
import Vue from 'vue';
Vue.component('Filelist', require('@/components/Filelist.vue').default);
....

You dont need the import Filelist statement in this case

Vue.js "export 'Filelist' was not found in '@/components/Filelist'

2 Answers2