ScriptedAlchemy / webpack-external-import

Dynamically import modules from other webpack bundles. Painless code sharing between separate apps
BSD 3-Clause "New" or "Revised" License
415 stars 42 forks source link

Cannot load same component twice #182

Closed brussev closed 4 years ago

brussev commented 4 years ago

I tried to use this library to see if I can load components from different chunks.It works super when you want to load a component for the first time but there is an issue when you want to interleave the same component twice. Basically it does not do the request to the app at all.. I tried to load manifest everytime I load the component but still it doesn't work. It does not go to the console.log after the interleaved and also there is not an error at all..I tried to fetch the components once and store them but then I have an issue with the internal deps.Can you give me an advice what's wrong?

P.S. I am using webpack-import 2.2.3 version.


const BasicComponent = (props) => {
    const [components, setComponents] = useState(null);

    useEffect(() => {
        async function getComp() {
            try {
                await corsImport(`http://test.local:3002/importManifest.js?${Date.now()}`);
                // eslint-disable-next-line no-undef
                __webpack_require__
                    .interleaved(`${props.components[0].app}/${props.components[0].name}`)
                    .then((comp) => {
                        // const fetchedComponents = await Promise.all(props.components.map((x) => __webpack_require__.interleaved(`${x.app}/${x.name}`)));
                        console.log('Testing');
                        setComponents([comp.default]);
                    });

            } catch (err) {
                console.log('error', err);
            }

        }
        getComp();
    }, []);

    return (
        <div>
            {!components &&
                <p>Loading..</p>
            }
            {components && components.map((x, index) => {
                return React.createElement(x);
            })}
        </div>
    );
};