Light

harshpatel1408 / nextjs_microfrontend Goto Github PK

View Code? Open in Web Editor NEW

14.0 1.0 10.0 68 KB

JavaScript 54.02% CSS 45.98%

nextjs_microfrontend's Introduction

NextJS micro-frontend example

Let’s build micro-frontend with React and Next.js

How to run:

cd fe1
run yarn build
cd fe2
run yarn build
host remoteEntry.js & remoteEntry2.js from fe1 & fe2 build. located inside .next/server.
cd fe3
run yarn build
run yarn start [Check hosted URL in next.config.js]

nextjs_microfrontend's People

Stargazers

Watchers

Forkers

ammonk rmarku aburizalan stivncastillo underaj minhnguyenelca lucas0530 dasarishiv amit090shukla younespro1337

nextjs_microfrontend's Issues

Help: Sorry, but I could not load the Header component on the host container

Hello there I hope you can help me; I wanted to run the project but I am getting an error, when you are running it on your local are you getting the same error message?

Note: As you can see I am running the Header component on port 3000 and the consumer host app on 3002.

Thanks in advance.

update this example : as this is not working

[    ] info  - Generating static pages (0/3)TypeError: squareRoot is not a function
    at Home (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/.next/server/pages/index.js:69:25)
    at Wc (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: squareRoot is not a function
    at Home (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/.next/server/pages/index.js:69:25)
    at Wc (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
info  - Generating static pages (3/3)

> Build error occurred
Error: Export encountered errors on following paths:
        /
    at /Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/next/dist/export/index.js:395:19
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Span.traceAsyncFn (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/next/dist/trace/trace.js:79:20)
    at async /Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/next/dist/build/index.js:1078:21
    at async Span.traceAsyncFn (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/next/dist/trace/trace.js:79:20)
    at async /Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/next/dist/build/index.js:955:17
    at async Span.traceAsyncFn (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/next/dist/trace/trace.js:79:20)
    at async Object.build [as default] (/Users/tkssharma/tkssharma/tkssharma/POC/fe3/node_modules/next/dist/build/index.js:62:29)

Code not working.

The code as is in the repo is not working. Follow the steps on the main readme and it doesn't work. Here is a video of the steps.

uframe.mp4

blank project

i cant find the files inside fe1, fe2 and fe3

Error: document is not defined

How to fix this?

http://localhost:8888/remoteEntry.js not working

I'm trying this url http://localhost:8888/remoteEntry.js but getting 404. I'm doing this setup in ubuntu, Please suggest me how can i access remoteEntry.js file

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.