[solved] Failed to fetch dynamically loaded module

help
1

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

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

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

if (false) {
    import("./some_other_path/some_path/file.mdx")
}

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({
    typeDefs,
    resolvers
})

const server = new ApolloServer({
    schema,
    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()
})

server.applyMiddleware({
    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(
      /</g,
      "\\u003c"
    )}</script>`
}

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({
      tree,
      context: {},
      renderFunction: renderToString,
    }).then((html) => {
      const style = sheet.getStyleTags()
      const { helmet } = helmetContext
      const clientData = getClientData(client)
      sink.appendToHead(style)
      sheet.seal()
      sink.appendToHead(helmet.meta.toString())
      sink.appendToHead(helmet.title.toString())
      sink.appendToHead(clientData)
      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.

2

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:

#!/bin/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.