react-admin icon indicating copy to clipboard operation
react-admin copied to clipboard

Fix package exports for vitest

Open smeng9 opened this issue 2 years ago • 6 comments

Replaces #9309 and #9310

Main differences with previous merge requests are omitting the type field so we don’t need to rename .js file extensions to .cjs or .mjs

Also adds * to match arbitrary files in case some users directly import certain internal files in the package.

The reason for this package.json change is because vitest parses package entry points according to the latest node.js package entry point format here https://nodejs.org/api/packages.html#package-entry-points

smeng9 avatar Oct 04 '23 23:10 smeng9

Hi @djhi any chance that this can be reviewed and merged so we can pass the vitest https://stackblitz.com/edit/vitejs-vite-2etbdy?file=src%2Fposts.test.tsx here and start using vitest in our projects? Thanks!

smeng9 avatar Oct 11 '23 18:10 smeng9

Rebased with new package i18next introduced since 4.15

smeng9 avatar Oct 12 '23 16:10 smeng9

Unfortunately this seems to break remix integration. We'll investigate to make sure it works in all cases

djhi avatar Oct 13 '23 12:10 djhi

FTR, the error we get with Remix:

❯ npm run dev

> dev
> remix dev --manual


 💿  remix dev

 info  building...
 info  built (11.4s)
file:///home/slax57/workspaces/remix-admin/build/index.js?t=1697200739546.5735:200
import { Admin, Resource, ListGuesser } from "react-admin";
         ^^^^^
SyntaxError: Named export 'Admin' not found. The requested module 'react-admin' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react-admin';
const { Admin, Resource, ListGuesser } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at ModuleJob.run (node:internal/modules/esm/module_job:190:5)

slax57 avatar Oct 13 '23 13:10 slax57

I have checked why Remix is failing to parse the esm module and use the cjs. This can be fixed by adding a {type: module} field in the package.json inside the esm build folder.

However then it comes with another issue: file extension. Remix does not have a resolver that can automatically infer file extensions like vite and webpack. TypeScript won't automatically add the extension to the import. It requires all the relative imports to add a .js extension to correctly resolve files. https://www.typescriptlang.org/docs/handbook/esm-node.html#type-in-packagejson-and-new-extensions E.g. in https://github.com/marmelab/react-admin/blob/master/packages/react-admin/src/index.ts#L1 would become export * from './Admin.js'; and apply the same thing for all the files in the code base. I believe this change is too large. What's your thought on this?

smeng9 avatar Oct 13 '23 21:10 smeng9