Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vite-vite example top-level-await error #244

Closed
ITSWYoo opened this issue Jan 24, 2025 · 3 comments
Closed

vite-vite example top-level-await error #244

ITSWYoo opened this issue Jan 24, 2025 · 3 comments

Comments

@ITSWYoo
Copy link

ITSWYoo commented Jan 24, 2025

import { federation } from '@module-federation/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import topLevelAwait from 'vite-plugin-top-level-await';

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    open: true,
    port: 5176,
    origin: 'http://localhost:5176',
  },
  preview: {
    port: 5176,
  },
  base: 'http://localhost:5176/testbase',
  plugins: [
    react({ jsxImportSource: '@emotion/react' }),
    federation({
      name: '@namespace/viteViteRemote',
      exposes: {
        './App1': './src/App1',
        './App2': './src/App2.jsx',
        './AgGridDemo': './src/AgGridDemo.jsx',
        './MuiDemo': './src/MuiDemo.jsx',
        './StyledDemo': './src/StyledDemo.jsx',
        './EmotionDemo': './src/EmotionDemo.jsx',
        '.': './src/App.jsx',
      },
      filename: 'remoteEntry-[hash].js',
      manifest: true,
      shared: {
        vue: {},
        'react/': {},
        react: {
          requiredVersion: '18',
        },
        'react-dom/': {},
        'react-dom': {},
        'styled-components': { singleton: true },
        'ag-grid-community/': {},
        'ag-grid-react': {},
        '@emotion/react': {},
        '@emotion/styled': { singleton: true },
        '@mui/material': {},
      },
    }),
    // If you set build.target: "chrome89", you can remove this plugin
    topLevelAwait({
      // The export name of top-level await promise for each chunk module
      promiseExportName: '__tla',
      // The function to generate import names of top-level await promise in each chunk module
      promiseImportName: (i) => `__tla_${i}`,
    }),
  ],
  build: {
    target: 'chrome87',
    rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
      },
    },
  },
});
Image

remote folder in vite-vite example
Even if you change the target to chrome87 and use topLevelAwait when building, an error occurs.

@ITSWYoo ITSWYoo changed the title vite-vite example top level await error vite-vite example top-level-await error Jan 24, 2025
@gioboa
Copy link
Collaborator

gioboa commented Jan 24, 2025

Thanks @ITSWYoo for looking at this library.
I see, thanks for your report. Would you like to have a look at this issue?

@ITSWYoo
Copy link
Author

ITSWYoo commented Jan 31, 2025

The issue is Menci/vite-plugin-top-level-await#63
It is expected that this will be resolved through PR.
Therefore, I will close the issue.

@ITSWYoo ITSWYoo closed this as completed Jan 31, 2025
@gioboa
Copy link
Collaborator

gioboa commented Jan 31, 2025

Thanks for your update 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants