Help: how to solve this problem about vuepress build error

[1Crazy]

I created a file，this name （VueParticles.vue），this file in the components folder。 Content is as follows：

<template>
    <vue-particles
        color="#ff323d"
        :particleOpacity="0.6"
        :particlesNumber="120"
        shapeType="star"
        :particleSize="4"
        linesColor="#ff323d"
        :linesWidth="0.8"
        :lineLinked="false"
        :lineOpacity="1"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      </vue-particles>
</template>

<script>
import Vue from 'vue';
import vueparticles from 'vue-particles';

Vue.use(vueparticles)
export default {
  components: {
    vueparticles
  },
}
</script>

<style>
#particles-js{
  position: fixed;
  width: 100%;
  height: 100%;
  /* width: 100%; */

  left: 0;
  right: 0;
  /* bottom: 0; */
  top: 0;
  z-index: -1;

}
</style>

use vuepress dev Accessing local localhost:8080 is normal， But use vuepress build, cmd error！！！！！

Rendering page: / FAIL  Error rendering /:
Error: render function or template not defined in component: VueParticles
    at normalizeRender (C:\Users\Administrator\AppData\Roaming\npm\node_modules\vuepress\node_modules\vue-server-renderer\build.js:7407:13)
    at renderComponentInner (C:\Users\Administrator\AppData\Roaming\npm\node_modules\vuepress\node_modules\vue-server-renderer\build.js:7531:3)
    at renderComponent (C:\Users\Administrator\AppData\Roaming\npm\node_modules\vuepress\node_modules\vue-server-renderer\build.js:7502:5)
    at resolve (C:\Users\Administrator\AppData\Roaming\npm\node_modules\vuepress\node_modules\vue-server-renderer\build.js:7563:9)

Help: how to solve this problem！！！！

[dcastil]

You have to use PascalCase to name your component so it is recognised properly. Just rename all occurrences of vueparticles to VueParticles, then you can use it as <VueParticles> or <vue-particles> in the Vue template.

You can read more about that in the Vue documentation.

[1Crazy]

You have to use PascalCase to name your component so it is recognised properly. Just rename all occurrences of vueparticles to VueParticles, then you can use it as <VueParticles> or <vue-particles> in the Vue template.

You can read more about that in the Vue documentation.

This did not solve the problem, Vuepress dev is local access normal, no error, but vuepress build error when generating static files. I am using the default theme of vuepress。

I use PascalCase to name VueParticles, vuepress build still reports an error, the following is my content, the following is an error。

<template>
    <vue-particles
        color="#ff323d"
        :particleOpacity="0.6"
        :particlesNumber="120"
        shapeType="star"
        :particleSize="4"
        linesColor="#ff323d"
        :linesWidth="0.8"
        :lineLinked="false"
        :lineOpacity="1"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      </vue-particles>
</template>

<script>
import Vue from 'vue'
import VueParticles from 'vue-particles'
Vue.use(VueParticles)

export default {

}
</script>

<style>
#particles-js{
  position: fixed;
  width: 100%;
  height: 100%;
  /* width: 100%; */

  left: 0;
  right: 0;
  /* bottom: 0; */
  top: 0;
  z-index: -1;

}
</style>

the following is error

Rendering page: / FAIL  Error rendering /:
Error: render function or template not defined in component: VueParticles
    at normalizeRender (C:\Users\Administrator\AppData\Roaming\npm\node_modules\vuepress\node_modules\vue-server-renderer\build.js:7407:13)
    at renderComponentInner (C:\Users\Administrator\AppData\Roaming\npm\node_modules\vuepress\node_modules\vue-server-renderer\build.js:7531:3)
    at renderComponent (C:\Users\Administrator\AppData\Roaming\npm\node_modules\vuepress\node_modules\vue-server-renderer\build.js:7502:5)
    at resolve (C:\Users\Administrator\AppData\Roaming\npm\node_modules\vuepress\node_modules\vue-server-renderer\build.js:7563:9)

When I use vue, I will put it in the entry file like this component, but I don't know where the entry file is in vuepress. I can provide all my files, I don't know where this bug appears.

[dcastil]

Try to use

export default {
  components: { VueParticles }
}

instead of

Vue.use(VueParticles)

Calling Vue.use() only makes sense if you didn't instantiate the root Vue instance so far.

[1Crazy]

Still not working，This time, even vuepress dev local browser will report an error, the error message is as follows

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <VueParticles>
       <VueParticles1> at .vuepress/components/VueParticles1.vue
         <VF3bf735205d73> at README.md
           <Home> at C:/Users/Administrator/AppData/Roaming/npm/node_modules/vuepress/lib/default-theme/Home.vue
             <Layout> at C:/Users/Administrator/AppData/Roaming/npm/node_modules/vuepress/lib/default-theme/Layout.vue
               <Layout> at node_modules/vuepress-theme-vue/Layout.vue
                 <Root>

Below is the code in my file:

<template>
    <vue-particles
        color="#ff323d"
        :particleOpacity="0.6"
        :particlesNumber="120"
        shapeType="star"
        :particleSize="4"
        linesColor="#ff323d"
        :linesWidth="0.8"
        :lineLinked="false"
        :lineOpacity="1"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      </vue-particles>
</template>

<script>
import Vue from 'vue'
import VueParticles from 'vue-particles'
// Vue.use(VueParticles)
console.log(VueParticles)
export default {
  components: { 
    VueParticles 
  }
}
</script>

<style>
#particles-js{
  position: fixed;
  width: 100%;
  height: 100%;
  /* width: 100%; */

  left: 0;
  right: 0;
  /* bottom: 0; */
  top: 0;
  z-index: -1;

}
</style>

Will it be a problem with this vue-particles package?

Or where is the operation wrong? I didn't find the entry file for vuepress. Where is his entry file?

[ulivz]

Please don't paste code at issue, to report an issue that only happens in the scene you are in, the best and direct way is to provide a reproduction repo (e.g. vuepress-issue-example), otherwise I don't know where you are going wrong.

[1Crazy]

Ok, thanks, my problem has been solved. I wanted to find the entry file for the default theme of vuepress. I want to use vue-particles, but the vuepress build has been wrong before, now the problem has been solved.

[biggabba]

provide please how you solved the issue

[shigma]

I'm faced with the same problem. How can I solve it?

[ulivz]

@Shigma you should create an issue with a valid repro so that we can help you.

[Pearyman]

the same problem. How can I solve it?

[1Crazy]

What problem have you encountered?How do you use it?Are you looking for an entry file?

[1Crazy]

@Pearyman If you are looking for an entry file，You can use the 1.x version of Vuepress documentation.

[Pearyman]

@1Crazy https://github.com/vuejs/vuepress/issues/1328 help me with a look

[1Crazy]

@Pearyman Ok，What is this "window", is it a component?You can clearly describe the problem and send a complete picture of the picture of the error program.