React-data-grid N.current is null when tried using basic example

Forge
1

Hello, when we try using tables with https://github.com/adazzle/react-data-grid api the Forge App installs fine but when tried the app the console says Uncaught type errors: N.current is null…

I wonder what is the reason, as if we try it plain as a plain React app it works with no problems and this is givin us a headache. Is it scope issue or what?

Our demo example:

import React, { useEffect, useState } from 'react';
import { invoke } from '@forge/bridge';
import 'react-data-grid/lib/styles.css';
import DataGrid from 'react-data-grid';

const columns = [
  { key: 'id', name: 'ID' },
  { key: 'title', name: 'Title' }
];

const rows = [
  { id: 0, title: 'Example' },
  { id: 1, title: 'Demo' }
];

function App()  {
	
    const [data, setData] = useState(null);
	
    useEffect(() => {
        invoke('getText', { example: 'my-invoke-variable' }).then(setData);
    }, []);


    return (
        <div>
            {data ? data : 'Loading...'}
			<DataGrid columns={columns} rows={rows} />
        </div>
    );    
}
export default App;
2

I created an app where the only differences was the imports

import DataGrid from "react-data-grid";
import "react-data-grid/dist/react-data-grid.css";

Also using dependency "react-data-grid": "7.0.0-canary.30",

manifest

modules:
  confluence:homepageFeed:
    - key: react-data-grid-homepage-hello-world
      resource: main
      resolver:
        function: resolver
      title: react-data-grid
      description: A hello world homepage feed.
      viewportSize: small
  function:
    - key: resolver
      handler: index.handler
resources:
  - key: main
    path: static/hello-world/build
app:
  id: ari:cloud:ecosystem::app/...

I’m able to display the grid fine.
If you’re still facing issues would you be able to describe the steps you used to recreate the issue?

3

Sure will report if this works.

4

No still not work, Im running Windows and Powershell

Steps to produce:

  1. forge create test /// custom ui global page
  2. add source to app.js
  3. npm install
  4. static/hello world/npm install
  5. npm install react-data-grid
  6. static/hello world/npm run build
  7. forge deploy
  8. forge install

your imports did not work with me on windows. react-data-grid has n-current: null errors

On Windows react-data-grid npm module folder dont have ‘dist’ -folder so your import did not work with compiler.

5

As a sanity check you modified the package.json to change the version
from

"react-data-grid": "^7.0.0-beta.20",

to

 "react-data-grid": "7.0.0-canary.30",

before step 6 right?

6

Yes now tested to change those lines both lock and normal pacage.json still no work

7

I’ll try on a windows machine now. I’ve been working on mac.

Will let you know what I see

8

Which module are you using?

9

npm install react-data-grid

10

Apologies,

Your Forge modules should appear in the manifest.yml.

Which ones are you using?

11 
modules:
  jira:globalPage:
    - key: demo2-hello-world-page
      resource: main
      resolver:
        function: resolver
      title: demo2
  function:
    - key: resolver
      handler: index.handler
resources:
  - key: main
    path: static/hello-world/build

Actually our progress is haulted by this error as we are changing from vanilla EXT grids to opensource library to display our grids.

12

I’m really scratching my head here. I ran your process on Windows successfully

Screen Shot 2022-12-01 at 12.44.30
Screen Shot 2022-12-01 at 12.44.302064×424 17.2 KB

I’ll message you to set up a meeting to get you unblocked.

13

Right after the meeting it was revealed the react-data-grid dependency was being installed on the project’s package.json rather than the one in static/hello-world.

Running npm install react-data-grid@7.0.0-canary.30 inside the static/hello-world folder solved the problem.

14

I wanna thank you a lot for quick meeting to solve the issue. Our team thank you so much!

1 Like