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

Question

我遇到问题我找不到任何以前的答案或有关文档。

我加载一个组成部分，在一个模块中，我的本地机器， “login.jsx，” 关于为 “index.js”：

import Login from './login'; 

export { Login }; 

导出组件内部 “login.jsx”是非常基本的。

模块主要指向index.js文件，我将它导入由create-react-app生成的“App.js”文件中。

模块的目录结构如下：

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

值得一提的是，这也是一个创建反应的应用内，但没有将所生成的文件是的主要出口的部分链接模块。

当我导入它和console.log时，它以字符串形式导入：“/static/media/login.1d0b2e37.jsx。”

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

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

因为我试图进口加载：

import { Login } from 'component-module'; 

直接进入反应路由器-DOM路线。直接位于我的create-react-app文件夹“src”中的所有组件都呈现得很好。

当日志：

console.log(Login); 

在导入后，它立即清楚，这是一个字符串：“/static/media/login.1d0b2e37.jsx”

我创建反应的-应用项目的目录结构（一个通用的创建反应的-APP）：

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

在它存在的上述进口，这是导致进口Login作为一个字符串。

这里有一些奇怪的事情发生在外部组件的create-react-app开发服务器渲染吗？也许在一个Webpack插件中，只是将外部对象视为静态对象？

据我所知，有这个在create-react-app docs

Answer 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