TypeError: Cannot read property ‘xxx’ of undefined — Перевод и решение
При отладке своего кода (обычно на JavaScript) программист может столкнуться с системным сообщением об ошибке « TypeError: Cannot read property ‘xxx’ of undefined ». Вместо значения ХХХ указана какая-либо объявленная переменная или свойство объекта, значение которых по различным причинам не задано разработчиком. Ниже разберём, каков перевод данного сообщения, и каково может быть решение возникшей проблемы.
Почему возникает ошибка
В переводе данное сообщение выглядит как «Ошибка типа: Не удаётся прочитать неопределённое свойство ХХХ». Поскольку в некоторых языках программирования (в частности, «JavaScript») есть возможность получения доступа к неинициализированным значениям, то это может вызывать появление рассматриваемой мной ошибки.
Что до причин ошибки undefined, то она обычно возникает при отладке какого-либо программного кода, и может быть вызвана следующими факторами:
Давайте разберёмся, как исправить данную ошибку при написании вашего кода.
Присвойте начальное значение переменной
Наиболее очевидным способом исправить ошибку «TypeError: Cannot read property ‘xxx’ of undefined» является присвоение переменной начального значения. Чем меньше такая переменная пребывает в неинициализированном состоянии – тем будет лучше. В идеале лучше сразу же присвоить значение «Variable» = «начальное значение» (‘initial’), хотя далеко не всегда специфика вашего кода может предполагать указанный вариант.
Улучшите связность вашего кода
Термин «связность» в нашем контексте характеризует уровень взаимосвязанности элементов разрабатываемого вами модуля (пространства имён, метода, класса, блока кода). Как известно, существуют два типа связности, а именно сильная и слабая связность. Использование сильной связности предполагает фокусировку элементов модуля лишь на одной задаче. Потому для извлечения выгоды из сильной связности, необходимо держать используемые переменные поближе к блоку кода, в работе которого они используются.
К примеру, вместо блока кода:
будет оптимальнее переместить переменные поближе к месту их применения:
Улучшение связности позволит избежать появление ошибки «Cannot read property ‘xxx’ of undefined» при отладке вашего кода.
Проверьте наличие свойства
В языке Javascript имеются ряд инструментов, позволяющих определить, имеет ли необходимый нам объект какое-либо свойство:
В этом и схожих случаях рекомендуется использовать оператор in, который обладает простым и удобным синтаксисом. Наличие оператора in демонстрирует желание проверить, имеет ли объект нужное свойство без обращения к фактическому значению данного свойства.
Деструктурируйте доступ к свойствам нужного объекта
Деструктурирование нужного объекта позволяет непосредственно извлекать значения свойства объекта в переменные или, если такое свойство не существует, устанавливать значение по дефаулту. Такой вариант позволяет исключить прямой контакт с undefined.
Извлечение свойств теперь выглядит примерно так:
Деструктурирование хорошо, когда можно указать значение по умолчанию, и это значение будет возвращено при попытке доступа к отсутствующему свойству. В конечном счёте, благодаря деструктурированию вы сможете избежать появления undefined и всех сопутствующих проблем.
Заключение
В нашей статье мы разобрали, почему появляется ошибка «TypeError: Cannot read property ‘xxx’ of undefined», как она переводится и как от неё можно избавиться. Во избежание возникновения данной ошибки присвойте начальное значение соответствующей переменной. Это позволит избежать появления рассмотренной выше дисфункции при отладке вашего кода.
7 советов по обработке undefined в JavaScript
7 советов по обработке undefined в JavaScript
Примечание Вы читаете улучшенную версию некогда выпущенной нами статьи.
Что такое undefined в JavaScript
undefined является специальным значением. Согласно спецификации ECMAScript, undefined в JavaScript можно получить при доступе к неинициализированным переменным, несуществующим свойствам объекта, несуществующим элементам массива, etc. Пример:
Как видим, undefined выводится при попытке доступа к:
Оператор typeof возвращает строку undefined для неопределённого значения:
Оператор typeof отлично подходит для проверки значения undefined в JavaScript:
Как избежать undefined в JavaScript
Неинициализированная переменная
Ниже приведены способы решения проблемы.
1. const и let вместо var
Объявленные таким образом объекты и переменные находятся в области видимости, ограниченной текущим блоком кода, и находятся во временной мёртвой зоне до момента присвоения им значения.
При использовании неизменяемых данных (констант) рекомендуется инициализировать их как const :
Константа не подвергается неинициализированному состоянию, и получить значение undefined в этом случае невозможно.
14–30 сентября, Онлайн, Беcплатно
Если вам нужно менять значение переменной, то обозначьте её как let и также присваивайте ей начальное значение:
Проблема var заключается в поднятии переменных: где бы ни находилось объявление, это равнозначно тому, что переменную объявили в начале кода.
В этом случае переменная myVariable содержит undefined до получения значения:
2. Усиление связности
Связность характеризует степень взаимосвязи элементов модуля (пространства имён, класса, метода, блока кода). Сильная связность предпочтительнее, поскольку предполагает, что элементы модуля должны фокусироваться исключительно на одной задаче. Это поможет модулю быть:
Блок кода сам по себе может считаться небольшим модулем. Чтобы извлечь выгоду из преимуществ сильной связности, нужно держать переменные как можно ближе к блоку кода, который их использует.
Вот классический пример того, как не надо делать:
Доступ к несуществующему свойству
Сам по себе доступ к не вызовет ошибку, а вот при попытке получить значение из несуществующего свойства выведется ошибка:
Проблема в особенностях JavaScript: свойство может быть установлено или отсутствовать. Хорошее решение — установка правил, которые обязывают задать свойствам значения.
Но не всегда возможно контролировать объекты, с которыми приходится работать. Такие объекты могут иметь разный набор свойств в различных сценариях, и каждый из них нужно обрабатывать вручную.
0 и false — ложные значения, потому что if (toAppend.first)<> и if (toAppend.last)<> фактически сравниваются с ложными значениями, и эти элементы не вставляются в массив. Функция возвращает исходный массив [10] без изменений.
1. Наличие свойства
К счастью, JavaScript предлагает множество способов определить, имеет ли объект определённое свойство:
2. Деструктуризация доступа к свойствам объекта
Деструктуризация объекта позволяет устанавливать значение по умолчанию, если свойство не существует: удобно для исключения прямого контакта с undefined :
Применяя преимущества деструктуризации объекта, реализуем quote() :
Деструктурирующее присваивание гарантирует, что используется пустой объект, если второй аргумент не указан вообще. В результате вы избегаете возникновения значения undefined в JavaScript.
3. Свойство по умолчанию
Есть простой способ установить значения по умолчанию для свойств объекта, и имя ему Spread syntax:
Параметры функции
Функция, имеющая определённые параметры, должна вызываться с одинаковым количеством аргументов. В таком случае параметры получают ожидаемые значения:
Лучшим подходом является использование параметров по умолчанию из ES2015:
Возвращаемое значение функции
То же происходит, если return присутствует, но без какого-либо выражения рядом:
Теперь вызов функции выведет нужное значение.
Оператор void
Оператор void выполняет выражение и возвращает undefined вне зависимости от результата:
Одним из вариантов использования оператора void является переопределение результата выполнения выражения и возврат undefined в случае возникновения неожиданных результатов выполнения функции.
Значение undefined в массивах
Вы получаете undefined при попытке доступа к элементу массива с индексом вне пределов массива.
В JavaScript вы можете столкнуться с так называемыми разрежёнными массивами. Эти массивы имеют пробелы, то есть на некоторых индексах не определены никакие элементы. Когда делаем попытку получить доступ к пустому значению в разрежённом массиве, на выходе получаем undefined :
Отличие null и undefined в JavaScript
Основное отличие в том, что undefined представляет значение переменной, которая ещё не была инициализирована, а null — намеренное отсутствие объекта.
Допустим, переменная number определена, но ей не назначено начальное значение:
То же самое произойдёт при попытке доступа к несуществующему свойству объекта:
Или переменная должна ожидать возвращение объекта функции, но по какой-то причине создание объекта невозможно. В этом случае null является значимым индикатором недостающего объекта. Например, clone() — это функция, которая клонирует простой объект JavaScript. Ожидается, что функция вернёт объект:
Строгий оператор равенства === также отличает undefined от null :
Вам также может быть интересна наша статья про обработку ошибок в JavaScript.
Заключение
Стратегия борьбы с undefined в JavaScript:
Как победить ошибку «cannot read property of undefined»?
Handle polling update error: TypeError: Cannot read property ‘user_id’ of undefined
как бы да, но всеравно ХЗ что за модуль он использует для доступа к vk api. Возможно, что используемый модуль вполне умеет и user_id обрабатывать. Проблема в том, что модуль не указан, посмотреть его доку не представляется возможным. Я например не пишу ботов под вк, и не в курсе, сколько там различных либ, для доступа к API понаписали, а лезть и целенаправленно разбираться с этим вопросом мне лень)
Но все равно там вроде бы деструктуризация неправильная, для любой версии апи
почему не правильная? разве так нельзя?)))
ХЗ что за модуль он использует для доступа к vk api
Kovalsky, не поленился, глянул последнюю версию API. Действительно, метод вернет массив объектов со следующими полями:
id integer идентификатор пользователя.
first_name string имя.
last_name string фамилия.
deactivated string поле возвращается, если страница пользователя удалена или заблокирована, содержит значение deleted или banned. В этом случае опциональные поля не возвращаются.
is_closed boolean скрыт ли профиль пользователя настройками приватности.
can_access_closed boolean может ли текущий пользователь видеть профиль при is_closed = 1 (например, он есть в друзьях).
и никаких user_id в нем нет. Но все же вернет именно массив, а значит если пользователь существует, то user_info не будет undefined. То есть текущая ошибка с де структуризацией не связанна (если конечно вы не имеете ввиду то что метод вместо массива может вернуть код ошибки а у автора их обработка никак не предусмотрена), как не связанна и с тем что user_id в объекте не существует (эту ошибку он получит уже после того как решит проблему с текущей:)))
npm ERR! Cannot read property ‘match’ of undefined #20954
Comments
doberkofler commented Jun 11, 2018 •
I’m opening this issue because:
What’s going wrong?
D:\MyDev\ljs_app\trunk\periscope\build>npm i
npm ERR! Cannot read property ‘match’ of undefined
When removing the package-lock.json file the installation works again.
How can the CLI team reproduce the problem?
Run npm i with the attached files
supporting information:
The text was updated successfully, but these errors were encountered:
We are unable to convert the task to an issue at this time. Please try again.
The issue was successfully created but we are unable to update the comment at this time.
doberkofler commented Jun 11, 2018
The error actually happens each time I use npm i now!
legodude17 commented Jun 11, 2018
doberkofler commented Jun 11, 2018
@legodude17 I’m not sure I understand on what to do? I understand that by removing the lock file, I can use npm i once again. But then it is broken again.
knownasilya commented Jun 11, 2018 •
Yeah also seeing this issue. Deleting the lock file every time is not a solution for sure 😸
Here’s my stack trace:
iarna commented Jun 13, 2018
Deleting the lock-file is not what the instruction in the community link was. The instruction is:
Delete the lock-file AND the node_modules:
Can you all retry with that?
knownasilya commented Jun 14, 2018
I tried both, the lockfile only and lockfile with node_modules. Both worked for me.
doberkofler commented Jun 14, 2018
@iarna Removing the lock file AND the node_modules folder worked for me. Only removing the lock file only worked once.
homerjam commented Jun 20, 2018 •
Can anyone help with a workaround for global modules? Installed via homebrew and can’t locate my package-lock.json anywhere!
chemzqm commented Jun 25, 2018
Get this error from time to time, should I switch to yarn?
akougblenou commented Jul 6, 2018
Still happening to me, it seemed that it was related to babel and the beta packages.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
«Cannot read property ‘match’ of undefined» during Npm install
I encountered error during building Jenkins
Jenkins Log
Task :web:npmInstall FAILED npm ERR! Cannot read property ‘match’ of undefined
npm ERR! A complete log of this run can be found in: npm ERR!
/var/lib/jenkins/.npm/_logs/2019-10-16T01_11_20_594Z-debug.log
FAILURE: Build failed with an exception.
Process ‘command ‘/var/lib/jenkins/workspace/hds_v2_docker/web/.gradle/npm/npm-v6.11.2/bin/npm» finished with non-zero exit value 1
Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0. Use ‘—warning-mode all’ to show the individual deprecation warnings. See https://docs.gradle.org/5.0/userguide/command_line_interface.html#sec:command_line_warnings
BUILD FAILED in 33s
/var/lib/jenkins/.npm/_logs/2019-10-16T01_11_20_594Z-debug.log
5 Answers 5
Try removing your package-lock.json to see if that helps.
I had the same error when running npm install in my repo. I don’t use Jenkins, but I found a generic approach to debugging (and ultimately resolving) this issue in NPM.
Note that in my case, the underlying issue (of the missing package.json file) appears to have been caused by me accidentally running npm install from the parent project (which uses my firebase-feedback library), while I had that library «npm linked».
Similar issues relating to npm link have happened before, but I hoped NPM would have patched these sorts of issues by now. Apparently not; though version 7 of NPM has been stated as going to have a rewrite in that area, so hopefully that will solve it long term.
You have to remove project Package-lock.json file. then try to install what you want.
The error may vary on what npm internals file it can be thrown! (And i wonder for all the possible reasons)! And it should be a bug!
(in my last case: it was on [_canPlaceDep] method of the file build-ideal-tree.js of npm!
If none of the common methods works! And that you are using nodejs v15+ and one of latest npm version! Go to the last part! The problem that i call the nodejs VERSIONS HELL! (NOTE: after reflection! For npm it may not be a version HELL! READ TO KNOW)
How to try to solve
Removing node_modules
(NOTICE: that may still not work)
You can try to remove package.lock too!
Clearing the cache
You can check my answer here (that explain it well): https://stackoverflow.com/a/52249619/7668448
Removing package.lock (which is not adviced)
Why not advised
From @DanielIM comment
No, it should not. This is «the recommended workaround» but is incredibly broken in practice. Having a locked dependency in package.json in no way ensures that dependency’s dependencies will remain consistent, so removing the package-lock.json file, npm installing, and generating a newlock file *will allow those sub-dependencies to change, which often completely breaks any future building. Using an existing lock file is often the only way to maintain builds (that is the POINT of the file, after all) so removing it completely goes against the reason for its existence.
Reinstalling nodejs or NPM
A problem can happen at npm level! Trying to reinstall can be a nice way!
To test quickly in place of reinstalling! Using NVM (nodejs version manager) and switching to another version is fast and interesting! Because we can also test for VERSION HELL PROBLEM!
If it works after switch! Then either it’s a problem with npm and a reinstallation may fix it! Or it’s a version Hell problem (a bug)!
How to reinstall fast! Again use nvm!
You can just install another version and use it! (v14 for example)
Check the VERSION HELL PROBLEM And how to use nvm to switch between versions!
The uncommon or new! THE VERSIONS HELL
In this year! I encountered many nodejs VERSIONS HELL problems! (I like to call them that) (because i gave them a name! The skies are blessing me with more) (irony)
To list them quickly:
Fix Our problem ( Cannot read property ‘matches’ of undefined )
If you are using node v15! Try with node v14 (npm v6.14.8)! That may be it! An npm bug! That’s a first thought can be! That what i thought at first!
Then reflecting a bit on it! It was like hey! When i change the version! I’m using another nodejs installation! Which can just not have the problem. A problem with npm structure or something and a re-installation may fix it (as mentioned above)!
I’m still uncapable to explain what did happen! But in short! Using NVM! To try with another version! Is a good way to go about it! You can reinstall quickly the current version too!
Big Take down (for the VERSION HELL)
Starting from nodejs v14! And v15! Or just generally! It’s nice to be skeptical about the versions! More of a reason when it doesn’t make sense! And that’s about all the problems not just npm! There is so many VERSIONS HELL problems! I encountred 2 up to now! Being alerted to the VERSIONS HELL can save you a lot of time!
How to test fast and also switch nodejs version quickly
To be fast at testing this and checking! Mostly for any internal error that will come! I’ll google it quickly! And try another version of nodejs or whatever in question (ex: typescript)! I can too debug (console.log) The internal file where the error was thrown! And try to figure out something!
For nodejs To do it quickly:
NVM to switch quickly nodejs versions (npm)
Use NVM (nvm is a version manager for node.js,)
Quick installation of version in NVM
Quick switch to another node version
(Check the doc for the details! And installation process)
For switching and testing some npm module version (ex: typescript)
If it’s a cli tool! you can install a precise version globaly
Once you verify and test you can switch back to whatever you like!
If it’s in a project! You can do the same (not globally)! use the @ syntax to precise the version!
Version specifier use SEMVER convention (https://semver.org/).
Last tip (use npx in your scripts)
It’s nice to set a version internal to the project! For example
In scripts i use npx:
When we use npx this way with a nodjes module cli tool! npx will check first if the module is available in the local node_modules! If found will use it (use global otherwise, or Download latest and run)!
So doing what i’m suggesting! Will make sure your project will run independently from whatever you have in global!
(Read more about npx if you don’t know the tool well)