Развертывание Gatsby на страницах GitHub на мобильных устройствах никогда не загружает изображения, а хуки не работают - PullRequest
0 голосов
/ 09 июля 2019

Недавно я развернул свое приложение на github-страницах с помощью gatsby deploy. На настольном компьютере все работает так, как задумано, на локальном хосте - как на моем мобильном, так и на рабочем столе Ссылка на приложение: https://daria -marczak.github.io / renome /

Я проверил, работает ли только мой телефон, но, к сожалению, нет. Кажется, все работает нормально через localhost, поэтому я подозреваю, что что-то не так с самим развертыванием. Он использует другую команду, так как он строит, а не развивает, но я не уверен, может ли это вызвать проблему.

Мой пакет.json:

  "name": "renome",
  "private": true,
  "description": "renome restaurant",
  "version": "0.1.0",
  "author": "Daria Marczak",
  "dependencies": {
    "gatsby": "^2.4.2",
    "gatsby-image": "^2.0.41",
    "gatsby-plugin-manifest": "^2.1.1",
    "gatsby-plugin-offline": "^2.1.0",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-sharp": "^2.0.36",
    "gatsby-plugin-styled-components": "^3.1.0",
    "gatsby-source-filesystem": "^2.1.0",
    "gatsby-transformer-remark": "^2.5.0",
    "gatsby-transformer-sharp": "^2.1.19",
    "moment": "^2.24.0",
    "object-fit-images": "^3.2.4",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dates": "^20.2.4",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.1",
    "react-redux": "^7.1.0",
    "redux": "^4.0.1",
    "redux-saga": "^1.0.4",
    "styled-components": "^4.2.0"
  },
  "devDependencies": {
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.2.0",
    "eslint-config-react-app": "^4.0.0",
    "gatsby-plugin-eslint": "^2.0.5",
    "gatsby-plugin-stylelint": "^3.2.0",
    "gh-pages": "^2.0.1",
    "husky": "^2.2.0",
    "lint-staged": "^8.1.6",
    "prettier": "^1.17.0",
    "stylelint": "^10.0.1",
    "stylelint-config-recommended": "^2.2.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-processor-styled-components": "^1.6.0",
    "stylelint-webpack-plugin": "^0.10.5"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "deploy": "gatsby build --prefix-paths && gh-pages -d public",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "dev-m": "gatsby develop -H 0.0.0.0 -p 8000",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
  },
  "homepage": "https://daria-marczak.github.io/renome/"
}

Мой gatsby.config.js:

module.exports = {
  siteMetadata: {
    title: 'Renome',
    description:
      'Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.',
    author: '@dariamarczak',
  },
  pathPrefix: '/renome',
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-styled-components',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/assets`,
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'posts',
        path: `${__dirname}/src/posts`,
      },
    },
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: 'gatsby-starter-default',
        short_name: 'starter',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/assets/icons/gatsby-icon.png',
      },
    },
    {
      resolve: 'gatsby-plugin-eslint',
      options: {
        test: /\.js$/,
        exclude: /(node_modules|cache|public)/,
        options: {
          emitWarning: true,
          failOnError: false,
        },
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        commonmark: true,
        footnotes: true,
        pedantic: true,
        gfm: true,
      },
    },
  ],
};

Теперь, если я перейду к мобильной версии развернутого проекта, он практически не работает. Изображения, которые были загружены с помощью gatsby-img, имеют размытые линии (не знаю, как описать этот эффект загрузки), но они никогда не загружаются полностью. Каждая отдельная функция, которая использовала хук useState (), не работает вообще, и все кнопки, для которых не установлены значения по умолчанию, фактически обновляют браузер.

...