Giter Club home page Giter Club logo

Comments (20)

ruleeeer avatar ruleeeer commented on May 30, 2024 4

@akagamina I have released v1.0.6 that supports webpack-federation component, but you need to pay attention to support only when the output format is systemjs, because the current esm output format of webpack is still an experimental feature

from vite-plugin-federation.

ruleeeer avatar ruleeeer commented on May 30, 2024 3

I will mark it in the documentation to temporarily do not support WebPack exposed components, this feature will be supported in the next version.thanks

from vite-plugin-federation.

sexta13 avatar sexta13 commented on May 30, 2024 2

I'm also facing this issue...but with react.

from vite-plugin-federation.

ruleeeer avatar ruleeeer commented on May 30, 2024 2

Try upgrading to version 1.0.4 to fix this, but note that only host support vite dev mode

from vite-plugin-federation.

ruleeeer avatar ruleeeer commented on May 30, 2024 2

Could you show me the remote Federation related configuration?thanks

from vite-plugin-federation.

ruleeeer avatar ruleeeer commented on May 30, 2024 2

I found that you are like using WebPack to build, sorry, the current plugin does not support WebPack, it can only run in Vite and Rollup

from vite-plugin-federation.

akagamina avatar akagamina commented on May 30, 2024 1

I upgraded and the problem was solved thank you :)

but I'm getting "remote.init not a function error" right now.


