2

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();

enter image description here

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: enter image description here

RadekAdler
  • 79
  • 1
  • 1
  • 8

2 Answers2

0

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.

Phoenix
  • 129
  • 1
  • 8
  • 1
    The error is in a Library File, not OP's code, I guess. – SiddAjmera Jul 23 '19 at 03:33
  • I have not install hashids explicitly but node_modules folder contains it so i guess this is not that problem. And require('hashids') returns it too. – RadekAdler Jul 23 '19 at 12:40
  • @RadekAdler At that point in the code, is `HashIds` in fact a constructor, if you put a breakpoint there? – Phoenix Aug 02 '19 at 03:01
0

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.

SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
  • Hi, I have rearranged my question exactly according to your answer. I have posted my package.json including identical versions as your project. It still does not work. Im my opinion, the problem must consist of i am loading app.js in index.js (2 files) but you have only used one file (and sample code in npmjs does the same too). Everything else is a carbon copy of your project. But it sounds me crazy if such a detail causes such a troubles. – RadekAdler Jul 23 '19 at 16:33
  • @SiddAjmera the example in codesandbox does not work. – Cuban coffee Feb 21 '21 at 12:01
  • 1
    @Cubancoffee, not sure what happened! It was working the last time I saw it. – SiddAjmera Feb 22 '21 at 00:50