dynamic imports using full-urls breaks fast refresh

[peter-mouland]

An app I'm building is using dynamic imports to load components on the fly. Out setup is to used CDN urls within the dynamic import (so that the pages/components are isolated at build time), which at dev-time is the localhost url.

e.g.

            // modulePath = http://192.168.1.10:5000/verticals/webapp.login/LOCAL/index.mjs
            import(modulePath).then((module) => ({
                default: module.default,
            })),

As a test the code and fast-refresh work if i replace the above with:

            import('../../../../verticals/webapp.login/src/login.js').then((module) => ({
                default: module.default,
            })),

Do you think this is something that is possible to fix within this plugin, or are there some known technicalities that may make this a challenge?

[PepsRyuu]

I'm a bit confused here, but if I'm understanding it correctly, it's impossible to have HMR work with completely external code. The reason why is because that code would not be bootstrapped with any HMR code and the bundler would not be aware of its existence either.

The reason why the latter works, is because it's a static string, so the default behaviour is to include it as part of the dev build and output a separate chunk which is bootstrapped with the required HMR code.

[peter-mouland]

hey - I've jsut done an experiement within your example dir and seem like it works ok for you. basically having multiple entry points to allow the dynamic import components by url (rather than disk location), so looks like i have more digging to see wy it's not working for my setup. thanks anyway

// config
    input: {
        main: './src/main.js',
        counter: './src/Counter.js',
    },
   ...

        const vertical = 'counter'
        const CounterUrl = `http://localhost:9001/${vertical}.[hash].js`
        import(CounterUrl).then(component => {
            this.activeComponent = component.default;
            this.forceUpdate();
        });