Ошибка cannot read properties of undefined reading call

I have a preexisting form which I’m trying to add jquery validation to containing :

<form id="form" method="POST" action="/title/">
    {% csrf_token %}
<input type="hidden" name="id" value="6">
<input type="hidden" name="custom_checkbox_Electronic_Signature_man" value="1">
                            <p> <span class="style9">First Name </span>
                              <input type="text" name="first_name" value="" size="20" class="style7"><span class="style9">
                            Last Name </span>
                              <input type="text" name="last_name" value="" size="20" class="style7"><span class="style9">

Using the jquery validator plugin, I have added:

$('form').validate({
    rules: {
        first_name: {
            minlen: 3,
            maxlength: 15,
            required: true
        },
        last_name: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        email: {
          required: true,
          email: true
        },
         phone1: {
             required: true,
             phoneUS: true
          },
        phone2: {
             required: true,
             phoneUS: true
          },
            street: {
            required: true
          },
              city: {
            required: true
          },
              state: {
            required: true
          },
              zip: {
            zipcodeUS: true
          }

    },
    highlight: function(element) {
        $(element).closest('.style9').addClass('.style13');
        //$(element).addClass('.style13');
    },
    unhighlight: function(element) {
        $(element).closest('.style9').removeClass('.style13');
        //$(element).removeClass('.style13');
    },
    errorElement: 'span',
    errorClass: 'style13',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

I’m getting the error listed above . What am I doing wrong?

При отладке своего кода (обычно на JavaScript) программист может столкнуться с системным сообщением об ошибке «TypeError: Cannot read property ‘xxx’ of undefined». Вместо значения ХХХ указана какая-либо объявленная переменная или свойство объекта, значение которых по различным причинам не задано разработчиком. Ниже разберём, каков перевод данного сообщения, и каково может быть решение возникшей проблемы.

Почему возникает ошибка

В переводе данное сообщение выглядит как «Ошибка типа: Не удаётся прочитать неопределённое свойство ХХХ». Поскольку в некоторых языках программирования (в частности, «JavaScript») есть возможность получения доступа к неинициализированным значениям, то это может вызывать появление рассматриваемой мной ошибки.

Что до причин ошибки undefined, то она обычно возникает при отладке какого-либо программного кода, и может быть вызвана следующими факторами:

• Использующиеся в программном коде переменная не была инициализирована (переменной не присвоено значение);
• Была осуществлена попытка доступа к отсутствующему свойству объекта;
• Была попытка получить доступ к отсутствующему элементу массива.

Давайте разберёмся, как исправить данную ошибку при написании вашего кода.

Читайте также: Failed to execute ‘replaceChild’ on ‘Node’  на JavaScript – как исправить.

Присвойте начальное значение переменной

Наиболее очевидным способом исправить ошибку «TypeError: Cannot read property ‘xxx’ of undefined» является присвоение переменной начального значения. Чем меньше такая переменная пребывает в неинициализированном состоянии – тем будет лучше. В идеале лучше сразу же присвоить значение «Variable» = «начальное значение» (‘initial’), хотя далеко не всегда специфика вашего кода может предполагать указанный вариант.

Улучшите связность вашего кода

Термин «связность» в нашем контексте характеризует уровень взаимосвязанности элементов разрабатываемого вами модуля (пространства имён, метода, класса, блока кода). Как известно, существуют два типа связности, а именно сильная и слабая связность. Использование сильной связности предполагает фокусировку элементов модуля лишь на одной задаче. Потому для извлечения выгоды из сильной связности, необходимо держать используемые переменные поближе к блоку кода, в работе которого они используются.

К примеру, вместо блока кода:

будет оптимальнее переместить переменные поближе к месту их применения:

Улучшение связности позволит избежать появление ошибки «Cannot read property ‘xxx’ of undefined» при отладке вашего кода.

Проверьте наличие свойства

В языке Javascript имеются ряд инструментов, позволяющих определить, имеет ли необходимый нам объект какое-либо свойство:

В частности, это:

• typeof obj.prop !== ‘undefined’ — данный инструмент позволяет проверить тип значения свойства;
• obj.prop !== undefined — этот инструмент позволяет сравнить объект непосредственно с undefined;
• ‘prop’ in obj позволяет проверить объект на наличие его собственного или полученного свойства;
• И obj.hasOwnProperty(‘prop’) позволяет проверить объект на наличие его собственного свойства.

В этом и схожих случаях рекомендуется использовать оператор in, который обладает простым и удобным синтаксисом. Наличие оператора in демонстрирует желание проверить, имеет ли объект нужное свойство без обращения к фактическому значению данного свойства.

Деструктурируйте доступ к свойствам нужного объекта

Деструктурирование нужного объекта позволяет непосредственно извлекать значения свойства объекта в переменные или, если такое свойство не существует, устанавливать значение по дефаулту. Такой вариант позволяет исключить прямой контакт с undefined.

Извлечение свойств теперь выглядит примерно так:

Деструктурирование хорошо, когда можно указать значение по умолчанию, и это значение будет возвращено при попытке доступа к отсутствующему свойству. В конечном счёте, благодаря деструктурированию вы сможете избежать появления undefined и всех сопутствующих проблем.

Это интересно: что означает «JavaScript error: Mutations are not initialized.

Заключение

В нашей статье мы разобрали, почему появляется ошибка «TypeError: Cannot read property ‘xxx’ of undefined», как она переводится и как от неё можно избавиться. Во избежание возникновения данной ошибки присвойте начальное значение соответствующей переменной. Это позволит избежать появления рассмотренной выше дисфункции при отладке вашего кода.

Допустим, вы делаете страницу с формой и полем ввода:

<form name="myform">
  <input name="myinput" value="10" />
</form>

Нужно, чтобы скрипт нашёл эту форму, достал из неё значение поля ввода и вывел его на экран. Вы пишете скрипт и оформляете его как отдельный файл, который подключаете в разделе head:

<script>
  var str = '';
  for(i=0; i < document.myform.elements.length; i++){
     str += document.myform.elements[i].name +
'=' + encodeURIComponent(document.myform.elements[i].value) +
(i == document.myform.elements.length -1 ? '' : '&');
}
  alert(str);
</script>

Этот скрипт должен быть правильным. При тестировании внутри консоли он делает именно то, что нужно. Но после запуска скрипт падает с ошибкой:

❌ Uncaught TypeError: Cannot read property

Это означает: «Вы пытаетесь прочитать у объекта какое-то свойство, но я не могу его найти, а значит, не могу и прочитать то, чего нет».

Странно, ведь вы уверены, что у этого объекта такое свойство точно есть, и вы сто раз так уже делали.

Всё так и одновременно не так.

Что делать с ошибкой Uncaught TypeError: Cannot read property

Эта ошибка чаще всего происходит, когда вы обращаетесь к свойствам объекта раньше, чем объект готов:

Наш случай — первый и самый распространённый: мы вызываем скрипт в разделе <head>, но форма у нас ещё не готова — она банально не загружена в документ, поэтому скрипт не может прочитать свойства несуществующей формы.

Чтобы избавиться от этой ошибки, нужно добавить в вызов скрипта атрибут defer — он заставит скрипт подождать, пока страница загрузится полностью, вместе с формой.

<script defer src="...">

Второй вариант — поместить вызов скрипта сразу после формы, тогда к моменту вызова всё окажется на своих местах и ошибки не будет. Или вообще в конце всего документа.

I can confirm this is still an issue.

I am using webpack 5.30 and vue 2.6.11

I am trying to implement lazy loading on our already existing vue app to reduce our bundle size. Here is how I am importing the component:

const ManageSupport = () => import(/* webpackChunkName: "view-support" */ 'components/helpdesk/view-support')

The chunk is created successfully, based on this webpack output: asset view-support.js 29.4 KiB [emitted] (name: view-support)

When trying to navigate to that route, I keep getting (consistently) the error
`[vue-router] Failed to resolve async component default: TypeError: Cannot read property ‘call’ of undefined

TypeError: Cannot read property ‘call’ of undefined
at webpack_require (main.js:26989)
at Function.fn (main.js:27159)`

A snippet from main.js where the error is thrown:

// Execute the module function
/******/ 		try {
/******/ 			var execOptions = { id: moduleId, module: module, factory: __webpack_modules__[moduleId], require: __webpack_require__ };
/******/ 			__webpack_require__.i.forEach(function(handler) { handler(execOptions); });
/******/ 			module = execOptions.module;
/******/ (error here)execOptions.factory.call(module.exports, module, module.exports, execOptions.require);
/******/ 		} catch(e) {
/******/ 			module.error = e;
/******/ 			throw e;
/******/ 		}

My webpack configuration:

const webpack = require('webpack');
const { VueLoaderPlugin } = require("vue-loader")
const TerserPlugin = require("terser-webpack-plugin")
const CompressionPlugin = require('compression-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
var FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')

const bundleOutputDir = './wwwroot/dist';

module.exports = (env) => {
    const isDevBuild = env.prod != 'true';
    console.log("Starting webpack " + (isDevBuild ? "Dev" : "Prod") + " Build (main.js)")
    return {
        mode: isDevBuild ? 'development' : 'production',
        target: isDevBuild ? false : ['web', 'es5'],
        entry: './ClientApp/boot-app.js',
        output: {
            path: path.resolve(__dirname, bundleOutputDir),
            filename: '[name].js',
            publicPath: '/dist/'
        },
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue',
                'components': path.resolve(__dirname, './ClientApp/components'),
                'views': path.resolve(__dirname, './ClientApp/views'),
                'utils': path.resolve(__dirname, './ClientApp/utils')
            },
            extensions: ["*", ".js", ".vue", ".json"]
        },
        module: {
            rules: [
                // Vue
                { test: /.vue$/, loader: "vue-loader", exclude: /node_modules/ },

                // CSS
                { test: /.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },

                {
                    test: /.m?js/,
                    resolve: {
                        fullySpecified: false
                    }
                },

                // JavaScript
                {
                    test: /.js$/, exclude: /node_modules/, loader: 'babel-loader',
                    exclude: file => (
                        /node_modules/.test(file) &&
                        !/.vue.js/.test(file)
                    )
                },

                { test: /.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ],
        },
        plugins: [

            new MiniCssExtractPlugin({ filename: "site.css" }),

            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: path.join(__dirname, 'wwwroot', 'dist', 'vendor-manifest.json')
            }),

            new VueLoaderPlugin(),

            new FriendlyErrorsWebpackPlugin(),

        ].concat(
            isDevBuild ? [

                // Dev-only dependencies

            ] : [

                    // Prod-only dependencies

                    new CompressionPlugin({
                        filename: '[path][base]',
                        test: /.(js|css|svg|json)$/,
                        deleteOriginalAssets: true
                    })

                ]),
        optimization: isDevBuild ? {} : {
            minimize: true,
            minimizer: [new TerserPlugin({
                test: /.js(?.*)?$/i,
            })]
        },
        cache: true
    }
}

