導入的組件在 react-create-app 中轉換為“/static”url

Question

我遇到了一個問題，我真的找不到任何以前的答案或相關文檔。

我正在將本地計算機“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 插件之一中，它只是將外部視為 static？

據我所知， create-react-app 文檔中沒有關於此的信息

Answer 1

通過模塊，您是指圖書館嗎？ 就像您可以通過 npm install 作為其他應用程序的依賴項安裝的東西一樣？

如果是這樣，CRA 不是為此目的而設計的。 它旨在創建應用程序。

如果您確實看到需要為登錄組件創建庫，並希望使用 CRA 來實現，您可以按照本指南進行操作： https : //medium.com/@lokhmakov/best-way-to-create-npm- packages-with-create-react-app-b24dd449c354或使用這個工具，雖然我自己從未嘗試過，也不能保證。

不過，是否有充分的理由將您的組件實現為庫？ 庫主要用於與開發人員共享通用功能，以便在他們的個人應用程序中使用。

如果您只打算在您的特定應用程序中使用此組件，我建議您將其作為應用程序中的一個組件來實現。 您仍然可以將它實現為一個獨立的庫，但無需設置構建邏輯。

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

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

Answer 2

我嘗試重命名我的文件包含導出到.js 文件。 它就像一個魅力