0

Hola es mi primera vez aquí. Pero de hecho tengo dos días intentando resolver este problema.

Soy nuevo en el desarrollo de react/gatsby, compre una plantilla html que contiene archivos css/js, encontré la forma de importar los archivos css y también los archivos js en el gatsby-ssr.js, pero cuando uso el comando Gatsby Develop el sitio da el siguiente error en la consola, deteniendola ejecución de los archivos js de la plantilla:

react-dom.development.js:67 Warning: Expected server HTML to contain a matching <p> in <div>.
at p
at div
at div
at div
at div
at div
at div
at section
at div
at StaticQueryDataRenderer

Pero cuando uso el comando Gatsby serve, como si fuera en producción, el error se va y los archivos js de la plantilla funcionan perfectamente. Ya intente utilizar "useEffect" para controlar los objetos DOM como lo hacen los archivos js de la plantilla, pero los archivos usan Jquery para ejecutar otras librerías que también se cargan en el gatsby-ssr.js. También intente modificar el funcionamiento con el archivo por defecto html.js pero sin solución.

Pienso que es problema de los tiempos de ejecución, los archivos js de la plantilla necesitan ser cargados al final de la página html, es por eso que en la plantilla funciona bien, pero en los componentes de react al importar los archivos js de la plantilla, no funciona.

Todo lo que quiero es evitar ese error en la consola y hacer que los archivos js de la plantilla funcionen bien mientras estoy en el modo de desarrollo. Me estoy volviendo loco jeje.

Gracias por todo.

2
  • Traduci el titulo tambien pofa....
    – gbianchi
    Commented el 26 ago. 2021 a las 19:00
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla!
    – gbianchi
    Commented el 26 ago. 2021 a las 19:00

1 respuesta 1

0

No sé tu versión de Gatsby, pero deberías poder usar tus propios archivos de JavaScript. Te adjunto el html.js de un proyecto en el que importaba scripts como `Jquery.

import React from "react"

let stylesStr
if (process.env.NODE_ENV === `production`) {
  try {
    stylesStr = require(`!raw-loader!../public/styles.css`)
  } catch (e) {
    console.log(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"
          />
          {this.props.headComponents}
          {css}

          <script
            src="http://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossOrigin="anonymous"></script>

          <script type="text/javascript" src="link/to/file.js"></script>    
        </head>
        <body {...this.props.bodyAttributes}>
          {this.props.preBodyComponents}
          <div
            key={`body`}
            id="___gatsby"
            dangerouslySetInnerHTML={{ __html: this.props.body }}
          />
          {this.props.postBodyComponents}
          <script 
            dangerouslySetInnerHTML={{
              __html: ``
            }}
          />
        </body>
      </html>
    )
  }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.