如何正确设置动态导入(超出本地主机)?

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

我按照 https://docs.meteor.com/packages/dynamic-import.html 设置了动态导入,它在本地主机上运行良好。

对于上下文,我正在创建一个呈现 MDX 文件的博客 (Meteor/React/Apollo),并且需要导入这些文件,因此我有一个包含所有 post 的列表:

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

我有一个 Post.jsx 组件:

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

这在我的本地网络上运行良好。但是,如果我尝试从我的本地网络外部访问它,则会在控制台中抛出一个错误,提示未找到所有博客模块。 Apollo/GraphQL 部分工作正常,但无法导入实际模块。

我如何让它在本地主机之外工作?

谢谢。

编辑:错误消息是,对于每个 post:

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

当我加载实际的 post 页面时:

Uncaught (in promise) TypeError: Failed to fetch

你的错误不是console.log(err)抛出的吗?

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

这意味着您的路径不适合 /imports/posts/61a000d03a1931b8819dc17e.mdx

对我来说,您不能在进行动态导入时使用更改参数。 ./posts/${data._id}.mdx,因为您的 meteorwebpack 编译需要处理数据库中所有可用的 data._id,以便编译和准备文件...

这可能就是它在开发模式下有效但在生产模式下无效的原因。

你可以只动态导入模块或组件(已经编译),对我来说就不用了。查看您的输出编译包,并尝试找到您的组件...

原来我需要在初始化Meteor时正确指定ROOT_URL。在端口 3000 上有一个指向 https://some-hash.ngrok.io 的 ngrok http 隧道,我不得不用 ROOT_URL="https://some-hash.ngrok.io" meteor 启动 Meteor。当我这样做时,我可以很好地访问它,所有内容都从我的本地 IP 和 ngrok URL 加载,但我似乎无法从本地主机加载它(超时)。

指定我的本地或 public IP 无效,我无法通过任何这些方法加载它。