CODEWITHSUNDEEP
vue.jsnpm
EaBengaluru
EaBengaluru

Reputation: 71

Syntax Error: TypeError: Cannot read properties of undefined (reading 'spaces') npm run serve vue

Hi i'm facing somewhat a strange problem during $npm run serve

enter image description here

here is my page structure

<template>
  <div>
    ...
  </div>
</template>

<script>
export default {
   name: 'game',
   ...
}
</script>

<style lang="scss" scoped>
 $variable1:#fff;
 ....
</style>

My package.json looks something like this

"devDependencies":{
    "node-sass": "^6.0.0",
    "sass-loader": "^10.1.0",
    "vue-loader-v16": "npm:vue-loader@^16.1.1"
}

Upvotes: 0

Views: 2162

Answers (3)

trungkodi
trungkodi

Reputation: 1

I think you did not define the state in the right way

I suppose that somewhere you call spaces like this game.spaces with defining game: undefined. The right way to define the game state with a default value is an empty object like this:

<script>
export default {
   name: 'game',
   data(){
      game: {}
   }
}
</script>

Or You can use ?. Optional chaining to avoid this error like game?.spaces. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Upvotes: 0

user1272025
user1272025

Reputation: 21

Check your styles U should use

::v-deep() { a { color: red; }}

instead of

::v-deep { a { color: red; }}

more info https://github.com/vuejs/core/issues/4745

Upvotes: 0

Pixelprotagonist
Pixelprotagonist

Reputation: 11

Generally this kind of error happens when you try to access a property of an object that does not (yet) exist.

So I think somewhere in your code you try to access someObject.spaces but someObject is undefined. To avoid this, you can add a simple if-clause before your operation:

if(someObject){
  doSomething(someObject.spaces)
}

I think you'll have to fill in more code to identify exactly what happens, though.

Upvotes: 1

Related Questions