Vue: Uncaught TypeError: Cannot read property 'state' of undefined

Created on 19 Jul 2017  ·  6Comments  ·  Source: vuejs/vue

Version

2.4.1

Reproduction link

https://github.com/tiagofelipe/vue-store-bug

Steps to reproduce

In src/app/auth/services/auth.js i need to import the store "import store from '../../../store'", but an error occurred:

Uncaught TypeError: Cannot read property 'state' of undefined

Turns out I wasted a lot of time trying to understand the problem, and then I realized that one of the vuex modules was not being loaded, called auth.

After several tests, I discovered that, inside my import file of the store modules "src/app/store.js" the following problem occurred:

import {store as auth} from './auth' - always returns the error even though I changing the address to './auth/index.js'

Then I duplicated the file './auth/index.js' with a new name './auth/teste.js', keeping the code identical in both files, and changed the import to:

import {store as auth} from './auth/teste' - this made it work

Without understanding why this happens, I decided to report the problem.

If I remove the import store from file 'src/app/auth/services/auth.js', the application returns to normal operation, vuex also works normally and can even load the auth module.

What is expected?

Load vuex modules and application work

What is actually happening?

Uncaught TypeError: Cannot read property 'state' of undefined

Most helpful comment

@tiagofelipe hi. I had a same problem, but fixed it after a day of suffering.
You should include (I mean import) the store, from auth like this:

// it will import index.js file
import store from './auth'

Webpack will automatically understand what import and what not. And of course in your index.js in the last line of your perfect code, you should write:

export default store

and everything gonna be fine.
Hope it somehow helped you.

All 6 comments

Symptoms suggest recursive import, let me take a look to check what's going on.

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server, gitter or StackOverflow.


Sharing your whole repo is not a valid reproduction...

@posva I understand, I just opened this task because I thought it was an error report, due to the checks I made and the solution needed for the solution. As I am new to Vue, I decided to open this issue.

@nickmessing Did you even take a look? Actually there is a problem in the recursive import, but the solution that I had to do to work I still can not find explanations. The form that presents the error is a simple way to import the store inside some script, it should work normally. I still believe it to be a bug, now I do not know if it's the vue or the webpack, I'm still investigating.

errovue

errovue2

@tiagofelipe hi. I had a same problem, but fixed it after a day of suffering.
You should include (I mean import) the store, from auth like this:

// it will import index.js file
import store from './auth'

Webpack will automatically understand what import and what not. And of course in your index.js in the last line of your perfect code, you should write:

export default store

and everything gonna be fine.
Hope it somehow helped you.

同问

Was this page helpful?
0 / 5 - 0 ratings