My package.json

{
    "scripts": {
        "build": "cross-env webpack --progress --no-devtool --config webpack.config.js --env prod=true",
        "start": "NODE_OPTIONS=--max_old_space_size=4096 webpack serve --progress --hot --hot-only --config webpack.config.js --content-base 'wwwroot' --env prod=false",
        "vendor": "webpack --config webpack.config.vendor.js --env prod=false --progress --stats-error-details",
        "app": "cross-env NODE_OPTIONS=--max_old_space_size=4096 webpack --progress --config webpack.config.js --env prod=false",
        "help": "webpack --help"
    },
    "dependencies": {
        "@babel/plugin-transform-runtime": "^7.13.10",
        "@fortawesome/fontawesome-svg-core": "^1.2.28",
        "@fortawesome/free-brands-svg-icons": "^5.13.0",
        "@fortawesome/pro-light-svg-icons": "^5.13.0",
        "@fortawesome/pro-regular-svg-icons": "^5.13.0",
        "@fortawesome/pro-solid-svg-icons": "^5.13.0",
        "@fortawesome/vue-fontawesome": "^0.1.9",
        "@microsoft/signalr": "=3.1.6",
        "axios": "^0.21.1",
        "core-js": "^2.6.11",
        "epsg-index": "^1.0.0",
        "font-awesome": "^4.6.3",
        "lodash": "^4.17.19",
        "moment": "^2.24.0",
        "moment-mini": "^2.24.0",
        "vue": "^2.6.11",
        "vue-router": "^2.1.1",
        "vue-template-compiler": "^2.6.11",
        "vuex": "^2.1.1",
        "vuex-persistedstate": "^2.5.4",
        "vuex-router-sync": "^4.0.1"
    },
    "devDependencies": {
        "@babel/core": "^7.13.14",
        "@babel/plugin-proposal-class-properties": "^7.13.0",
        "@babel/preset-env": "^7.13.12",
        "babel-loader": "^8.2.2",
        "bootstrap": "^3.3.6",
        "compression-webpack-plugin": "^7.1.2",
        "cross-env": "^3.1.3",
        "css-loader": "^5.2.1",
        "event-source-polyfill": "^0.0.7",
        "friendly-errors-webpack-plugin": "^1.7.0",
        "file-loader": "^6.2.0",
        "html-webpack-plugin": "^5.3.1",
        "jquery": "^2.2.1",
        "lodash-webpack-plugin": "^0.11.5",
        "mini-css-extract-plugin": "^1.4.1",
        "optimize-css-assets-webpack-plugin": "^5.0.4",
        "postcss-loader": "^5.2.0",
        "postcss-preset-env": "^6.7.0",
        "scope-loader": "^1.0.3",
        "spectacle-docs": "^1.0.7",
        "style-loader": "^2.0.0",
        "url-loader": "^0.5.7",
        "vue-loader": "^15.9.6",
        "webpack": "^5.30.0",
        "webpack-cli": "^4.6.0",
        "webpack-dev-server": "^3.11.2",
        "webpack-hot-middleware": "^2.12.2"
    }
}