You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/table/README.md
+48-1Lines changed: 48 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -41,11 +41,13 @@ If you're using **Tailwind CSS v4**, you need to add the `@source` directive so
41
41
42
42
```css
43
43
@import"tailwindcss";
44
-
@source "@tablecraft/table";
44
+
@source "../node_modules/@tablecraft/table/src";
45
45
```
46
46
47
47
This tells Tailwind to scan the package's source files for class names. Without it, the table component styles may not be generated correctly.
48
48
49
+
> **Note:** The path is relative to your CSS file. Adjust if your CSS file is in a different location.
50
+
49
51
## Features
50
52
51
53
-**Auto-generated columns** — Columns generated from your table config metadata
@@ -156,6 +158,51 @@ function UsersPage() {
156
158
}
157
159
```
158
160
161
+
## Troubleshooting
162
+
163
+
### "Invalid hook call" Error (Duplicate React)
164
+
165
+
If you see this error:
166
+
167
+
```
168
+
Invalid hook call. Hooks can only be called inside of the body of a function component.
169
+
You might have more than one copy of React in the same app.
170
+
```
171
+
172
+
**Why it happens:**`@tablecraft/table` depends on packages like `@radix-ui/react-popover` which also depend on React. Some package managers may install a separate copy of React inside the package's own `node_modules`, causing two React instances to run at the same time — which breaks React hooks.
173
+
174
+
**Fix for Vite:**
175
+
176
+
```ts
177
+
// vite.config.ts
178
+
import { defineConfig } from"vite";
179
+
180
+
exportdefaultdefineConfig({
181
+
resolve: {
182
+
dedupe: ["react", "react-dom"],
183
+
},
184
+
});
185
+
```
186
+
187
+
**Fix for Webpack / Next.js:**
188
+
189
+
```js
190
+
// next.config.js or webpack.config.js
191
+
module.exports= {
192
+
webpack: (config) => {
193
+
config.resolve.alias= {
194
+
...config.resolve.alias,
195
+
react:require.resolve("react"),
196
+
"react-dom":require.resolve("react-dom"),
197
+
};
198
+
return config;
199
+
},
200
+
};
201
+
```
202
+
203
+
This forces your bundler to use a single copy of React across all dependencies.
0 commit comments