La restriction d'importation de create-react-app en dehors du répertoire src

Question

J'utilise create-react-app. J'essaye d'appeler une image de mon dossier public à partir d'un fichier dans mon application. src/components . Je reçois ce message d'erreur.

./src/components/website_index.js Module non trouvé : Vous avez tenté de d'importer le fichier ../../public/images/logo/WC-BlackonWhite.jpg qui se situe en dehors du répertoire src/ du projet. Les importations relatives en dehors de src/ ne sont pas prises en charge. Vous pouvez soit le déplacer à l'intérieur de src/, soit ajouter un lien symbolique à partir du répertoire node_modules/ du projet.

import logo from '../../public/images/logo_2016.png'; <img className="Header-logo" src={logo} alt="Logo" />

J'ai lu beaucoup de choses disant que vous pouvez faire une importation vers le chemin mais cela ne fonctionne toujours pas pour moi. Toute aide serait la bienvenue. Je sais qu'il y a beaucoup de questions de ce genre, mais elles me disent toutes d'importer un logo ou une image, donc il est clair que quelque chose m'échappe.

Answer 1

Il s'agit d'une restriction spéciale ajoutée par les développeurs de create-react-app. Elle est implémentée dans ModuleScopePlugin pour s'assurer que les fichiers résident dans src/ . Ce plugin assure que les importations relatives du répertoire source de l'application n'atteignent pas l'extérieur de celui-ci.

Vous pouvez désactiver cette fonction (l'une des façons) en eject opération du projet create-react-app.

La plupart des fonctionnalités et leurs mises à jour sont cachées dans les internes du système create-react-app. Si vous faites eject vous n'aurez plus certaines fonctionnalités et sa mise à jour. Donc, si vous n'êtes pas prêt à gérer et à configurer une application, y compris à configurer webpack et ainsi de suite, ne le faites pas. eject fonctionnement.

Jouer selon les règles existantes (passer au src). Mais maintenant vous pouvez savoir comment supprimer la restriction : faire eject et retirer ModuleScopePlugin à partir du fichier de configuration de webpack .

---

Au lieu de eject il existe des solutions intermédiaires, comme rebrancher qui vous permet de modifier de manière programmatique la configuration de webpack sans eject . Mais enlever le site ModuleScopePlugin plugin n'est pas bon - cela perd une certaine protection et n'ajoute pas certaines fonctionnalités disponibles dans src .

La meilleure façon de procéder est d'ajouter des répertoires supplémentaires entièrement fonctionnels semblables à src . Cela peut être fait en utilisant react-app-rewire-alias

---

Ne pas importer de public qui sera dupliqué dans le dossier build et seront disponibles par deux url différentes (ou avec différentes façons de les charger), ce qui, au final, aggrave la taille du téléchargement du paquet.

Importation depuis le src Le dossier est préférable et présente des avantages. Tout sera empaqueté par webpack dans le bundle avec des chunks taille optimale et pour meilleure efficacité de chargement .

Answer 2

Le paquet react-app-rewired peut être utilisé pour supprimer le plugin. De cette façon, vous n'avez pas besoin de l'éjecter.

Suivez les étapes de la page du paquet npm (installez le paquet et retournez les appels dans le fichier package.json) et utilisez un fichier config-overrides.js similaire à celui-ci :

const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

module.exports = function override(config, env) {
    config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));

    return config;
};

Cela supprimera le ModuleScopePlugin des plugins WebPack utilisés, mais laissera le reste tel quel et supprimera la nécessité d'éjecter.

Answer 3

Si vos images sont dans le dossier public, vous devriez utiliser

"/images/logo_2016.png"

dans votre <img> src au lieu d'importer

'../../public/images/logo_2016.png'; 

Cela va fonctionner

<img className="Header-logo" src="/images/logo_2016.png" alt="Logo" />

Answer 4

Pour apporter un peu plus d'informations aux réponses des autres. Vous avez deux options concernant la façon de livrer le fichier .png à l'utilisateur. La structure du fichier doit être conforme à la méthode que vous choisissez. Les deux options sont les suivantes :

1. Utilisez le système de modules ( import x from y ) fourni avec react-create-app et l'empaqueter avec votre JS. Placez l'image dans le fichier src dossier.

2. Servez-la à partir du public et laisser Node servir le fichier. create-react-app est aussi apparemment livré avec une variable d'environnement, par ex. <img src={process.env.PUBLIC_URL + '/img/logo.png'} />; . Cela signifie que vous pouvez le référencer dans votre application React, mais qu'il est toujours servi par Node, votre navigateur le demandant séparément dans une requête GET normale.

Source : create-react-app

Answer 5

Vous devez bouger WC-BlackonWhite.jpg dans votre src répertoire. Le site public est destiné aux fichiers statiques qui seront liés directement dans le HTML (comme le favicon), et non aux éléments que vous importerez directement dans votre paquet.