Unable to import/export vuejs components

Question

I have a folder like this.

VueTree
  components
    Classic.vue
    Modern.vue
  index.js

Classic and Modern are simple components with template, export default {} and a style. I am calling both inside index.js as:

import Classic from './components/Classic.vue'
import Modern from './components/Modern.vue'

const VueTree= {
  Classic ,
  Modern 
}

export default VueTree

So, when I import this module as:

import {Classic , Modern } from '../../modules/VueTree/index.js'

I get this error

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I have name: "Classic" inside my components and I am including the in the current file using components: { Classic }, but I get the same error.

It only works if I export only one component as:

import Classic from './components/Classic.vue'
import Modern from './components/Modern.vue'
export default Classic

this will work and include the classic, but I can't export both of them like seen in this example https://github.com/greyby/vue-spinner/blob/master/src/index.js

craig_h · Accepted Answer · 2017-12-14 10:43:01Z

6

+50

You need to use export for named exports, not export default:

import Classic from './components/Classic.vue'
import Modern from './components/Modern.vue'

export {
  Classic ,
  Modern 
}

See: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

edited Dec 14, 2017 at 10:43

answered Dec 14, 2017 at 10:11

craig_h

32.8k7 gold badges61 silver badges70 bronze badges

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

7 Comments

hidar Over a year ago

Hmm.. I just changed it and I get the same error.

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

Setting is the page that imports the components. The name is really there

craig_h Over a year ago

That's strange, I've tested this in one of my projects and it works absolutely fine, I get the error you are receiving if I use export default. It may be a browser caching issue, try opening up your site in a private window/incognito mode and see if the error still occurs.

hidar Over a year ago

Yup. Just tried it in incognito mode and the same error. Maybe it's the structure of my app

<template>   <div>  v classic   </div> </template>  <script> export default {  name: 'Classic',   data () {    return {     }  }   } </script>  <style scoped>  </style>

Do you see anything wrong with it?

craig_h Over a year ago

No, that looks fine. I've just noticed that there's a space between the file name and .vue it should be './components/Modern.vue' not './components/Modern .vue' so it might just be a typo? I'll change that in my answer.

hidar Over a year ago

Ah, sorry that was just a typo when pasting. I have eslint and I have no errors. Like I said, if I export only one it works perfectly.

|

tony19 · Accepted Answer · 2022-07-15 23:14:56Z

2

The setup you have is fine.

import Classic from './components/Classic.vue'
import Modern from './components/Modern.vue'

const VueTree = {
  Classic,
  Modern
}
export VueTree

The problem is your components. I can see you're using a Treeview so, it is a recursive component. You should be extra careful about how you create them because it can create a infinite loop.

Take a look at my github for a example on how your VueTree should work.

Ps: Don't forget to add a key and a name to a recursive component.

Components can recursively invoke themselves in their own template. However, they can only do so with the name option. Vue Docs.

If what i said does not work. Feel free to send me a github link to the issue and i will be happy to help.

edited Jul 15, 2022 at 23:14

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 22, 2017 at 18:44

Dany Gagnon

1222 silver badges10 bronze badges

2 Comments

hidar Over a year ago

I'm not using the vuetree as seen there. This is my own module, there is no recursive call. They are just two simple hello world files for now. Also, your const is missing = and export VueTree is throwing Unexpected token, expected { error

Dany Gagnon Over a year ago

@hidar Was missing a equal sign. Check again.

Dmytro Ober · Accepted Answer · 2018-04-12 05:13:12Z

1

Another way

index.js

export { default as Classic } from './components/Classic.vue'
export { default as Modern } from './components/Modern.vue'

Modern.vue

import { Classic } from './components/index';

export default {
   components: { Classic }
}

NOTICE: Chlidren component must by exported just BEFORE parent component in index.js.

answered Apr 12, 2018 at 5:13

Dmytro Ober

212 bronze badges

Comments

Pavel Levin · Accepted Answer · 2021-02-01 11:48:08Z

0

I think it's better to do this 🤔

index.js / index.ts

import ParentName from './ParentName.vue'
import ChildName from './ChildName.vue'

export default ParentName

export { ChildName }

ComponentName.vue

import ParentName, { ChildName } from '~/components/abstractName'

export default {
   components: {
       ParentName,
       ChildName
   }
}

answered Feb 1, 2021 at 11:48

Pavel Levin

7469 silver badges7 bronze badges

Collectives™ on Stack Overflow

Unable to import/export vuejs components

4 Answers 4

7 Comments

2 Comments

index.js

Modern.vue

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

2 Comments

index.js

Modern.vue

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related