Giter VIP home page Giter VIP logo

Comments (9)

lukekim avatar lukekim commented on May 18, 2024 1

I had the same issue. The latest version of direction is 2.0.0, which seems generate the same error above.

When I downgraded to [email protected] as @itchii-06 commented, everything worked as expected.

from glide-data-grid.

jassmith avatar jassmith commented on May 18, 2024

any chance you have a minimal repro case?

from glide-data-grid.

stephensilber avatar stephensilber commented on May 18, 2024

I'm also using Next.js and have run into the same issue in an empty project. I found a solution to fix the above error message here: https://stackoverflow.com/a/65978156. My next.config.js looks like this:

// next.config.js

const withTM = require('next-transpile-modules')(['@glideapps/glide-data-grid', 'direction', 'marked', 'react-responsive-carousel']);
module.exports = withTM({});

Beyond that, there are issues with window not being defined, so it seems like this framework may not be SSR friendly yet. I don't mean to hijack the thread, but I do suspect that all of these errors will fall under the same underlying problem. Once you get through the transpile/import issues, you're hit with window is not defined. I've attempted solve that below by dynamically importing the component (as suggested by Next.js here.

Here's a sample component I made:



import DataEditor from "@glideapps/glide-data-grid";
import {
  DataEditorContainer,
  GridColumn,
  GridCellKind,
} from "@glideapps/glide-data-grid";

export default function SampleDataGrid({ data }) {

  if (!window) {
    return null
  }

  const columns = [
    { title: "Number", width: 100 },
    { title: "Square", width: 100 },
  ];

  function getData([col, row]) {
    let n;
    if (col === 0) {
      n = row;
    } else if (col === 1) {
      n = row * row;
    } else {
      throw new Error("This should not happen");
    }
    return {
      kind: GridCellKind.Number,
      data: n,
      displayData: n.toString(),
      allowOverlay: false,
    };
  }

  return (
    <DataEditorContainer width={500} height={300}>
      <DataEditor getCellContent={getData} columns={columns} rows={1000} />
    </DataEditorContainer>
  );
}

and here's my index.js page in my empty Next.js project:

import Head from "next/head";
import dynamic from 'next/dynamic'

import "react-responsive-carousel/lib/styles/carousel.min.css";
const DynamicTable = dynamic(() => import('../components/SampleDataGrid'))

export default function Home() {
  return (
    <div className="container">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <DynamicTable />
      </main>
      <div id="portal" />
    </div>
  );
}

I believe this solves the window issue, but now I'm stuck on the following error:

TypeError: (0 , _direction.default) is not a function

I'm happy to move this to a separate issue, but as I mentioned above, I believe this all has to do with Next.js and SSR. One other note for the project is that it's not using TypeScript if that's useful.

Reproducible Repo

from glide-data-grid.

andrecrts avatar andrecrts commented on May 18, 2024

i'm in the same position as you, i don't know if theres something we are missing

from glide-data-grid.

stephensilber avatar stephensilber commented on May 18, 2024

I was able to get it working in my Next.js repo by making sure the component was imported using next/dynamic and made sure to opt-out of webpack 5.

Here's my dynamic import:

import dynamic from "next/dynamic";
const DynamicSheet = dynamic(() => import("./Glidesheet"), { ssr: false });

I did not need any custom loaders or transpile settings

from glide-data-grid.

andrecrts avatar andrecrts commented on May 18, 2024

thanks from y side i set the same version of the direction package and it works, now i have the issue that i cant click or edit any cell on the table but thats another problem. thanks! 👍

from glide-data-grid.

phillipleblanc avatar phillipleblanc commented on May 18, 2024

I believe this solves the window issue, but now I'm stuck on the following error:

TypeError: (0 , _direction.default) is not a function

I'm happy to move this to a separate issue, but as I mentioned above, I believe this all has to do with Next.js and SSR. One other note for the project is that it's not using TypeScript if that's useful.

@stephensilber - I had the same issue you were seeing, but in a create-react-app. The peer dependencies that glide-data-grid uses were incorrect in my project, once I fixed the warnings in yarn I was able to see the data grid show up.

from glide-data-grid.

itchii-06 avatar itchii-06 commented on May 18, 2024

I have the same error:
TypeError: (0 , _direction.default) is not a function
I am using Next.js with Typescript. So I add @types/[email protected]. I was able to see the data grid show up.

Versions I've added

from glide-data-grid.

dvdsgl avatar dvdsgl commented on May 18, 2024

The README has been updated with direction@1

from glide-data-grid.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.