I have been on this error for 3 days, not sure if this is a bug, but I installed vuejs from vuejs/vue-cli

Using the following instructions:

npm install -g vue-cli 
vue init webpack foo
cd foo
npm install
npm run dev

So far it works, now I created a directory structure like this inside src/

— src
   — assets
   — filters
   — config
   — ponents
       Profiles.vue
       Login.vue
   profiles.js
   routes.js
   main.js

So, in routes.js I have something like this.

// routes.js
import ProfilesView from './ponents/Profiles.vue'
import LoginView from './ponents/Login.vue'

const routes = [{
  path: '/profiles',
  ponent: ProfilesView 
},
{
  path: '/login',
  ponent: LogoutView
}]

export default routes

So far, I have no issue with above code, the problem es from these two below files either profiles.js or Profiles.vue

Here is profiles.js

const profiles = Vue.mixin({
  data: function () {
    return { profiles: [] }
  },
  methods: {
   fetchProfiles: function(){....},
   mounted: function(){ this.fetchProfiles() }
})

export default profiles

Here is Profiles.vue

<template lang="html">
  <div> {{ profiles }}<div>
</template>

<script>
  import { profiles } from '../../profiles'
  export default {
    mixins: [profiles],
    data () {
      return { profiles: [] }
    },
    mounted () {}
  }
</script>

<style lang="css">
</style>

With the above code, I get these errors.

profiles.js:1 Uncaught ReferenceError: Vue is not defined
    at Object.<anonymous> (profiles.js:1)
    at __webpack_require__ (bootstrap 1995fd0fa58cb1432d6f:659)
    at fn (bootstrap 1995fd0fa58cb1432d6f:85)
    at Object.defineProperty.value (app.js:55806)
    at __webpack_require__ (bootstrap 1995fd0fa58cb1432d6f:659)
    at fn (bootstrap 1995fd0fa58cb1432d6f:85)
    at Object.<anonymous> (Profiles.vue:7)
    at __webpack_require__ (bootstrap 1995fd0fa58cb1432d6f:659)
    at fn (bootstrap 1995fd0fa58cb1432d6f:85)
    at Object.__webpack_exports__.a (app.js:56033)

If I add import Vue from 'vue' to profiles.js the above error gets replaced with this one:

Uncaught TypeError: Cannot read property 'ponents' of undefined
    at checkComponents (vue.esm.js:1282)
    at mergeOptions (vue.esm.js:1363)
    at mergeOptions (vue.esm.js:1379)
    at Function.Vue.extend (vue.esm.js:4401)
    at Object.exports.createRecord (index.js:47)
    at Profiles.vue:26
    at Object.<anonymous> (Profiles.vue:30)
    at __webpack_require__ (bootstrap 625917526b6fc2d04149:659)
    at fn (bootstrap 625917526b6fc2d04149:85)
    at Object.__webpack_exports__.a (app.js:56036)

This is plaining about the mixins: [profiles], in profiles.js, I am thinking profiles prop is undefined, but that is not the case. For some reason Profiles.vue is not reading or reading the correct data from profiles.js because I also get this error always:

[HMR] bundle has 1 warnings
client.js:161 ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/ponents/Profiles.vue
6:11-15 "export 'profiles' was not found in '../../profiles'

It is plaining export default profiles isn't found in profiles.js even though it clearly does. I even tried using require, changing the paths ... everything. Nothing works.

I would appreciate any help with this.

I have been on this error for 3 days, not sure if this is a bug, but I installed vuejs from vuejs/vue-cli

Using the following instructions:

npm install -g vue-cli 
vue init webpack foo.
cd foo.
npm install
npm run dev

So far it works, now I created a directory structure like this inside src/

— src
   — assets
   — filters
   — config
   — ponents
       Profiles.vue
       Login.vue
   profiles.js
   routes.js
   main.js

So, in routes.js I have something like this.

// routes.js
import ProfilesView from './ponents/Profiles.vue'
import LoginView from './ponents/Login.vue'

const routes = [{
  path: '/profiles',
  ponent: ProfilesView 
},
{
  path: '/login',
  ponent: LogoutView
}]

export default routes

So far, I have no issue with above code, the problem es from these two below files either profiles.js or Profiles.vue

Here is profiles.js

const profiles = Vue.mixin({
  data: function () {
    return { profiles: [] }
  },
  methods: {
   fetchProfiles: function(){....},
   mounted: function(){ this.fetchProfiles() }
})

export default profiles

Here is Profiles.vue

<template lang="html">
  <div> {{ profiles }}<div>
</template>

<script>
  import { profiles } from '../../profiles'
  export default {
    mixins: [profiles],
    data () {
      return { profiles: [] }
    },
    mounted () {}
  }
</script>

<style lang="css">
</style>

With the above code, I get these errors.

profiles.js:1 Uncaught ReferenceError: Vue is not defined
    at Object.<anonymous> (profiles.js:1)
    at __webpack_require__ (bootstrap 1995fd0fa58cb1432d6f:659)
    at fn (bootstrap 1995fd0fa58cb1432d6f:85)
    at Object.defineProperty.value (app.js:55806)
    at __webpack_require__ (bootstrap 1995fd0fa58cb1432d6f:659)
    at fn (bootstrap 1995fd0fa58cb1432d6f:85)
    at Object.<anonymous> (Profiles.vue:7)
    at __webpack_require__ (bootstrap 1995fd0fa58cb1432d6f:659)
    at fn (bootstrap 1995fd0fa58cb1432d6f:85)
    at Object.__webpack_exports__.a (app.js:56033)

If I add import Vue from 'vue' to profiles.js the above error gets replaced with this one:

Uncaught TypeError: Cannot read property 'ponents' of undefined
    at checkComponents (vue.esm.js:1282)
    at mergeOptions (vue.esm.js:1363)
    at mergeOptions (vue.esm.js:1379)
    at Function.Vue.extend (vue.esm.js:4401)
    at Object.exports.createRecord (index.js:47)
    at Profiles.vue:26
    at Object.<anonymous> (Profiles.vue:30)
    at __webpack_require__ (bootstrap 625917526b6fc2d04149:659)
    at fn (bootstrap 625917526b6fc2d04149:85)
    at Object.__webpack_exports__.a (app.js:56036)

This is plaining about the mixins: [profiles], in profiles.js, I am thinking profiles prop is undefined, but that is not the case. For some reason Profiles.vue is not reading or reading the correct data from profiles.js because I also get this error always:

[HMR] bundle has 1 warnings
client.js:161 ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/ponents/Profiles.vue
6:11-15 "export 'profiles' was not found in '../../profiles'

It is plaining export default profiles isn't found in profiles.js even though it clearly does. I even tried using require, changing the paths ... everything. Nothing works.

I would appreciate any help with this.

• javascript
• webpack
• vue.js
• vuejs2
• babeljs

• can you provide a repository link? Seeing as you omitted parts of your code (which is generally good for readability purposes), it's hard to tell which specific parts of your code are being referred by the error messages. – PixelMaster Commented Aug 25, 2017 at 12:02
• 2 import { profiles } from '../../profiles' is incorrect since you aren't exporting an object with property named profiles. Try import profiles from '../../profiles' – thanksd Commented Aug 25, 2017 at 18:24
• 1 agreed with @thanksd !!! also if you just want to use the mixin locally then don't use (Vue.mixin)[vuejs/v2/guide/mixins.html#Global-Mixin] as it creates a global mixin that may conflict with other ponents and lead to unintentional behaviour – riyaz-ali Commented Aug 26, 2017 at 4:56

1 Answer 1

You are importing profiles.js in the wrong way:

import { profiles } from '../../profiles'

Since you are using export default, it should be

import profiles from '../../profiles'