refinedev/refine · warning

If you use `useDataGrid` hook, you need to use `DataGrid` el

Error message

If you use `useDataGrid` hook, you need to use `DataGrid` element.

What it means

Thrown (as a console.warn plus early return) by the refine codemod `use-data-grid-columns` transformation. The codemod found a `useDataGrid()` hook call and tried to locate a matching `<DataGrid ...>` JSX element in the same file to attach the generated `columns` prop; none was found, so the transformation is skipped. The hook and component are designed as a pair — `useDataGrid`'s returned `dataGridProps` are meant to be spread onto a `DataGrid`.

Source

Thrown at packages/codemod/src/transformations/use-data-grid-columns.ts:55

    (p.node.arguments[0] as unknown as ObjectExpression).properties =
      propertiesWithoutColumns;

    return p.node;
  });
};

const addColumnsToUseDataGrid = (j: JSCodeshift, root: Collection<any>) => {
  const dataGridElement = root.find(j.JSXElement, {
    openingElement: {
      name: {
        name: "DataGrid",
      },
    },
  });

  if (dataGridElement.length === 0) {
    console.warn(
      "If you use `useDataGrid` hook, you need to use `DataGrid` element.",
    );
    return;
  }

  dataGridElement.forEach((path) => {
    const hasColumnsAttribute = path.node.openingElement.attributes.find(
      (attribute) => (attribute as JSXAttribute).name?.name === "columns",
    );

    if (hasColumnsAttribute) {
      return;
    }

    path.node.openingElement.attributes.push(
      j.jsxAttribute(
        j.jsxIdentifier("columns"),
        j.jsxExpressionContainer(j.identifier("columns")),

View on GitHub (pinned to 779d52a20e)

Solutions

1. Move the `<DataGrid>` JSX into the same file as the `useDataGrid` call (or re-run the codemod per-file where they coexist) and re-run the codemod
2. If the grid is wrapped/aliased, temporarily rename it back to `DataGrid` for the codemod run, then restore
3. Apply the columns migration manually: pass the generated column defs to your custom grid component's columns prop

Example fix

// before (file A: hook only)
const { dataGridProps } = useDataGrid();
// after (same file)
const { dataGridProps } = useDataGrid();
return <DataGrid {...dataGridProps} columns={columns} />;

// check co-location before running the codemod
const src = fs.readFileSync(file, 'utf8');
if (/useDataGrid\s*\(/.test(src) && !/<DataGrid[\s>]/.test(src)) {
  console.warn(`Skip ${file}: useDataGrid present but no <DataGrid> element`);
}

const hasPair = (code: string) =>
  /useDataGrid\s*\(/.test(code) && /<DataGrid[\s>]/.test(code);

When it happens

Trigger: Running the codemod CLI on a file that calls `useDataGrid` (or `useDataGrid` variant selected by the transformer) but contains no `<DataGrid>` JSX element — e.g., the hook is used in a parent and the grid lives in a child component, or the element is imported under a different name/aliased.

Common situations: Splitting a list page into container/presentational components; renaming or wrapping DataGrid in a custom component (`<MyGrid>`); running the pckm/codemod over partial files after manual refactors.

Related errors

• jscodeshift exited with code ${result.exitCode}
• Invalid action type
• useGetLocale cannot be called without i18n provider being de
• Unsupported properties are found in `routerProvider` prop. Y
• @packages/hasura: multiple filters present. Group multiple p

AI-assisted analysis of refinedev/refine@779d52a20e (2026-08-27). Data as JSON: /api/errors/3b4205f0cf8d900a. Report an issue: GitHub.