[solved] Failed to fetch dynamically loaded module

Hi, so I have the following in a React component:

import(`./some_path/${someMDXfile}.mdx`).then(MDX => {
    Content.current = MDX.default
}, (err) => {

This is dynamically imported, although I do have a file explicitly stating the import.

if (false) {

The dynamic import works fine on localhost:3000 and my local IP XXX.XXX.XX.XX:3000. However, this fails the moment I try to get this resource from another domain.

I’m using ngrok to test a quick HTTPS connection, by running ./ngrok http 3000, and this generates a URL https://randomID.ngrok.io (basically forwarded from my IP)

This all works fine, but when I navigate to the page with the dynamic import from an IP address outside my local network, I get the error TypeError: failed to fetch thrown in the console as the import is failing.

What configuration step am I missing out here? Is this a CORS issue? The vague error message isn’t helping me understand what’s going wrong.

For more context, I’m running a Meteor/Apollo/React stack and I tried adding the following to my server file:

const schema = makeExecutableSchema({

const server = new ApolloServer({
    context: async ({ req }) => ({
        user: await getUser(req.headers.authorization)

WebApp.connectHandlers.use(function(req, res, next) {
    res.setHeader("Access-Control-Allow-Origin", "*")
    res.setHeader("Access-Control-Allow-Headers", "Authorization,Content-Type")
    return next()

    app: WebApp.connectHandlers,
    cors: true

// This bit is for SSR, I don't think it has much relevance to this problem

function getClientData(client) {
    const cache = JSON.stringify(client.cache.extract())
    return `<script>window.__APOLLO_STATE__=${cache.replace(

onPageLoad(async (sink) => {
    const sheet = new ServerStyleSheet()
    const client = apolloClient
    const helmetContext = {}
    const tree = sheet.collectStyles(
      <App client={client} location={sink.request.url} context={helmetContext} />
    return getMarkupFromTree({
      context: {},
      renderFunction: renderToString,
    }).then((html) => {
      const style = sheet.getStyleTags()
      const { helmet } = helmetContext
      const clientData = getClientData(client)
      sink.renderIntoElementById("app", html)

But this still hasn’t gotten me any further, the same error is being thrown. Not sure if this changed anything or if I implemented it correctly.

I managed to solve this. The key here is the fact that the ROOT_URL environment variable must be set to the ngrok URL.

So I first started the ngrok instance, and it gave me a link https://someID.ngrok.io.

In my package.json I have it configured to execute a bash script:

"scripts": {
    "meteor": "./startServer.sh"

In startServer.sh:


export ROOT_URL="https://someID.ngrok.io"
export PORT=3000

meteor $*

And then I ran npm run meteor, where meteor here corresponds to the script named meteor in package.json.

And the dynamic import works without issue. I removed that bit of code dealing with CORS as well as it wasn’t a CORS issue at all.