Блог

Главная - Вопросы по программированию - Развертывание Приложения React На Страницах Github Приводит К Манифесту: Строка: 1, столбец: 1, Синтаксическая ошибка

Развертывание Приложения React На Страницах Github Приводит К Манифесту: Строка: 1, столбец: 1, Синтаксическая ошибка

#reactjs #github-pages

Вопрос:

Я пытаюсь разместить свое приложение react на страницах Github.

Я сделал то же самое с проектом на основе Vue, и у меня не было проблем, но с React все по-другому.

Я просмотрел следующие учебные пособия:

Я могу развернуть приложение на страницах Github, но вижу следующую ошибку:

Манифест: Строка: 1, столбец: 1, Синтаксическая ошибка.

Ошибка

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

Я также попытался создать проект vanilla react и следовать учебным пособиям, но получил те же проблемы.

Это мой файл package.json:

 {
  "name": "Random App Name",
  "homepage": "https://github.com/TomerPacific/projectName",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^3.1.0"
  }
}

Что здесь происходит? Является ли проблема проблемой конфигурации?

Комментарии:

1. Как выглядит URL-адрес вашего приложения? Лол, и я не думаю, что вы используете поле «домашняя страница» так, как вам положено.

2. В общем, если ваше приложение находится в » my-username.github.io «, настройки сборки React по умолчанию (без «домашней страницы» в «package.json») должны работать вместе с настройкой страницы GitHub для обслуживания из корневой папки. Вы проходили через create-react-app.dev/документы/развертывание/… ?

3. @KibongeMurphy — Я изменил название приложения и домашнюю страницу в пакете.json только для этого вопроса, чтобы не выдавать его. Ценности, которые там есть, не являются реальными ценностями. Кроме того, если вы посмотрите на ссылки на учебники, которыми я поделился, оба они указывают, чтобы добавить ключ домашней страницы.

4. Да, конечно. Я так и думал. Но все же важно, чтобы он имел правильную форму. Я размещаю свое портфолио на «username.github.io». У меня есть другое репо для проекта домашней автоматизации, который размещен по адресу «username.github.io/home-remote». «Имя пользователя» должно быть вашим именем пользователя на GitHub. Кроме того, вам следует перейти в инструменты разработчика, затем на вкладку сеть и просмотреть точные URL-адреса, которые генерируют ошибки 401. Скорее всего, это тот случай, когда URL-адреса указывают не на те места. Если бы вы могли добавить скриншот этого вопроса к вопросу, это помогло бы помочь.

Ответ №1:

Благодаря предложению @Kibonge Мерфи я проверил URL-адрес запроса для всех выполняемых сетевых запросов и обнаружил, что он был неправильным.

Вместо того, чтобы указывать URL-адрес страницы Github в качестве ключа домашней страницы в файле package.json, я ввел URL-адрес репозитория.

Значение,

Я должен был поставить это : https://tomerpacific.github.io/projectName/

Вместо https://github.com/TomerPacific/projectName

Метки: , ,