Skip to content

Conversation

djhi
Copy link
Collaborator

@djhi djhi commented Oct 17, 2025

Problem

Our packages exports are wrong, making them unusable in Node contexts (for instance when using SSR or RSC frameworks)

Solution

  • Use zshy to compile and fix our exports fields
  • Use the newer faker as the old one cannot be used in modern setups
  • Add .js extensions to our lodash imports as it causes issues in ESM setup

How To Test

  • Build with make build
  • Run npm pack in each package you'll want to use in the tests explained below. You'll have to move/copy them in a vendor directory and provide their path in your test application package.json.
  • For the examples below, we'll need ra-core, ra-data-fakerest, ra-i18n-polyglot, ra-language-english and data-generator-retail

ESM

{
  "data-generator-retail": "./vendor/data-generator-retail-5.12.0.tgz",
  "ra-core": "./vendor/ra-core-5.12.0.tgz",
  "ra-data-fakerest": "./vendor/ra-data-fakerest-5.12.0.tgz",
  "ra-i18n-polyglot": "./vendor/ra-i18n-polyglot-5.12.0.tgz",
  "ra-language-english": "./vendor/ra-language-english-5.12.0.tgz",
}
  • Add an /admin route:
// in app/routes.ts
import { type RouteConfig, index, route } from "@react-router/dev/routes";

export default [
  index("routes/home.tsx"),
  route("admin/*", "routes/admin.tsx"),
] satisfies RouteConfig;

// in app/routes/admin.tsx
import { Resource } from "ra-core";
import fakeRestDataProvider from "ra-data-fakerest";
import generateData from "data-generator-retail";
import { Admin, EditGuesser, ListGuesser } from "~/components/admin";

const dataProvider = fakeRestDataProvider(generateData());

export default function AdminRoute() {
  return (
    <Admin dataProvider={dataProvider} basename="/admin">
      <Resource name="products" list={ListGuesser} edit={EditGuesser} />
    </Admin>
  );
}

CJS

  • create a new node-test directory
  • create a package.json and install data-generator-retail from the vendor directory as explained before
{
  "data-generator-retail": "./vendor/data-generator-retail-5.12.0.tgz",
}
  • Add a index.cjs (note the .cjs extension) file with the following content:
const generateData = require("data-generator-retail");

console.log(generateData());
  • Run node ./index.cjs
  • It should work

Additional Checks

  • The PR targets master for a bugfix or a documentation fix, or next for a feature

@djhi djhi added the RFR Ready For Review label Oct 17, 2025
Copy link
Contributor

@slax57 slax57 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Other than that, LGTM! I could not find a project setup where this does not work, so congrats!

@@ -1,4 +1,4 @@
import get from 'lodash/get';
import get from 'lodash/get.js';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: you could update the message in the custom ESLint rule here:

"Named import from lodash should be avoided for performance reasons. Use a default import instead. E.g. `import merge from 'lodash/merge';` instead of `import { merge } from 'lodash';`.",

Comment on lines +14 to +15
import { FormGroupsProvider } from './groups/FormGroupsProvider';
import { getSimpleValidationResolver, type ValidateForm } from './validation';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

noob question: why that change?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I try to avoid importing stuff from barrel files. This improves performances for many tools such as Jest. I update the files I work on when I can

@@ -1,3 +1,4 @@
import type {} from '@mui/material/themeCssVarsAugmentation';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand this line. Can you explain?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We use to have this in a .d.ts file but it causes issues with zshy. As for why we have the line itself, see https://mui.com/material-ui/customization/css-theme-variables/usage/#typescript

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

RFR Ready For Review

Development

Successfully merging this pull request may close these issues.

2 participants