-
Notifications
You must be signed in to change notification settings - Fork 347
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
frontend: use nextjs with module federation
- Loading branch information
1 parent
46f3bbe
commit fbdd1ca
Showing
25 changed files
with
2,392 additions
and
413 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| v18 | ||
| v18.19.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| // jest.polyfills.js | ||
| /** | ||
| * @note The block below contains polyfills for Node.js globals | ||
| * required for Jest to function when running JSDOM tests. | ||
| * These HAVE to be require's and HAVE to be in this exact | ||
| * order, since "undici" depends on the "TextEncoder" global API. | ||
| * | ||
| * Consider migrating to a more modern test runner if | ||
| * you don't want to deal with this. | ||
| */ | ||
|
|
||
| const { TextDecoder, TextEncoder } = require('node:util') | ||
|
|
||
| Object.defineProperties(globalThis, { | ||
| TextDecoder: { value: TextDecoder }, | ||
| TextEncoder: { value: TextEncoder }, | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| /// <reference types="next" /> | ||
| /// <reference types="next/image-types/global" /> | ||
|
|
||
| // NOTE: This file should not be edited | ||
| // see https://nextjs.org/docs/basic-features/typescript for more information. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import { NextFederationPlugin } from '@module-federation/nextjs-mf'; | ||
|
|
||
| /** @type {import('next').NextConfig} */ | ||
| const nextConfig = { | ||
| // Optionally, add any other Next.js config below | ||
| reactStrictMode: true, | ||
| swcMinify: true, | ||
| output: 'export', | ||
| images: { // Required to properly export HTML files | ||
| unoptimized: true | ||
| }, | ||
| experimental: { | ||
| // Optimize how packages get loaded in dev mode | ||
| optimizePackageImports: [ | ||
| '@redpanda-data/ui', | ||
| 'react-bootstrap', | ||
| 'react-icons', | ||
| 'lodash', | ||
| '@chakra-ui/react', | ||
| '@chakra-ui/form-control', | ||
| '@chakra-ui/icon', | ||
| '@chakra-ui/layout', | ||
| '@chakra-ui/media-query', | ||
| '@chakra-ui/menu', | ||
| '@chakra-ui/spinner', | ||
| '@chakra-ui/styled-system', | ||
| '@chakra-ui/system', | ||
| '@mui/material', | ||
| 'date-fns', | ||
| 'antd', | ||
| ], | ||
| }, | ||
| webpack: (config) => { | ||
| config.plugins.push( | ||
| /** | ||
| * Module Federation for NextJS only works well in Pages Router | ||
| * https://github.com/module-federation/module-federation-examples/issues/3151#issuecomment-1720250040 | ||
| */ | ||
| new NextFederationPlugin({ | ||
| name: 'rp_console', | ||
| filename: 'static/chunks/embedded.js', | ||
| exposes: { | ||
| // specify exposed pages and components | ||
| './EmbeddedApp': './src/EmbeddedApp', | ||
| './injectApp': './src/injectApp', | ||
| './config': './src/config.ts', | ||
| }, | ||
| }) | ||
| ); | ||
|
|
||
| /** | ||
| * Allow the .js extension in import paths when importing TypeScript files. | ||
| * It is the standard for ECMAScript modules, but not all bundlers have | ||
| * caught up yet. | ||
| * Alternatively, add the plugin option `import_extension=none` in buf.gen.yaml. | ||
| * Required for App | ||
| */ | ||
| config.resolve = { | ||
| ...config.resolve, | ||
| extensionAlias: { | ||
| '.js': ['.ts', '.js'], | ||
| }, | ||
| }; | ||
|
|
||
| /** | ||
| * Required because we use pages router, which does not allow importing CSS directly from our @redpanda-data/ui library. | ||
| * https://github.com/vercel/next.js/discussions/27953#discussioncomment-3616403 | ||
| */ | ||
| config.module?.rules | ||
| .find((rule) => rule.oneOf) | ||
| .oneOf.forEach((rule) => { | ||
| if (rule.issuer?.and?.[0]?.toString().includes("_app")) { | ||
| const and = rule.issuer.and | ||
| rule.issuer.or = [/[\\/]node_modules[\\/]@redpanda-data[\\/]/, { and }] | ||
| delete rule.issuer.and | ||
| } | ||
| }) | ||
|
|
||
| return config; | ||
| }, | ||
| }; | ||
|
|
||
| export default nextConfig; |
Oops, something went wrong.