composants importés transformés en « statiques »/urls dans React-create-app

Question

Je vais avoir un problème, je ne peux pas vraiment trouver des réponses précédentes ou la documentation au sujet.

Je suis le chargement d'un composant, dans un module, sur ma machine locale, "login.jsx," dans un "index.js":

import Login from './login'; 

export { Login }; 

Le composant exporté à l'intérieur "login.jsx" est très basique.

Les principaux points du module directement au fichier index.js et je suis l'importer dans le fichier « app.js » généré par créer une réaction application.

La structure du répertoire du module est la suivante:

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

Il convient de noter que c'est aussi une application créer une réaction, mais aucun des fichiers générés font partie des principales exportations de la module lié.

Lorsque je l'importer et console.log, il est importé sous forme de chaîne: « /static/media/login.1d0b2e37.jsx. »

Plus précisément, l'erreur que je reçois est:

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

Parce que je tente de charger l'importation:

import { Login } from 'component-module'; 

directement dans une route-dom réagir-routeur. Tous les composants qui vivent directement dans mon dossier create-react-app, "src", rendent très bien.

Lorsque l'enregistrement:

console.log(Login); 

après l'importation, il est immédiatement évident que c'est une chaîne: "/static/media/login.1d0b2e37.jsx."

La structure du répertoire de mon projet de créer une réaction-app est (create-réagir-app générique):

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

dans lequel se trouve l'importation mentionnée ci-dessus, ce qui entraîne dans l'importation Login comme une chaîne.

Y at-il une bizarrerie qui se passe ici avec le serveur de développement créer une réaction-app rendu des composants externes? Peut-être que dans l'un des plugins Webpack c'est juste de traiter les externes comme statiques?

Pour autant que je sache, il n'y a pas d'informations à ce sujet dans le create-react-app docs

Answer 1

Par module, voulez-vous dire une bibliothèque? Comme dans quelque chose que vous pouvez installer en tant que dépendance pour d'autres applications via l'installation npm?

Dans ce cas, l'ARC n'a pas été conçu à cette fin. Il est destiné à la création d'applications.

Si vous voyez vraiment la nécessité de créer une bibliothèque pour un composant de connexion, et que vous souhaitez le faire en utilisant l'ARC, vous pouvez suivre ce guide: https://medium.com/@lokhmakov/best-way-to-create-npm-packages-with-create-react-app-b24dd449c354 ou utiliser this tool, bien que je ne l'ai jamais essayé moi-même et ne peut pas se porter garant pour elle .

Y a-t-il une bonne raison pour implémenter votre composant en tant que bibliothèque? Les bibliothèques sont principalement destinées au partage de fonctionnalités génériques avec des développeurs pour une utilisation dans leurs applications individuelles.

Si vous avez uniquement l'intention d'utiliser ce composant dans votre application particulière, je vous suggère de l'implémenter en tant que composant dans votre application. Vous pouvez toujours l'implémenter en tant que bibliothèque autonome, mais sans avoir besoin de configurer la logique de construction.

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

Et app.js import Login from './components/Login