如何正确设置动态导入（超出本地主机）？

Question

我按照 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

Answer 1

你的错误不是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，因为您的 meteor 或 webpack 编译需要处理数据库中所有可用的 data._id，以便编译和准备文件...

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

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

Answer 2

原来我需要在初始化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 无效，我无法通过任何这些方法加载它。

如何正确设置动态导入（超出本地主机）？

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

node.js

reactjs

meteor

dynamic-import