개발자

마이크로 프론트 구현(Nextjs, React)

2024년 07월 12일•조회 250

요구사항 마이크로 프론트엔드로 A라는 프로젝트에서 B라는 프로젝트의 컴포넌트를 사용하고 싶다 프로젝트 설명 ModuleFederationPlugin 사용해서 expose remote 설정 A 프로젝트 (remote) : react, styled-component 사용 B 프로젝트 (expose) : nextjs, scss 사용 첫번째 오류 styled 이 달라서 nextjs 에서 노드가 불러와지지 않는 것 해결 : <noscript id="**next_css__DO_NOT_USE**"></noscript> → 두번째 오류 발생 오류 내용 Cannot read properties of null (reading 'parentNode') TypeError: Cannot read properties of null (reading 'parentNode') at options.insert (webpack- 두번째 오류 Nextjs 에서 expose 할 때 Page 컴포넌트에 있는 useState를 사용 못한다고함 해결 : peerDependencies 로 nextjs 추가 → 오류동일 오류 내용 TypeError: Cannot read properties of null (reading 'useState') at useState (react.development.js:1623:21) at Page (index.js:8:40) react-dom.development.js:18704 The above error occurred in the <Page> component: 참고 : https://dev.to/omher/building-react-app-with-module-federation-and-nextjsreact-1pkh 두번째 오류를 해결해야 되는데 가능한 방법인지 모르겠습니다. 아시는 분은 댁글 남겨주세요~(코드상에 보안상 문제되는 부분은 a b 로 바꿨습니다.

1//remote webpack setting
2plugins: [
3		new ModuleFederationPlugin({
4			name: 'main',
5			filename: 'remoteEntry.js',
6			remotes: {
7				iam: 
8                           `a@https://localhost:3002/_next/static/chunks/remoteEntry.js`,
9			},
10			exposes: {},
11               }),
12		new HtmlWebpackPlugin({
13			template: 'public/index.html',
14		}),
15		new Dotenv({path: `환경변수`}),
16	],
17
18//expose  webpack setting
19config.plugins.push(
20				new NextFederationPlugin({
21					name: 'a',
22					filename: 'static/chunks/remoteEntry.js',
23					exposes: {
24						'./b': './src/pages/index.js',
25                                       shared: {
26						'next/navigation': {singleton: true},
27						'next/router': {singleton: true},
28						recoil: {singleton: true},
29						react: {singleton: true},
30						'@tanstack/react-query': {singleton: true},
31					},
32				}),

micro-frontend-architecture

react

next.js

modulefederationplugin

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

성지수 web developer 님의 질문

답변 0

첫 답변을 기다리고 있어요.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

이미 회원이신가요?

AI 답변

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 07월 12일

프로젝트 구현에 대한 질문을 주셨네요. 먼저, 말씀하신대로 Next.js와 React를 이용해 Micro Frontend 아키텍처를 구현하려는 시도는 매우 멋진 것 같습니다. 여러가지 복잡한 문제들이 있을 수 있겠지만, 모든 사용자 인터페이스를 하나의 단일 페이지 애플리케이션으로 관리하는 전통적인 방식보다 작고 독립적인 프론트엔드 서비스로 나누는 것은 배포, 테스트, 유지 보수 등 다양한 측면에서 많은 이점을 제공할 수 있습니다. 말씀하신 대로 두 번째 오류는 Webpack의 Module Federation Plugin과 React Hook (useState) 사이에 일어나는 호환성 문제로 보입니다. 기본적으로 해당 플러그인은 별도의 JavaScript 실행 컨텍스트에서 코드를 실행하기 때문에, 가장 최근 버전의 React 및 여러 개발 도구와 완벽하게 호환되지 않을 수 있다는 점을 알아두셔야 합니다. 간단한 해결책은 모듈 연합 플러그인에서 공유하려는 모든 리소스가 정적인 것으로 확인되어야 합니다. 따라서 useState와 같은 동적 훅을 공유하는 대신, 컴포넌트를 정적으로 내보내는 것이 필요할 수 있습니다. ```javascript import React, { useState } from 'react'; export default function Component() { const [state, setState] = useState(0); return ( <div onClick={() => setState(state + 1)}> {state} </div> ); } ``` 만약 오류가 계속되면 별도의 wrapper를 사용하여 각 Remote Component를 캡슐화한 후 로컬 상태를 관리해 볼 수도 있습니다. 하지만 이러한 방법으로 문제가 해결되지 않으면 Next.js와 Module Federation 사이의 호환성 문제일 가능성이 높습니다. 이 경우, 현재 plugin을 업데이트하거나 아예 다른 전략을 찾아볼 수도 있겠습니다. 결론적으로 이러한 이슈는 자주 발생하는 것에 속해서 꾸준히 업데이트나 패치 등이 필요합니다. 마지막으로, 개발 중인 프로젝트에서 API 경계 내에서 컴포넌트를 공유하는 구조와 어떤 워크플로우를 가지고 있는지 보다 명확하게 안다면 조금 더 구체적인 해결책을 제시할 수 있을 것 같습니다.

목록으로