Comments (9)
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.
any chance you have a minimal repro case?
from glide-data-grid.
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.
from glide-data-grid.
i'm in the same position as you, i don't know if theres something we are missing
from glide-data-grid.
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.
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.
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.
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.
The README has been updated with direction@1
from glide-data-grid.
Related Issues (20)
- Freeze the right column
- Lock first column from editing
- [Bug] Issue with peer dependencies unables fresh installation
- Screen capture not working with Usersnap HOT 1
- Need Latest build similar to 5.3.2
- Copy/paste error in http connection
- Whether the header allows line breaks HOT 1
- crashes when row is too big
- Resizing columns UX issue
- Row marker header checkbox is incorrectly shown for single row selection
- Unable to run data grid tests outside of your library
- Dropdown Cell no longer displays values that are missing from allowed values
- `onKeyDown` gives colum index 1 instead of 0
- Add ability to remove checkbox in rowMarkers header HOT 1
- Maximum update depth exceed error
- when rowMarkers enabled, onColumnProposeMove receives off-by-1 indexes
- Getting blank view while rendering more than 480 rows
- onColumnProposeMove doesn't prevent actual column move
- Provide a `clickable` row marker kind that just allows selecting the blank row marker cell
- possible bug in packages/core/src/internal/data-grid/render/data-grid-render.header.ts
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from glide-data-grid.