I encountered a weird behaviour. I think it might be a bug.
Consider the below snippet:
```
import { Col, Container, Navbar, Row } from "react-bootstrap";
import {
ColumnDirective,
ColumnsDirective,
GridComponent
} from "@syncfusion/ej2-react-grids";
import "@syncfusion/ej2-base/styles/bootstrap5.css";
import "@syncfusion/ej2-buttons/styles/bootstrap5.css";
import "@syncfusion/ej2-calendars/styles/bootstrap5.css";
import "@syncfusion/ej2-dropdowns/styles/bootstrap5.css";
import "@syncfusion/ej2-inputs/styles/bootstrap5.css";
import "@syncfusion/ej2-navigations/styles/bootstrap5.css";
import "@syncfusion/ej2-popups/styles/bootstrap5.css";
import "@syncfusion/ej2-react-grids/styles/bootstrap5.css";
import "@syncfusion/ej2-splitbuttons/styles/bootstrap5.css";
let data = [
// Data taken from your tutorials
];
function App() {
// When this is uncommented it makes the data grid disappear
// useEffect(() => {}, []);
return (
<>
<Navbar
sticky="top"
className="shadow-sm m-0 mb-3 py-2 px-4 w-100"
bg="light"
expand="lg"
collapseOnSelect
>
<Navbar.Brand>Brand</Navbar.Brand>
{/* When this is uncommented it also makes the data grid disappear */}
{/* <>
<Navbar.Toggle />
<Navbar.Collapse className="justify-content-end">
<Nav variant="pills" className="justify-content-center me-auto">
<Nav.Link>Link 1</Nav.Link>
<Nav.Link>Link 2</Nav.Link>
</Nav>
</Navbar.Collapse>
</> */}
</Navbar>
<Container
fluid
style={{ minHeight: "100%" }}
className="d-flex flex-column flex-fill p-0"
>
<Row className="flex-fill pb-3 g-0">
<Col className="h-100">
{/* Grid taken from your tutorials */}
<GridComponent dataSource={data}>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' width='100'/>
<ColumnDirective field='EmployeeID' width='100' textAlign="Right"/>
<ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/>
<ColumnDirective field='ShipCountry' width='100'/>
</ColumnsDirective>
</GridComponent>
</Col>
</Row>
<Row className="pb-3 g-0">
<Col>
{/* Other components removed for clarity */}
<Container />
</Col>
</Row>
</Container>
</>
);
}
export default App;
```
Like it is explained in the comments when either of the commented sections (the useEffect hook or the navbar contents) are used the data grid disappears. There is no error shown anywhere. Sometimes the grid even shows after a random sequence of page refreshes and/or re/saves of the source file.
I have tried to remove the bootstrap css files from the project but that does not seem to fix it.
Dependencies and dev-dependencies:
```
"dependencies": {
"@reduxjs/toolkit": "^1.8.5",
"@syncfusion/ej2-react-grids": "^20.2.49",
"bootstrap": "^5.2.1",
"date-fns": "^2.29.2",
"formik": "^2.2.9",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-bootstrap-icons": "^1.8.4",
"react-dom": "^18.2.0",
"react-redux": "^8.0.2",
"sass": "^1.54.8",
"yup": "^0.32.11"
},
"devDependencies": {
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"@vitejs/plugin-react": "^2.1.0",
"typescript": "^4.6.4",
"vite": "^3.1.0"
}
```
Using latest version of Google Chrome.
EDIT:
This problem only occurs when running the app via the dev server (`npm run dev`). Problem disappears when the app is built and served via a static server.
Any assistance is appreciated.
