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

Hi, I followed dynamic-import | Meteor API Docs 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:


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) {
        return null

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

    return loadedPost ? (
        <div className="postContent">
            <div className="markdownOverride markdown-body">
                <Post.current />
    ) : 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?


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, I had to start Meteor with: ROOT_URL="" 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.