Vue-styleguidist: Imported components are not rendered when using vue-i18n

Created on 15 Jun 2019 · 4Comments · Source: vue-styleguidist/vue-styleguidist

Current behavior

When a component imports a component that uses vue-i18n in SFC mode the imported component is not rendered instead a comment is shown. I used the Vuetify+i18n example as reference.

To reproduce

See the repository CC Vocabulary and the styleguide.

Here Index imports Hello and Footer both of which are not rendered after I added vue-i18n to them. The components without vue-i18n are working fine. The component Index also works fine when rendered actually on the page indicating that the issue is with Styleguidist in some way. Also I observed that adding Hello or Footer to the code in preview (without having imported Hello or Footer in the .vue file) renders them correctly, indicating that the issue is with import statement.

I am using the Vue CLI plugin for both Vue-i18n and Vue Styleguidist.

    "vue-cli-plugin-i18n": "^0.6.0",
    "vue-cli-plugin-styleguidist": "^3.13.7"

Expected behavior

The imported component should be shown normally.

question

Source

dhruvkb

Most helpful comment

I found the issue and has some to do with styleguidist and some to do with cc-vocabulary.

// this is how you import the Hello Component
import Hello from '@/path/Hello/Hello'

You intend this instruction to import Hello.vue. Instead it loads Hello.json. This is because the vue-cli has a webpack config that resolves json and vue components all the same.

const webpackConfig = {
resolve: { extensions:
   [ '.js',
     '.jsx',
     '.ts',
     '.tsx',
     '.json',
     '.mjs',
     '.js',
     '.jsx',
     '.vue',
     '.json',
     '.wasm' ]
}
}

Having files names only differ by their extensions is not a good practice overall.

You have 2 ways of fixing this:

Specify the extension in your import: import Hello from '@/path/Hello/Hello.vue'
Change the name of your translation files from Hello.json to lang.json or lg.json

elevatebart on 16 Jun 2019

🎉1 👍1

All 4 comments

Hey @dhruvkb

I checked out your repo and will debug this afternoon,
I hope to find a solution soon.

elevatebart on 15 Jun 2019

👍1

I found the issue and has some to do with styleguidist and some to do with cc-vocabulary.

// this is how you import the Hello Component
import Hello from '@/path/Hello/Hello'

You intend this instruction to import Hello.vue. Instead it loads Hello.json. This is because the vue-cli has a webpack config that resolves json and vue components all the same.

const webpackConfig = {
resolve: { extensions:
   [ '.js',
     '.jsx',
     '.ts',
     '.tsx',
     '.json',
     '.mjs',
     '.js',
     '.jsx',
     '.vue',
     '.json',
     '.wasm' ]
}
}

Having files names only differ by their extensions is not a good practice overall.

You have 2 ways of fixing this:

Specify the extension in your import: import Hello from '@/path/Hello/Hello.vue'
Change the name of your translation files from Hello.json to lang.json or lg.json

elevatebart on 16 Jun 2019

🎉1 👍1

I even made a quick PR to illustrate my favourite fix.

elevatebart on 16 Jun 2019

Thank you so much!

dhruvkb on 16 Jun 2019

Was this page helpful?

0 / 5 - 0 ratings