How can i use getStaticPath, getStaticProps, and getServerSideProps in a dynamic page?

[skky-y]

I'm now configuring MFA with module federation with Next.js.

The issue occurs when trying to import getStaticPaths, getStaticProps, getServerSideProps, etc., in dynamic pages.

• TypeError: Method Promise.prototype.then called on incompatible receiver #<Promise>
• TypeError [ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING]: A dynamic import callback was not specified.

I'm curious about the reason for the errors occurring and would appreciate it if you could let me know if I'm using them incorrectly.

code

// App A 
// Path: articles/[slug]/index.tsx

function Page {
	...
}


export default Page;

export const getStaticProps: GetStaticProps = async ({ params }) => {
  ...
};

export const getStaticPaths = async () => {
  ...
};

// Shell
// Path: articles/[slug]/index.tsx

import dynamic from "next/dynamic";
import { GetStaticPaths, GetStaticProps } from "next";

function Page(props: Record<string, any>) {
  return <FederatedPage {...props} />;
}

export default Page;

export const getStaticProps: GetStaticProps = async (context) => {
  const page = await import("appA/article");

  return page.getStaticProps(context);
};

export const getStaticPaths: GetStaticPaths = async () => {
  const page = await import("appA/article");

  return page.getStaticPaths();
};

full error code

TypeError: Method Promise.prototype.then called on incompatible receiver #<Promise>
    at Proxy.then (<anonymous>)
    at Proxy.proxiedFunction (webpack-internal:///../../node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]/node_modules/@module-federation/nextjs-mf/dist/src/plugins/container/runtimePlugin.js:91:40)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'TypeError',
  page: '/articles/...'
 }
(null)

(node:20520) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
node:internal/modules/esm/utils:213
  throw new ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING();
        ^
TypeError [ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING]: A dynamic import callback was not specified.
    at importModuleDynamicallyCallback (node:internal/modules/esm/utils:213:9)
    at next-mdx-remote/serialize (remoteEntry.js:248:1)
    at __webpack_require__ (remoteEntry.js:457:33)
    at eval (webpack-internal:///./src/pages/articles/[slug]/index.tsx:13:83)
    at __webpack_require__.a (remoteEntry.js:541:13)
    at eval (webpack-internal:///./src/pages/articles/[slug]/index.tsx:1:21)
    at ./src/pages/articles/[slug]/index.tsx (__federation_expose_article-fd1b51989f4623d1.js:845:1)
    at __webpack_require__ (remoteEntry.js:457:33)
    at remoteEntry.js:106:118
    at onLoad (webpack-internal:///../../node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]/node_modules/@module-federation/nextjs-mf/dist/src/plugins/container/runtimePlugin.js:73:40) {
  code: 'ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING'
}

Node.js v21.6.2