dynmic js

[youchaojun]

Can you support dynamic introduction of JS similar to webpack? Is it convenient to give a demo? The loading of webpack is as follows

const element = document.createElement('script')
		element.src = 'http://localhost:4173/assets/remoteEntry.js'
		element.type = 'text/javascript'
		element.async = true
		element.onload = () => {
			reloadUrl = url
			console.log('success')
			resolve(true)
		}
		element.onerror = () => {
			console.error('error')
			reject(false)
		}
		document.head.appendChild(element)

webpack demo

await __webpack_init_sharing__('default')
const container = window[scope] 
await container.init(__webpack_share_scopes__.default)
const factory = await window[scope].get(module)
const Module = factory()
return Module

[youchaojun]

I tried using the demo below, but still reported an error

import { Suspense, lazy } from 'react'
function App() {
	const DigitalPlant = () => {
		const Component = lazy(loadComponent())
		console.log(Component);
		return (
			<Suspense fallback='22'>
				<Component />
			</Suspense>
		)
	}

	const loadComponent = () => {
		return async () => {
			// @ts-ignore
			const remote = await import('http://localhost:4173/assets/remoteEntry.js');
			const url = './Test'
			const comp = await remote.get(url)
			console.log(comp()());
			return comp()()
		}
	}

	return (
		<>
			<p>main</p>
			<DigitalPlant />
		</>
	)
}

export default App

browser error

act.development.js:209 Warning: lazy: Expected the result of a dynamic import() call. Instead received: [object Object]

Your code should look like: 
  const MyComponent = lazy(() => import('./MyComponent'))
    at Lazy
    at Suspense
    at DigitalPlant
    at App
p

[JiaojSun]

Yes, I need that feature, too

[youchaojun]

您好！您的邮件我已收到！我查阅后尽快给您回复！

[JiaojSun]

I tried using the demo below, but still reported an error

import { Suspense, lazy } from 'react'
function App() {
	const DigitalPlant = () => {
		const Component = lazy(loadComponent())
		console.log(Component);
		return (
			<Suspense fallback='22'>
				<Component />
			</Suspense>
		)
	}

	const loadComponent = () => {
		return async () => {
			// @ts-ignore
			const remote = await import('http://localhost:4173/assets/remoteEntry.js');
			const url = './Test'
			const comp = await remote.get(url)
			console.log(comp()());
			return comp()()
		}
	}

	return (
		<>
			<p>main</p>
			<DigitalPlant />
		</>
	)
}

export default App

browser error

act.development.js:209 Warning: lazy: Expected the result of a dynamic import() call. Instead received: [object Object]

Your code should look like: 
  const MyComponent = lazy(() => import('./MyComponent'))
    at Lazy
    at Suspense
    at DigitalPlant
    at App
p

How did you finally solve it

[husayt]

being able to load dynamically declared remotes would make this the viable competitor for webpack based MF implementation

[husayt]

Seems this can be closed with latest release. I am able to load modules dynamically

[youchaojun]

您好！您的邮件我已收到！我查阅后尽快给您回复！

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Hello! I have received your email! I will reply to you as soon as possible after checking it!