static import of admin modules gives an error

[PawelSuwinski]

Description

Dynamic import of admin modules works fine, used like here: https://github.com/api-platform/api-platform/blob/62ae3e62685d3b7500049606f7acb9e25dd7fe49/pwa/pages/admin/index.tsx#L9

But static import gives error:

// pages/admin/index.tsx
import Head from "next/head";
import { useEffect, useState } from "react";
import { ListGuesser } from "@api-platform/admin";

const MyList = props =>
  <ListGuesser {...props} hasShow={false} />;

const Admin = () => {
(...)

Uncaught Error: require() of ES Module /srv/app/node_modules/.pnpm/@api-platform+api-doc-parser@0.15.7/node_modules/@api-platform/api-doc-parser/lib/cjs/index.js from /srv/app/node_modules/.pnpm/@api-platform+admin@3.3.5_q3lhx7j73grdkfcigv3e6242um/node_modules/@api-platform/admin/lib/cjs/hydra/dataProvider.js not supported.
index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /srv/app/node_modules/.pnpm/@api-platform+api-doc-parser@0.15.7/node_modules/@api-platform/api-doc-parser/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

As a workaround I can create MyList component inside Admin component using dynamically imported modules, but without additional trics like useRef passing it as a prop to ResourceGuesser force it to render every time.

[alanpoulain]

Maybe it was not a good idea to add type: module in the api-doc-parser :sweat_smile:

[alanpoulain]

Could you try again with the latest version?

[PawelSuwinski]

Now it is:

Error: require() of ES Module /srv/app/node_modules/.pnpm/jsonref@8.0.8/node_modules/jsonref/dist/index.js from /srv/app/node_modules/.pnpm/@api-platform+api-doc-parser@0.15.8/node_modules/@api-platform/api-doc-parser/lib/cjs/openapi3/handleJson.js not supported.
Instead change the require of index.js in /srv/app/node_modules/.pnpm/@api-platform+api-doc-parser@0.15.8/node_modules/@api-platform/api-doc-parser/lib/cjs/openapi3/handleJson.js to a dynamic import() which is available in all CommonJS modules.

[alanpoulain]

I've changed my mind: it's simpler to have this package ESM only. You need to make sure you are using ESM as well (see https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c). I'm closing this issue but feel free to continue the discussion.

[PawelSuwinski]

You need to make sure you are using ESM as well

So far I am using AP Distribution and made assumption that everything fits together, although it was latest from the main branch. Anyway with @api-platform/admin 3.3.7 static import works as expected, thanks :).

[alanpoulain]

It was not updated yet :wink: Great to know that it works! All the module changes are hard to follow and it's very difficult to make a compatible library.