Module not found: Error: Can't resolve './Collapse' in ~/vue-bulma-collapse/src/index.js

[FoxMaSk]

Hi,
After I install this component I have the following error

ERROR in ./~/vue-bulma-collapse/src/index.js
Module not found: Error: Can't resolve './Collapse' in '...../node_modules/vue-bulma-collapse/src'
 @ ./~/vue-bulma-collapse/src/index.js 1:19-40
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js

[Pan Yue]

Can you post your code please? Need repo

[Oreofeoluwapo Ralph Olutola]

I am also getting the same error

      throw er; // Unhandled 'error' event
      ^

Error: Cannot find module './Collapse' from '/home/andlpc007/Desktop/vuecollapsible/vuecollapsible-test/node_modules/vue-bulma-collapse/src'
    at /home/andlpc007/Desktop/vuecollapsible/vuecollapsible-test/node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:21
    at load (/home/andlpc007/Desktop/vuecollapsible/vuecollapsible-test/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
    at onex (/home/andlpc007/Desktop/vuecollapsible/vuecollapsible-test/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
    at /home/andlpc007/Desktop/vuecollapsible/vuecollapsible-test/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:123:15)

this is my code

import Vue from 'vue';
import { Collapse, Item } from 'vue-bulma-collapse'

new Vue({
  el: '#app',
  components: {
    collapsible: Collapse,
    collapsibleItem: Item,
  }
});

[Pan Yue]

Man, components here are vue file. Means you need vue-loader to convert them. So it won't work with new Vue directly...

[FoxMaSk]

Personnaly I did:

vue init webpack-simple doe2
cd doe2
npm install

create Toto.vue from the example code from your README.md file and add it to App.vue then this gives

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1></h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
import Toto from './Toto.vue'

export default {
  name: 'app',
  components: {
    Toto
  }
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

then

npm install vue-bulma-collapse bulma --save-dev 
node_modules/.bin/webpack

and the errors:

ERROR in ./~/vue-bulma-collapse/src/index.js
Module not found: Error: Can't resolve './Collapse' in '/home/foxmask/DjangoVirtualEnv/test/doe2/node_modules/vue-bulma-collapse/src'
 @ ./~/vue-bulma-collapse/src/index.js 1:19-40
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/Toto.vue
 @ ./src/Toto.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js

ERROR in ./~/vue-bulma-collapse/src/index.js
Module not found: Error: Can't resolve './Item' in '/home/foxmask/DjangoVirtualEnv/test/doe2/node_modules/vue-bulma-collapse/src'
 @ ./~/vue-bulma-collapse/src/index.js 2:15-32
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/Toto.vue
 @ ./src/Toto.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js