Algolia's searchBox is stuck and is not accepting new values - reactjs

I'm trying to type new values ​​after instantiating Algolia's SearchBox, but it doesn't change the input value at all. I've recreated the NextJs boilerplate and implemented it 5 times, but the value never changes. What could it be?
In short: when I type something in the input, the value just doesn't update
Github:
https://github.com/Arthur-Maskalenkas/bug-report
sandbox:
https://codesandbox.io/p/github/Arthur-Maskalenkas/bug-report/csb-zf1foq/draft/happy-smoke?file=%2FREADME.md
my currently index.tsx is
import type { NextPage } from 'next'
import algoliasearch from 'algoliasearch/lite';
import {
InstantSearch,
SearchBox,
Pagination,
Configure,
} from 'react-instantsearch-dom';
const Home: NextPage = () => {
const searchClient = algoliasearch(
'B1G2GM9NG0',
'aadef574be1f9252bb48d4ea09b5cfe5'
);
return (
<div className="ais-InstantSearch">
<h1>React InstantSearch e-commerce demos</h1>
<InstantSearch searchClient={searchClient} indexName="demo_ecommerce">
<Configure hitsPerPage={8}/>
<div className="search-panel">
<div className="search-panel__filters">
</div>
<div className="search-panel__results">
<SearchBox
className="searchbox"
translations={{
placeholder: ''
}}
/>
<div className="pagination">
<Pagination/>
</div>
</div>
</div>
</InstantSearch>
</div>
)
}
export default Home
my package
{
"name": "teste2",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"algoliasearch": "^4.14.2",
"next": "12.3.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-instantsearch-dom": "^6.33.0"
},
"devDependencies": {
"#types/node": "18.7.20",
"#types/react": "18.0.21",
"#types/react-dom": "18.0.6",
"#types/react-instantsearch-dom": "^6.12.3",
"eslint": "8.24.0",
"eslint-config-next": "12.3.1",
"typescript": "4.8.3"
}
}

There is a known issue with React 18.x strict mode and older InstantSearch libraries. The resolution is to set reactStrictMode: false in next.config.js (not recommended), downgrade to React 17, or move to the newer react-instantsearch-hooks library as documented here: https://github.com/algolia/react-instantsearch/issues/3634

Related

How to fix Typescript - Next.js build error?