__x00__virtual:__federation__:26 Uncaught (in promise) TypeError: remote.init is not a function
    at Object.ensure (__x00__virtual:__federation__:26)`

and when I go into the error;

import { injectQuery as __vite__injectQuery } from "/@vite/client";
const remotesMap = {
  "core": () => import("http://localhost:3030/remoteEntry.js")
};
const processModule = (mod) => {
  if (mod && mod.__useDefault) {
    return mod.default;
  }
  return mod;
}

const shareScope = {
  
};

async function __federation_import(name){
  return import(__vite__injectQuery(name, 'import'));
}

const initMap = {};
           
export default {
  ensure: async (remoteId) => {
    const remote = await remotesMap[remoteId]();
    if (!initMap[remoteId]) {
      remote.init(shareScope); // Uncaught (in promise) TypeError: remote.init is not a function
      initMap[remoteId] = true;
    }
    return remote;
  }
};

from vite-plugin-federation.

ruleeeer avatar ruleeeer commented on May 30, 2024 1

if there is still a problem, I may need a sandbox case.

from vite-plugin-federation.

akagamina avatar akagamina commented on May 30, 2024 1

I'm waiting with excitement :)

from vite-plugin-federation.

ruleeeer avatar ruleeeer commented on May 30, 2024 1

Or you can wait for the babel-Plugin to support the syntax, which is currently recognized but not translated
image

from vite-plugin-federation.

ruleeeer avatar ruleeeer commented on May 30, 2024 1

Sorry, I have forgotten it, and only Host supports dev mode, Remote must use build & service mode.

from vite-plugin-federation.

ruleeeer avatar ruleeeer commented on May 30, 2024 1

@akagamina If you are ready to use it, you can refer to the simple-react-webpack and vue3-demo-webpack projects under examples.I already feel that some other things will happen,If there is a problem, you can commit a new issue and @ruleeeer

from vite-plugin-federation.

ruleeeer avatar ruleeeer commented on May 30, 2024

If possible, please provide a project or your configuration to help us quickly locate whether the problem is from the configuration(include remote and host) or something else

from vite-plugin-federation.

akagamina avatar akagamina commented on May 30, 2024

Of course

This is the core app that exposes components (Vue2)

 plugins: [
            new ModuleFederationPlugin({
                name: 'core',
                filename: 'remoteEntry.js',
                exposes: {
                    sidebar: './src/layout/Sidebar',
                },
                shared: ['vue'],
            }),
        ],

and this child app configuration (Vue3 - Vite)

import federation from "@originjs/vite-plugin-federation";

 plugins: [
            Vue({
                include: [/\.vue$/, /\.md$/],
            }),
            Pages(),
            Layouts(),
            federation({
                name: "new-lookup",
                filename: "remoteEntry.js",
                remotes: {
                    core: "http://localhost:3030/remoteEntry.js"
                },
            }),
        ],

and this is remoteEntry.js;

var moduleMap = {
	"sidebar": function() {
		return __webpack_require__.e("src_layout_Sidebar_vue").then(function() { return function() { return (__webpack_require__(/*! ./src/layout/Sidebar */ "./src/layout/Sidebar.vue")); }; });
	}
};

from vite-plugin-federation.

ruleeeer avatar ruleeeer commented on May 30, 2024

em......Could you try this?
exposes: { sidebar: './src/layout/Sidebar', } =>exposes: { './sidebar': './src/layout/Sidebar', }

from vite-plugin-federation.

akagamina avatar akagamina commented on May 30, 2024

I already tried your way but not work. I can't reproduce it because of its private project.

from vite-plugin-federation.

zgid123 avatar zgid123 commented on May 30, 2024

I faced this error 3 days ago, now I can fix it with new version. But I encounter a new issue

remote app vite.config.ts

import { resolve } from 'path';
import { readdirSync } from 'fs';
import detect from 'detect-port';
import { defineConfig, UserConfigExport } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import federation from '@originjs/vite-plugin-federation';

import pkg from './package.json';

export default async function config(): Promise<UserConfigExport> {
  const port = await detect(8000);

  const items = readdirSync(resolve(__dirname, 'src'));

  return defineConfig({
    server: {
      port,
    },
    plugins: [
      reactRefresh(),
      federation({
        name: 'testApp',
        filename: 'remoteEntry.js',
        exposes: {
          './App': './src/App',
        },
        // shared: {
        //   react: {
        //     // eager: true,
        //     requiredVersion: pkg.dependencies.react,
        //   },
        //   'react-dom': {
        //     // eager: true,
        //     // import: false,
        //     requiredVersion: pkg.dependencies['react-dom'],
        //   },
        //   'react-router-dom': {
        //     // eager: true,
        //     // import: false,
        //     requiredVersion: pkg.dependencies['react-router-dom'],
        //   },
        // },
        shared: ['react', 'react-dom', 'react-router-dom'],
      }),
    ],
    resolve: {
      alias: items.map((item) => {
        if (/\.(t|j)sx?$/.test(item)) {
          const name = item.replace(/\.(t|j)sx?$/, '');

          return {
            find: name,
            replacement: `/src/${name}`,
          };
        } else {
          return {
            find: item,
            replacement: `/src/${item}`,
          };
        }
      }),
    },
  });
}

main app vite.config.ts

import { resolve } from 'path';
import { readdirSync } from 'fs';
import detect from 'detect-port';
import { defineConfig, UserConfigExport } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import federation from '@originjs/vite-plugin-federation';

import pkg from './package.json';

export default async function config(): Promise<UserConfigExport> {
  const port = await detect(3000);

  const items = readdirSync(resolve(__dirname, 'src'));

  return defineConfig({
    server: {
      port,
    },
    optimizeDeps: {
      exclude: ['testApp'],
    },
    plugins: [
      reactRefresh(),
      federation({
        remotes: {
          testApp: 'http://localhost:8000/assets/remoteEntry.js',
        },
        shared: {
          react: {
            eager: true,
            singleton: true,
            requiredVersion: pkg.dependencies.react,
          },
          'react-dom': {
            eager: true,
            singleton: true,
            requiredVersion: pkg.dependencies['react-dom'],
          },
          'react-router-dom': {
            eager: true,
            singleton: true,
            requiredVersion: pkg.dependencies['react-router-dom'],
          },
        },
      }),
    ],
    resolve: {
      alias: items.map((item) => {
        if (/\.(t|j)sx?$/.test(item)) {
          const name = item.replace(/\.(t|j)sx?$/, '');

          return {
            find: name,
            replacement: `/src/${name}`,
          };
        } else {
          return {
            find: item,
            replacement: `/src/${item}`,
          };
        }
      }),
    },
  });
}

When building the remote app, I receive this error

[vite:esbuild-transpile] Transform failed with 1 error:
assets/__federation_expose_App.js:2:18: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")

Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
1  |  import {importShared} from './__federation_fn_import.js'
2  |  const {r:react} = await importShared('react')
   |                    ^
3  |  import { S as Stack, H as HStack, T as Text, a as Heading, D as Divider, b as Table, c as Thead, d as Tr, e as Th, f as Tbody, g as Td, R as Route } from './vendor.b29cb9ce.js';
4  |  import './__federation_shared_react-dom.js';

error during build:
Error: Transform failed with 1 error:
assets/__federation_expose_App.js:2:18: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")

If I remove shared in remote config, I don't receive this error, but it will cause another error.

Also, can we run the project without running build & serve? Because if we do that, we cannot use HMR.

Thank you for creating this awesome package.

from vite-plugin-federation.

ruleeeer avatar ruleeeer commented on May 30, 2024

If the problem is not the same, I suggest opening a new issue, so that it is easy to track the problem @zgid123

from vite-plugin-federation.

ruleeeer avatar ruleeeer commented on May 30, 2024

This problem is temporarily added to the Vite's configuration file.Because ES2021 does not support top-level await

build: {
    target: 'esnext'
  }

from vite-plugin-federation.

zgid123 avatar zgid123 commented on May 30, 2024

@ruleeeer thank you so much. Let me test again

from vite-plugin-federation.

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.