Vuejs not reading property from mixins and export NOT FOUND error.

Question

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.com
cd foo.com
npm install
npm run dev

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

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

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

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

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

export default routes

So far, I have no issue with above code, the problem comes 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 'components' 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 complaining 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/components/Profiles.vue
6:11-15 "export 'profiles' was not found in '../../profiles'

It is complaining 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.

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
– PixelMaster, Commented Aug 25, 2017 at 12:02
import { profiles } from '../../profiles' is incorrect since you aren't exporting an object with property named profiles. Try import profiles from '../../profiles' — thanksd
– thanksd, Commented Aug 25, 2017 at 18:24
agreed with @thanksd !!! also if you just want to use the mixin locally then don't use (Vue.mixin)[vuejs.org/v2/guide/mixins.html#Global-Mixin] as it creates a global mixin that may conflict with other components and lead to unintentional behaviour — riyaz-ali
– riyaz-ali, Commented Aug 26, 2017 at 4:56

Mario Lamacchia · Accepted Answer · 2017-08-26 22:32:34Z

16

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'

answered Aug 26, 2017 at 22:32

Mario Lamacchia

1,7231 gold badge13 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Vuejs not reading property from mixins and export NOT FOUND error.

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related