static import of admin modules gives an error

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 😅

[alanpoulain]

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