How do I set up dynamic imports correctly (for beyond localhost)?

Question

I followed https://docs.meteor.com/packages/dynamic-import.html to set up dynamic imports, and it works fine on localhost.

For context, I am creating a blog (Meteor/React/Apollo) which renders MDX files, and these files need to be imported, so I have a list of all my posts as such:

import("./imports/posts/61a000d03a1931b8819dc17e.mdx")
import("./imports/posts/619cae2f03f4ff710aa3d980.mdx")
import("./imports/posts/619e002d386ebf2023ea85c3.mdx")
import("./imports/posts/619fff7c5b312d7622acda86.mdx")

I have a Post.jsx component:

import React, { useState, useRef } from "react"
import { useHistory, useParams } from "react-router-dom"
import { useQuery } from "@apollo/client"
import { GET_POST_ID } from "../../api/posts/queries"

const Post = () => {
    const Post = useRef()
    const history = useHistory()
    const { slug } = useParams()
    const [loadedPost, setLoaded] = useState(false)
    const [viewer, showViewer] = useState(false)
    const open = () => showViewer(true)
    
    const { data, loading, error } = useQuery(GET_POST_ID, { variables: { slug }})
    
    if (loading) return null
    if (error) {
        console.log(error)
        return null
    }

    import(`./posts/${data._id}.mdx`).then(MDX => {
        Post.current = MDX.default
        setLoaded(true)
    }, (err) => {
        console.log(err)
    })

    return loadedPost ? (
        <>
        <div className="postContent">
            <div className="markdownOverride markdown-body">
                <Post.current />
            </div>
        </div>
        </>
    ) : null
}

export default Post

This works well and good on my local network. However, if I attempt to access it from outside my local network, an error is thrown in the console that all the blog modules are not found. The Apollo/GraphQL portion works fine, but the actual module can't be imported.

How do I get this to work outside of localhost?

Thanks.

EDIT: The error messages are, for each post:

Uncaught (in promise) Error: Cannot find module '/imports/posts/61a000d03a1931b8819dc17e.mdx`

And when I load the actual post page:

Uncaught (in promise) TypeError: Failed to fetch

Answer 1

It turns out that I needed to specify the ROOT_URL correctly when initializing Meteor. With an ngrok http tunnel on port 3000 pointing to https://some-hash.ngrok.io, I had to start Meteor with: ROOT_URL="https://some-hash.ngrok.io" meteor. When I do this, I can access it fine and everything loads from my local IP and the ngrok URL, but I can't seem to load it up from localhost (it times out).

Specifying my local or public IP did not work, I could not get it to load through any of those methods.