react-key-index sample example does not work - reactjs

I would like to use react-key-index extension in order to generate unique id's.
I was trying to implement their sample example, but no matter what I do, it still throws me the same error:
TypeError: Hashids is not a constructor
link: react-key-index npmjs
Here is that pretty simple example:
App.js:
import React from 'react';
import keyIndex from "react-key-index";
import './App.css';
function App() {
let arr = ["one", "two", "three"];
arr = keyIndex(arr, 1);
const list = arr.map(arr => <li key={arr.id}>{arr.value}</li>);
return <ul>{list}</ul>;
}
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
Please, do you have any idea where do I do a mistake? I am trying to set it going in completely new react project (create-react-app). From my point of view i have implemented it correctly (but obviously i have not).
And here is how that error looks like in the browser:

Have you run npm install or perhaps npm install --save hashids? hashids is a dependency of that npm package: https://www.npmjs.com/package/react-key-index
The require('hashids'); should load up that NPM package if you have it installed; if it doesn't find it, I would expect an error like this.

You seem to be using an older version of react-key-index
Try using V0.1.1 and check if that works for you.
I tried it with React 16.8.6 and it seems to be working well for me.
Here's a Working Sample CodeSandbox for your ref.

Related

Understanding Recompose and migrate to React hooks

Suddenly I get an npm error in the pipeline that my recompose package is not compatible with React version 17.
So I have to remove the recompose package. I try to understand why/how it's used in our codebase and what adjustments I have to make to get everything working.
For example I have a file App.tsx and App.container.ts.
import { withRouter } from 'react-router';
import { compose } from 'recompose';
import App from './App';
import { InnerProps, OuterProps } from './App.types';
import withAppCookie from './with-app-cookie';
export default compose<InnerProps, OuterProps>(withRouter, withAppCookie)(App);
We are using only the compose utility from the Recompose package.
In above case why is compose utility used and what adjustments do I have to make to get it working without this package?

Import error, can't find file - stackblitz React JS

I'm working on a POC on stackblitz environment, while trying to import the app.tsx file, Import error, can't find file: getting this error in browser.
Below is my project link
https://stackblitz.com/edit/react-ts-kvyax9
Please help.
You have lots of typos/spelling mistakes in your imports.
In index.tsx, you have this import:
import App from './App';
whereas your app file exists as app.tsx not as App.tsx. You need to mention the filename correctly as
import App from './app';
Similarly, in app.tsx, all your imports are referencing incorrect filenames. Change them to this:
import A from './a';
import B from './b';
import C from './c';
import D from './d';
import './style';

Error message with: Web3 + create-react-app + webpack 5

I am writing the frontend for a Dapp.
I have the script /src/config/index.js
import Web3 from 'web3';
const getLibrary = (provider) => {
return new Web3(provider);
};
export { getLibrary };
And the /src/index.js where I am trying to import getLibrary:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { HashRouter } from 'react-router-dom';
import { ChakraProvider } from '#chakra-ui/react';
import { Web3ReactProvider } from '#web3-react/core';
import { getLibrary } from './config/web3';
ReactDOM.render(
<React.StrictMode>
<HashRouter>
<ChakraProvider>
<Web3ReactProvider getLibrary={getLibrary}>
<App />
</Web3ReactProvider>
</ChakraProvider>
</HashRouter>
</React.StrictMode>,
document.getElementById('root')
);
But, I have the error
The line responsible for the error is:
import { getLibrary } from './config/web3';
I used create-react-app to build the project.
I have try several ideas but nothing is working for me... any help, please?
I had the same problem when using web3 with react and webpack 5. This helped me solve it. I followed option #1 as I couldn't get the other option to work (my main confusion being where to keep webpack.config.js since I had kept it at the root and it was not being picked up).
For anyone looking to resolve this still (2022-08-30), I recommend reading this article:
https://alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5
It will be different in regards to your dependencies but it helped resolve my issues. It basically adds support back in by rerouting requests to dependencies using the react-app-rewired package.

React Suspense Concurrent Mode Not Working

I am trying to use react suspense but I am facing some issue regarding rendering after making changes in react index.js file and I already installed react suspense "npm install react#experimental react-dom#experimental"
My index.js file
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
Index.js file
Error
TypeError: react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.createRoot is not a function
Error Image
To anyone updating an old React App, the React support doc on React 18 says to write ONLY:
npm install react react-dom
for the React 18 update.
I had two React 16 apps I wanted to update.
To do so, I first updated to React 17:
npm install react#17.0.0 react-dom#17.0.0
ONLY AFTER this version is installed properly, you are able to install to 18, specifying the version in the installation command:
npm install react#18.0.0 react-dom#18.0.0
After that,
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
works just fine.
Follow the version update on your 'package,json' file.
In order to works is required to use ReactDOM.unstable_createRoot
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.unstable_createRoot(document.getElementById("root")).render(<App />);
change -> import ReactDOM from "react-dom";
to -> import ReactDOM from "react-dom/client";

How to configure react.js and react-dom.js dependencies?

I am new to react and I am not able to configure it correctly the command
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(--,--)
is not working even after the locations are given correct.
If you are using create-react-app then don't need to such setup n all.
just create project and start working on that.
Quick Start
npx create-react-app my-app
cd my-app
npm start
for proper understanding and learning. please go through reactjs docs
Sample app
import React from "react";
import ReactDOM from "react-dom";
function App() {
return <div>Hello</div>;
}
ReactDOM.render(<App />, document.getElementById("root"));

Resources