Dynamic imports on mobile device: Cannot connect to server

I’m optimizing my app by using dynamic imports and React Loadable. This works just fine on a desktop browser, it’s just awesome!

However, if I try to run the same code under iOS or Android, I am getting this error in the console:

Are dynamic imports limited to desktop browsers, or am I doing something wrong here?

Oh, I just saw that it’s attempting to load from localhost, which cannot work. Why isn’t Meteor translating it to the same host as the app is being loaded from?

Now also tried the meteor/npdev:react-loadable port, but it didn’t work either. In addition to the localhost problem, it won’t support forwarding refs to the target component.

This worked with the regular version of React Loadable.

Are you doing a dynamic import for a cordova app? It is useless for a cordava app because the entire client codebase is being included in the build and installed when you install the cordova app

Nope. I am embedding the Meteor app in a Unity app. So it’s basically a regular web view with all its capabilities.

Ok, seems as if I am not the only one:

Are you on development? If yes, you need to set the IP address of your local machine as the host url of your meteor app

I did this for now, to workaround the problem. However, I don’t really understand why this is necessary once you’re using dynamic imports. Before, it worked without that. The thing is, the IP changes pretty often, and it also makes it more complicated to share a project with other team members. Before, they just had to npm start the project, now they have to adjust the IP address to make it work.

Instead of localhost, I use a dynamic ip with one of my domains with namecheap; but there are also free dynamic ip services, wouldn’t that help?

We have a separate command for this which executes a bash script to get the local ip address of the machine and use that as host url while at the same time starting our development server. We use this when we need to test on a mobile device. It was configured by our DevOps engineer. Pretty convenient but I don’t have a single idea how it works behind the scene

Thanks for the info. Unfortunately, that won’t work for us, as we have developers on both macOS and Windows. I was looking for a cross-platform script (sth like cross-env), but couldn’t find one so far. The only solutions people recommended were related to webpack (or shell scripts).

I tried both localtunnel and sharetunnel. They were pretty unrealiable. Very often, they would drop the domain name once restarted. There’s a looong issue about that on the localtunnel github repo. The only reliable solution I found was ngrok, but that’s quite pricey.

Besides, it would only work for one developer at a time. Or how would you set it up in a way multiple people could use the tunnel from their own local locations?

Bash works on Linux, MacOs, and Windows 10 (with linux shell)

The solution I use needs no tunnel. There’s one subdomain per developer, for which dynamic dns is configured (via namecheap, where the domain name is registered). For this to work, a port forwarding needs to be set on the DSL router which forwards the request from the router to the actual developer server. It has never failed us.

1 Like

Ok. But that still means that every developer has to maintain their own configuration (to set the right domain)? So it’s not: checkout from git - npm start - play.

I’m still wondering why Meteor can’t just pick the same server where the app came from to download the dynamic imports.