Файлы JavaScript Gatsby не загружаются при первой загрузке, только при обновлении; Ошибка MIME-TYPE

При первой загрузке моей страницы я всегда получаю эту ошибку: Refused to execute script from '<URL>' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. В результате большая часть моих javascript вообще не работает. Если я перезагружаю страницу, все работает отлично. Это происходит только в продакшене через Netlify. Моя локальная среда работает отлично каждый раз, без ошибок консоли или предупреждений.

Вот дом, когда я получаю сообщение об ошибке:

А вот dom при второй загрузке, когда все загружается правильно:

Файлы JavaScript Gatsby не загружаются при первой загрузке, только при обновлении; Ошибка MIME-TYPE

Наконец, вот мой файл html.js:

let stylesStr
if (process.env.NODE_ENV === `production`) {
  try {
    stylesStr = require(`!raw-loader!../public/styles.css`)
  } catch (e) {
    console.info(e)
  }
}

module.exports = class HTML extends React.Component {
  render() {
    let css
    if (process.env.NODE_ENV === `production`) {
      css = (
        <style
          id = "gatsby-inlined-css"
          dangerouslySetInnerHTML = {{ __html: stylesStr }}
        />
      )
    }
    return (
      <html {...this.props.htmlAttributes}>
        <head>
          <meta charSet = "utf-8" />
          <meta httpEquiv = "x-ua-compatible" content = "ie=edge" />
          <meta
            name = "viewport"
            content = "width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          <link rel = "shortcut icon" href = {favicon} />
          {this.props.headComponents}
          {css}
        </head>
        <body {...this.props.bodyAttributes}>
          {this.props.preBodyComponents}
          <div
            key = {`body`}
            id = "___gatsby"
            dangerouslySetInnerHTML = {{ __html: this.props.body }}
          />
          {this.props.postBodyComponents}
          <script
            type = "text/javascript"
            dangerouslySetInnerHTML = {{
              __html: `
                ...some javascript code
              `
            }}
          />
        </body>
      </html>
    )
  }
}

Я попытался установить тип в файле gatsby-config.js, но это не решило проблему.

resolve: `gatsby-plugin-netlify`,
        options: {
          headers: {
            "/*.js": [
              "Cache-Control: public, max-age=0, must-revalidate",
              "Content-Type: text/javascript"
            ],
          },
        },
      },

Разобрался с фиксом:

{
      resolve: `gatsby-plugin-netlify`,
      options: {
        mergeLinkHeaders: false,
        mergeCachingHeaders: false
      },
    },

Проверьте вкладку «Сеть» в инструментах разработчика, чтобы узнать, что происходит с сетевыми запросами. Если вы сделаете запрос с помощью curl, вернет ли он правильный HTML?

— 02.08.2018 19:22

javascript gatsby netlify

02.08.2018 00:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 080

Другие вопросы по теме

Реквизит внутри объекта в Гэтсби

Создание блога Gatsby, связанного с Contentful CMS

На стороне клиента Gatsby перенаправления на внешний URL-адрес не работают на Netlify

ECONNRESET при тестировании функций netlify и Gatsbyjs 2

TypeError: невозможно прочитать свойство allMarkdownRemark для undefined - в Gatsby

Как получить минифицированные файлы в проекте (Gatsby / React)

Уровень данных Contentful CMS не доходит до моего блога Gatsby / React

Проблемы с отображением вложенных данных

Как преобразовать статический сайт в динамический

Gatsby JS - несколько страниц, загружающих файлы разметки с разными категориями

Файлы JavaScript Gatsby не загружаются при первой загрузке, только при обновлении; Ошибка MIME-TYPE

Другие вопросы по теме

Похожие вопросы