Code Monkey home page Code Monkey logo

Comments (2)

ScriptedAlchemy avatar ScriptedAlchemy commented on May 29, 2024

I think this must be an old example. What are you looking for in the example?

if you want non UI module, it should work the same, just import the utility and use it without react lazy etc?

from module-federation-examples.

bahadirh avatar bahadirh commented on May 29, 2024

what i'd like to achieve is that on top of react/nextjs components, we have hooks, API handlers, basic general-use functions etc. in our projects to share with module federation. the closest concept i could find to do that was sharing non-UI modules.

in the react-nextjs/nextjs-host-remote example, i created a function that just console.logs a text and added it to NextFederationPlugin config in react-nextjs/nextjs-host-remote/remote/next.config.js. here's the plugin config after this change:

new NextFederationPlugin({
    name: 'remote',
    exposes: {
        './nextjs-remote-component': './components/nextjs-remote-component.js',
        './basic-function': './helpers/basic-function.js',  // only this line is added, the rest is from the example
    },
    shared: {},
    filename: 'static/chunks/remoteEntry.js',
})

Here's the example function i wanted to share with module federation, defined in newly-created react-nextjs/nextjs-host-remote/remote/helpers/basic-function.js file:

export default () => console.log('console log from federated function')

below is how i tried to use it in the host project next to remote in the same example, inside react-nextjs/nextjs-host-remote/host/pages/index.js:

import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import dynamic from 'next/dynamic';

// import basicFunction from 'remote/basic-function';
const basicFunction = import('remote/basic-function'); // tried the `import` above too, got the same error in the screenshot below

const NextjsRemoteComponent = dynamic(() => import('remote/nextjs-remote-component'), {
  ssr: false,
});

export default function Home() {
  basicFunction();

  return <></>;
}

i deleted most of the html in the return statement, since it's not required in the setup i want to achieve.

here's the screenshot of the error i get in the host app when i visit the page:
image

i don't know what's missing in this configuration. i didn't touch rest of the files, only auto-generated package-lock.json files.

how can i achieve sharing a non-UI module in this configuration?

from module-federation-examples.

Related Issues (20)

Recommend Projects

  • React photo React

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

  • Vue.js photo Vue.js

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

  • Typescript photo Typescript

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

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

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

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.