0

There is a package called react-data-grid. And there is an example table on that particular package but the code is in TypeScript and also docs for this particular version are not there. I tried to convert the typescript to React. Everything was fine until I wanted to implement Drag and Drop. Some error is coming and I think that error is because I'm importing something in the wrong way. Can you tell me where I'm doing anything wrong? Here is the Sandbox link. The error in my local build is coming on RowRender.js in line number 44. I also included the typescript file there. You can also see the error if you just uncomment the line 72-74 of App.js component in sandbox.

Yash
  • 198
  • 1
  • 12

1 Answers1

0
  • Rename .ts file to .tsx file. In another case TypeScript will not understand <div> <Row> and other react elements
  • Update your imports regarding react-data-grid to: import { Row, RowRendererProps } from "react-data-grid";
  • Update your import import { useCombinedRefs } from ... to fetch hook from correct place.
  • If you will see error regarding default import for React - change import React from 'react' to import * as React from "react"; or update tsconfig to support synthetic imports

useCombinedRefs - is internal function that is not exported, so you can't use it directly. Option #1 - write it yourself. Option #2 find the reason why you are trying to use internal function. Should be the better way.

function useCombinedRefs(...refs) {
  return useCallback(handle => {
    for (const ref of refs) {
      if (typeof ref === 'function') {
        ref(handle);
      } else if (ref !== null) {
        ref.current = handle;
      }
    }
  }, refs);
}
Drag13
  • 5,859
  • 1
  • 18
  • 42
  • Thanks for the help, but the issue is still there. I only provided typescript file because I'm converting the code to React from it. It is not included in the code(i.e it is there only for reference). I'm not using RowRenderedProps anywhere in the react code. And I can't understand where they are exporting useCombinedRefs from. So I think I'm importing them worng. Can you please provide exact import statement for useCombinedRefs. – Yash Jan 08 '21 at 11:31
  • Where did you take `useCombinedRefs` before? – Drag13 Jan 08 '21 at 11:39
  • I'm converting from a typescript file that uses same package. They used in there imports(`import { useCombinedRefs } from '../../../../src/hooks';`)(see rowRendere.tsx in sandbox). How do I import it. Vs code is not giving recommendation. – Yash Jan 08 '21 at 11:41
  • This should work `import { useCombinedRefs } from 'react-data-grid/lib/hooks';` – Drag13 Jan 08 '21 at 11:43
  • Already tried this. Compile Error - ` ./src/components/RowRenderers.js peggy-v2 | Module not found: Can't resolve 'react-data-grid/lib/hooks' in '/app/src/components'` – Yash Jan 08 '21 at 11:44
  • Using like this `import { useCombinedRefs } from 'react-data-grid'` doesn't give compile error, but it is giving typeerror. – Yash Jan 08 '21 at 11:46
  • Sounds weird. Ofc. you can suppress TS error with `//@ts-ignore` but this is not the answer. – Drag13 Jan 08 '21 at 11:47
  • Sorry. This syntax is working `import useCombinedRefs from 'react-data-grid'`, but still the error is thier. – Yash Jan 08 '21 at 11:49
  • Yes. This Error `TypeError: Object(...) is not a function` – Yash Jan 08 '21 at 11:52
  • The Same error is coming on [sandbox](https://codesandbox.io/s/rdg-row-reorder-700-canary33-ed0mu?file=/src/App.js:2578-2691) too. If you uncomment line 72-74. You can see the error. – Yash Jan 08 '21 at 11:56
  • I see. This is because we are trying to import from `.d.ts` files. This type of files doesn't contain a code - only declarations. Probably this is internal hook that should not be used outside of the lib? – Drag13 Jan 08 '21 at 12:00
  • So. Is there work around on it that you can suggest and get the code work? – Yash Jan 08 '21 at 12:08
  • Just checked the lib code - it's internal function in the bundle. It's not exported so you can't use it directly. However, if you are sure you need to use it - take it from the code (updated the post). But I am 99% sure this is the wrong way and issue is somewhere else. – Drag13 Jan 08 '21 at 12:15
  • I think the error is coming from there only. Because when we comment that line out, the code start working. I also tried to declaring ref but that also doesn't seem to working. – Yash Jan 08 '21 at 12:39
  • 1
    Hey. Thanks for the help. Turns out when I'm using this internal function, the code is working. – Yash Jan 08 '21 at 16:21