When i build my small Typescript - Nextjs project,
occur type error like this
./components/Layout.tsx:3:55
Type error: Cannot find namespace 'React'.
1 | import NavBar from "#components/NavBar";
2 |
> 3 | export default function Layout({children} :{children :React.ReactNode}){
| ^
4 | return (
5 | <>
6 | <NavBar/>
info - Checking validity of types .%
Layout.tsx is only
import NavBar from "#components/NavBar";
export default function Layout({children} :{children :React.ReactNode}){
return (
<>
<NavBar/>
<div>
{children}
</div>
</>
)
}
and _app.tsx is
import '#/styles/globals.css'
import type { AppProps } from 'next/app'
import Layout from '#components/Layout'
import { Provider } from 'react-redux'
import store from '#/store'
function MyApp({ Component, pageProps }: AppProps) {
return (
<Provider store={store}>
<Layout>
<Component {...pageProps} />
</Layout>
</Provider>
)
}
export default MyApp
and package.json is
{
"name": "bi-front",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "NODE_ENV=development next dev",
"build": "NODE_ENV=development next build",
"start": "NODE_ENV=production next start",
"lint": "NODE_ENV=development next lint"
},
"dependencies": {
"#reduxjs/toolkit": "^1.8.3",
"#types/react-datepicker": "^4.4.2",
"#types/react-redux": "^7.1.24",
"apexcharts": "^3.35.3",
"autoprefixer": "^10.4.7",
"axios": "^0.27.2",
"dayjs": "^1.11.3",
"dotenv": "^16.0.1",
"mongoose": "^6.4.0",
"next": "12.1.6",
"path": "^0.12.7",
"postcss": "^8.4.14",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-csv-downloader": "^2.8.0",
"react-datepicker": "^4.8.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.2",
"react-select": "^5.3.2",
"redux": "^4.2.0",
"tailwindcss": "^3.1.3",
"typesafe-actions": "^5.1.0"
},
"devDependencies": {
"#types/node": "18.0.0",
"#types/react": "^18.0.15",
"#types/react-dom": "18.0.5",
"eslint": "8.18.0",
"eslint-config-next": "12.1.6",
"typescript": "4.7.4"
}
}
The reason why i use not only _app.tsx but Layout.tsx is more simply Managing Components.
I think this is simple error,
but this is my first Typescript - Nextjs project,
so i don't know how to fix it.
Please understand that i'm not good at english,
PLEASE HELP ME :(
You have to import React on top of your file, or Import the exact type and use it, e.g.
import { ReactNode } from 'react';
export default function Layout({children}: {children: ReactNode}) {
/* OR */
import React from 'react';
export default function Layout({children}: {children: React.ReactNode}) {

JSX not showing in browser

Hi there I recently started following a crash course of Django Rest Framework + React but I came across a problem with my React code. The jsx I write in my App.js doesn't show in the browser. Here is the code:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './layout/Header';
import Dashboard from './leads/Dashboard';
import { Provider } from 'react-redux';
import store from '../store';
class App extends Component {
render() {
return (
<Provider store={store}>
<Header />
<div>
<Dashboard />
</div>
</Provider>
)
}
}
ReactDOM.render(<App />, document.getElementById("app"))
He are my Header.js, and Dashboard.js files(in case it helps)
import React, { Component } from 'react';
export class Header extends Component {
render() {
return (
<div>
<nav className="navbar navbar-expand-sm navbar-light bg-light">
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarTogglerDemo01">
<a className="navbar-brand" href="#">Django + React</a>
<ul className="navbar-nav mr-auto mt-2 mt-lg-0">
</ul>
</div>
</nav>
</div>
)
}
}
export default Header;
import React from 'react';
import Form from './Form';
import Leads from './Leads';
export default function Dashboard() {
return (
<div>
<Form />
<Leads />
</div>
);
}
In case you need any extra information please tell me. Can anyone please help me solve this problem?? If so please tell me and thank you in advance.
Edit: Here is my package.json file
{
"name": "DjangoReact",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --watch ./backend/frontend/src/index.js --output-path ./backend/frontend/static/frontend",
"build": "webpack --mode production ./backend/frontend/src/index.js --output-path ./backend/frontend/static/frontend/main.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.12.7",
"#babel/preset-env": "^7.12.7",
"#babel/preset-react": "^7.12.7",
"babel-loader": "^8.2.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"webpack": "^5.6.0",
"webpack-cli": "^4.2.0"
},
"dependencies": {
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-react": "^1.2.0",
"react-redux": "^7.2.2",
"react-thunk": "^1.0.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0"
}
}
You will not see jsx files in the browser. The code from jsx files is transformed into html+js code and displayed in the web browser.
Before going to write your own code, please make sure that you have node.js installed and that you can run React template code:
# create the React boilerplate project
npx create-react-app frontend
# go to the fronted project directory
cd frontend
# run React built-in development server
npm start
After the above commands, you should see a default web app at http://localhost:3000.
You can check details in my article: Starting SaaS with Django and React
If you are able to see the default application then you can start to add your code. Here you have the second part of my article: React Routing and Components for Signup and Login

RangeError: Maximum call stack size exceeded (React)

This is my first app in React. In localhost everything works fine, and when I deploy with Github Pages, some pages from my app (Info / Images / Évenements) doesn't render. Every time when I click in their link to access them, I get a white page and this error on my console:
RangeError: Maximum call stack size exceeded at Object.toString.
Also When I refresh the page, github pages returns a 404 page.
There's my package:
{
"name": "gyuto-web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#u-wave/react-vimeo": "^0.5.0",
"auditjs": "^3.0.10",
"bulma": "^0.7.2",
"gh-pages": "^2.0.1",
"gsap": "^2.0.2",
"i18next": "^13.0.0",
"i18next-browser-languagedetector": "^2.2.4",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-flexbox-grid": "^2.1.2",
"react-helmet": "^5.2.0",
"react-i18next": "^8.4.0",
"react-media": "^1.8.0",
"react-router-dom": "^4.3.1",
"react-router-page-transition": "^3.1.0",
"react-scripts": "2.0.5",
"react-transition-group": "^2.5.0",
"rodal": "^1.6.3"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "yarn run build",
"deploy": "gh-pages -b master -d build",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"node-sass": "^4.9.4",
"sass-loader": "^7.1.0"
}
}
The error is reported on react-dom.production.min.js line 3869 & 5081:
function supported(object) {
return Object.prototype.toString.call(object) == '[object Arguments]';
}
Here's an exemple of a component not rendering in production:
PageImages.jsx
import React, { Component, Fragment } from "react";
import { Helmet } from 'react-helmet';
import { images } from "../data";
import { Row, Col } from "react-flexbox-grid";
import { Link, NavLink } from "react-router-dom";
import Image from "./assets/Image";
import { withNamespaces } from 'react-i18next';
class PageImages extends Component {
render() {
const listGaleries = images.map(i => {
if (i.id) {
return (
<Col key={i.id} xs={12} sm={6} md={6} lg={4}>
<Link to={`/images/${i.id}`}>
<Image imagesObject={i} />
</Link>
</Col>
);
} else {
return (
<Fragment>
<Helmet>
<style>{'body { background-color: #f5f5f5 !important; } a.itemsColor{color: black} .cursor{display:none}'}</style>
<title>{this.props.t('nav.images')}</title>
</Helmet>
<div className="pageNotFoundCtr">
<p>
{this.props.t('nav.soon')}
</p>
<p>
<NavLink to={"/doclist"} className="snapCursor js-click" data-snap-scale="3.5">
{this.props.t('nav.doclistPage')}
</NavLink>
</p>
</div>
</Fragment>
)
}
})
return (
<Fragment>
<Helmet>
<title>{this.props.t('nav.images')}</title>
<style>{'body { background-color: #f5f5f5 !important; } a.itemsColor{color: black} .cursor{display:none}'}</style>
</Helmet>
<Row className="imagesRow">{listGaleries}</Row>
</Fragment>
);
}
}
export default withNamespaces('common')(PageImages);
Image.jsx
import React, { Component } from "react";
class Image extends Component {
render() {
return (
<div className="galeries container">
<div className="parentZoomIn">
<div
className="childZoomIn"
style={{
backgroundImage: `linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("${
this.props.imagesObject.cover
}")`
}}
>
<div className="text">
<p>{this.props.imagesObject.title.fr}</p>
</div>
</div>
</div>
</div>
);
}
}
export default Image;
Does someone knows why it's happening on production, and not on development, and a way to fix it?
Thanks
Upgrade to v5.2.1 or higher and this open issue should be fixed
yarn upgrade -L react-helmet

Reactstrap NavDropdown component doesn't open

I am still new to react and am trying to use react and reactstrap for an internal project at work. I have spent several hours trying to the get the NavDropdown component to work. I have tried porting the example code from https://reactstrap.github.io/components/dropdowns/ into my project to just test it out and built my own nav taking cues from this example https://codepen.io/eddywashere/pen/KgjQay?editors=0010
However, I cannot get the Dropdown menu to open.
When I inspect the element I can see the NavDropdown and its child elements in the inspector. When I click on the DropDown element I can see that its state.isOpen toggles to true. However- the dropdown menu doesn't actually show, it remains closed.
I have no console.log errors and am really mystified about what I am doing wrong. Would love to learn my mistake on this one so we can use the library.
Here is the header component I am trying to use the NavDropDown in:
import React from 'react';
import { Navbar, Nav, NavDropdown, DropdownToggle, DropdownMenu, DropdownItem} from 'reactstrap';
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
dropdown: false
};
this.dropdownToggle = this.dropdownToggle.bind(this);
}
dropdownToggle() {
this.setState({
dropdown: !this.state.dropdown
});
}
render() {
return (
<header>
<Navbar color="light">
<Nav navbar>
<NavDropdown isOpen={this.state.dropdown} toggle={this.dropdownToggle}>
<DropdownToggle color="primary" nav caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Header</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</NavDropdown>
</Nav>
</Navbar>
</header>
);
}
}
export default Header
Here is App.js file I import the header into:
import React from 'react';
import Header from './shared/Header';
class App extends React.Component {
render() {
return (
<div>
<Header/>
</div>
);
}
}
export default App;`
Here is my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import App from './comp/App';
import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import './Index.css';
ReactDOM.render(
<BrowserRouter><App /></BrowserRouter>,
document.getElementById('root')
);
registerServiceWorker();
I used create-react-app to start the project and here is my package.json
{
"name": "estimator",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^4.0.0-alpha.6",
"node-sass-chokidar": "0.0.3",
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-addons-css-transition-group": "^15.6.0",
"react-addons-transition-group": "^15.6.0",
"react-burger-menu": "^2.1.4",
"react-dom": "^15.6.1",
"react-icons": "^2.2.5",
"react-loading": "^0.1.4",
"react-modal": "^2.2.4",
"react-router-dom": "^4.1.2",
"react-scripts": "1.0.11",
"reactstrap": "^4.8.0",
"redux-thunk": "^2.2.0"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"npm-run-all": "^4.0.2"
}
}
I encountered this when I moved from react-bootstrap (using bootstrap 3.3.7) to reactstrap.
Even though my package.json indicated "bootstrap": "^4.0.0-alpha.6" my configuration was still pulling 3.3.7.
I deleted my node_modules/bootstrap folder, did an npm install and it started working.
Maybe something to check?

React.CreateElement issue on react-router-v4, not v4-alpha4

I'm trying to figure out why a specific function is working with the alpha version of React Router but not the current v4 version
index.js
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Match } from 'react-router';
import NotFound from './components/NotFound';
const Root = () => {
return (
<BrowserRouter>
<div>
<Match exactly pattern="/" component={NotFound} />
</div>
</BrowserRouter>
)
}
render(<Root />, document.querySelector('#root'));
package.json
{
"name": "rbm-dashboard",
"version": "0.1.0",
"private": true,
"dependencies": {
"material-ui": "^0.17.0",
"react": "^15.4.2",
"react-tap-event-plugin": "^2.0.1",
"react-dom": "^15.4.2"
},
"devDependencies": {
"react-router": "4.0.0-alpha.4",
"react-scripts": "0.9.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
NotFound.js
import React from 'react';
class NotFound extends React.Component {
render() {
return (
<h2>Not Found</h2>
)
}
}
export default NotFound;
When i switch the react-router version from 4.0.0-alpha.4 to ^4.0.0, i get the following errors
I don't have an issue using the alpha version, however I would like to figure out what the issue is so i can learn from it. Also if needed i can push the code to github if anyone wants to look at it locally.
Thank you
Because Match isn't a thing anymore. Change Match pattern to Route path and you should be good. Also, import everything from react-router-dom not react-router.

Resources