React Bootstrap no funciona en Gatsby versión 4.
He tenido problemas al usar React Bootstrap en Gatsby versión 4, ya que parece no funcionar en absoluto. No hay capacidad de respuesta.
He creado un pequeño proyecto de muestra para probar esto, disponible aquí: https://github.com/Johnsensei/react-bootstrap-test
El código de la aplicación se ve así:
import * as React from "react"
import { Container, Row, Col } from "react-bootstrap"
const IndexPage = () => {
return (
<container>
<row>
<col lg="{4}">Columna 1
<col lg="{4}">Columna 2
<col lg="{4}">Columna 3
</row>
</container>
)
}
export default IndexPage
En teoría, en una pantalla grande, cada una de esas columnas debería estar alineada en la misma fila y ocupar 1/3 de la fila (4/12 de la cuadrícula de la fila de Bootstrap).
A continuación se muestra una captura de pantalla del resultado:
Como podemos ver, las columnas no están en una fila en una pantalla grande. Están todas apiladas una encima de la otra.
A continuación se muestran las dependencias en el package.json:
"dependencies": {
"bootstrap": "^5.1.3",
"gatsby": "^4.3.0",
"react": "^17.0.1",
"react-bootstrap": "^2.0.3",
"react-dom": "^17.0.1"
}
¿Hay algo absurdamente simple que simplemente haya omitido o olvidado hacer? Si es así, ¿qué en este código específico lo solucionará?
¿O estas versiones de Gatsby y React Bootstrap son simplemente incompatibles? Si es así, ¿debería enviar un problema a Gatsby o Bootstrap?
Gracias por su tiempo.
davy.ai
React Bootstrap no funciona en Gatsby Versión 4
El problema en cuestión es que React Bootstrap no es responsive en Gatsby versión 4. El problema se puede replicar utilizando el código proporcionado en https://github.com/Johnsensei/react-bootstrap-test. Las columnas en el contenedor no se alinean en la misma fila y no ocupan 1/3 de la fila como se esperaba.
Las dependencias listadas en package.json son:
No está claro si hay un problema con las versiones de Gatsby y React Bootstrap siendo incompatibles, o si se omitió o olvidó algo en el código.
Si hay algo que falta en el código, no se especifica qué es. Sin embargo, se recomienda usar
gatsby-plugin-bootstrapjunto conreact-bootstrappara asegurarse de que los archivos CSS y JavaScript de Bootstrap se carguen correctamente.Si el problema se debe a la incompatibilidad entre Gatsby y React Bootstrap, se recomienda enviar un problema al proyecto correspondiente en Github.
En general, se necesita más información para diagnosticar el problema y proporcionar una solución.