Добавить поле поиска React на главную страницу блога ошибка - Невозможно прочитать свойства неопределенного (чтение 'jsx')

Содержание

Вопрос или проблема
Ответ или решение
Причины ошибки
Устранение ошибки
1. Проверьте путь импорта
2. Проверка экспорта
3. Проверка загрузки библиотек
4. Мыслим как разработчики
5. Проверьте home.php
Заключение

Вопрос или проблема

Я прошел несколько учебников онлайн в поисках добавления компонента react на свою страницу WP.

Я проверял это снова и снова на наличие ошибок, и я не могу понять, что я могу упустить, так как консоль выдает следующую ошибку, и простой элемент рендерится на странице.

Uncaught TypeError: Cannot read properties of undefined (reading 'jsx')

Из консоли

s(338).createRoot(document.querySelector("#react-search")).render((0,
            a.jsx)(o, {}))

Структура проекта

src/
-- index.js
-- scripts/
-- -- ReactSearch.js
functions.php
home.php

index.js

// Стили
import "../css/style.scss"

// Скрипты
import ReactSearch from "./scripts/ReactSearch"
import React from "react"
import ReactDOM from "react-dom/client"

const root = ReactDOM.createRoot(document.querySelector("#react-search"))
root.render(<ReactSearch />)

ReactSearch.js

import React from "react"

function ReactSearch() {

  return (
    <div className="card bg-secondary w-100 mb-3">
      <div className="card-header border-bottom py-3">
        Поиск по блогу
      </div>
      <div className="card-body">
        <form role="search">
          <div className="input-group">
            <span className="input-group-text bg-slate-400"><i className="bi bi-search"></i></span>
            <input className="form-control me-2" type="search" placeholder="Поиск" aria-label="Поиск"></input>
          </div>
        </form>
      </div>
      <div className="mt-0 pt-0 d-none">
        <ul className="list-group list-group-flush bg-secondary mb-3">
          <li className="list-group-item bg-secondary">Пример поста из поиска</li>
          <li className="list-group-item bg-secondary">Пример поста из поиска</li>
          <li className="list-group-item bg-secondary">Пример поста из поиска</li>
          <li className="list-group-item bg-secondary">Пример поста из поиска</li>
        </ul>
        <button className="btn btn-outline-danger ms-3 mb-3">Закрыть поиск</button>
      </div>
    </div>
  )
}

export default ReactSearch

home.php

// Показываю только div, который я использую в качестве корня для ReactSearch
<div id="react-search"></div>

Я пробовал так много изменений в структуре и импортах на основе онлайн-учебников, и теперь это становится настоящей проблемой для использования react в WP, и я знаю, что так не должно быть. Если кто-то сможет указать мне правильное направление, это было бы здорово.

Ответ или решение

Существует много различных проблем, возникающих при интеграции React-приложений на страницы WordPress, и ошибка «Cannot read properties of undefined (reading ‘jsx’)» является одной из них. Давайте разберем причину этого сообщения и шаги, необходимые для его устранения.

Причины ошибки

Ошибки такого типа, как правило, возникают из-за неверной настройки или конфигурации вашего проекта. Конкретно, в вашем случае причиной может быть:

Неправильный импорт модуля: Возможно, компонент ReactSearch не был экспортирован или импортирован корректно. Убедитесь, что вы используете правильные пути и экспортируете ваш компонент.
Необходимые библиотеки не загружены: Важно убедиться, что все необходимые библиотеки (как React, так и ReactDOM) загружены и доступны перед попыткой рендеринга компонента. Если библиотеки не загружаются должным образом, вы можете столкнуться с ошибками, связанными с обращением к неопределенным свойствам.
Конфликт версий React: Если вы используете разные версии React и ReactDOM, это может вызвать проблемы. Убедитесь, что версии этих библиотек совместимы и обновлены до последней стабильной версии.

Устранение ошибки

1. Проверьте путь импорта

Убедитесь, что путь к файлу ReactSearch.js в файле index.js указан правильно:

import ReactSearch from "./scripts/ReactSearch"; // Убедитесь, что путь верен

Если js-файлы находятся в другой директории, корректируйте путь соответственно.

2. Проверка экспорта

В файле ReactSearch.js убедитесь, что компонент экспортируется корректно. У вас это уже сделано правильно:

export default ReactSearch;

3. Проверка загрузки библиотек

Убедитесь, что React и ReactDOM загружаются корректно. В вашем package.json должны быть указаны эти библиотеки:

"dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
}

Если вы не хотите зависеть от конкретных версий, используйте команду:

npm install react react-dom

4. Мыслим как разработчики

В зависимости от настройки вашего проекта, убедитесь, что Babel и Webpack правильно настроены для компиляции JavaScript и JSX. Обычно в вашем проекте должен быть файл конфигурации Webpack или Babel с правильной конфигурацией. Вот пример, как может выглядеть ваш Babel-конфиг:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

5. Проверьте `home.php`

На вашем WordPress сайте в файле home.php вы указали:

<div id="react-search"></div>

Убедитесь, что этот элемент существует перед вызовом ReactDOM.createRoot в index.js. Если элемент не найден, будет возвращаться undefined, что может вызвать проблемы при попытке его рендеринга.

Заключение

Интеграция React в WordPress может быть сложной задачей, но с правильной конфигурацией и вниманием к деталям, вы сможете избежать множества распространенных ошибок, таких как та, которую вы сейчас испытываете. Следуя приведенным выше шагам, вы сможете исправить проблему и успешно добавить компонент поиска на свою страницу. Если у вас возникнут дополнительные проблемы, обязательно проверьте консоль на наличие дополнительных ошибок или предупреждений.

Добавить поле поиска React на главную страницу блога ошибка – Невозможно прочитать свойства неопределенного (чтение ‘jsx’)