导入的组件在 react-create-app 中转换为“/static” url

Posted 2023-02-22

【中文标题】导入的组件在 react-create-app 中转换为“/static” url

【英文标题】：Imported components transformed into "/static" urls in react-create-app

【发布时间】：2018-03-25 02:45:35

【问题描述】：

我遇到了一个问题，我真的找不到任何以前的答案或文档。

我正在将本地机器上的模块中的组件“login.jsx”加载到“index.js”中：

import Login from './login';

export  Login ;

“login.jsx”里面的导出组件非常基础。

模块 main 直接指向 index.js 文件，我将其导入到 create-react-app 生成的“App.js”文件中。

模块目录结构如下：

module
   | src
   | --- components
   | --- --- login.jsx
   | --- --- index.js
   | package.json    

值得注意的是，这也是一个 create-react-app，但生成的文件都不是链接模块的主要导出的一部分。

当我导入它和 console.log 时，它被导入为一个字符串：“/static/media/login.1d0b2e37.jsx。”

具体来说，我得到的错误是：

Invalid tag: /static/media/login.1d0b2e37.jsx

因为我正在尝试加载导入：

import  Login  from 'component-module';

直接进入 react-router-dom 路由。直接存在于我的 create-react-app 文件夹“src”中的所有组件都可以正常渲染。

记录时：

console.log(Login);

导入后马上就清楚是个字符串：“/static/media/login.1d0b2e37.jsx.”

我的create-react-app项目的目录结构是（一个通用的create-react-app）：

create-react-app
   | src
   | --- App.js

其中存在上述导入，这导致将Login 作为字符串导入。

外部组件的 create-react-app 开发服务器渲染是否发生了一些奇怪的事情？也许在其中一个只是将外部视为静态的 Webpack 插件中？

据我所知，create-react-app docs 中没有这方面的信息

【问题讨论】：

你能发布你的目录结构吗？以及代码库中的导入/导出语句。

@kngroo 我更新了添加目录结构。我认为所有的进口/出口都已经得到证明。谢谢！

【参考方案1】：

模块是指库吗？就像您可以通过 npm install 安装为其他应用程序的依赖项一样？

如果是这样，CRA 就不是为此目的而设计的。它用于创建应用程序。

如果您确实需要为登录组件创建一个库，并且想使用 CRA 来实现，您可以按照以下指南操作：https://medium.com/@lokhmakov/best-way-to-create-npm-packages-with-create-react-app-b24dd449c354 或使用 this tool，尽管我自己从未尝试过并且无法保证。

是否有充分的理由将您的组件实现为库？ 库主要用于与开发人员共享通用功能，以便在他们的个人应用程序中使用。

如果您只打算在您的特定应用程序中使用此组件，我建议您将其实现为您的应用程序中的一个组件。您仍然可以将其实现为独立库，但无需设置构建逻辑。

create-react-app
|src
|    App.js
|    components
|        Login
|            index.js
|            Login.jsx

在 App.js 中 import Login from './components/Login

【讨论】：

“有充分的理由将您的组件实现为库吗？库主要用于与开发人员共享通用功能，以便在他们的个人应用程序中使用。”

因此，根据那篇文章，您的建议是尝试手动操作 webpack.dev.js？ CRA 可能不适用于此用例，但由于普通模块（如 react-router-dom）以与此类似的方式公开组件，我觉得它应该可以工作。 webpack.dev.js 可能是一个不错的起点。我试试看。

我最终只是在这里弹出并基本上重写了 webpack.dev.js 文件