Die Create-React-App importiert Einschränkungen außerhalb des src-Verzeichnisses

Ich benutze die Create-React-App. Ich versuche, ein Bild aus meinem öffentlichen Ordner aus einer Datei in meinem Ordner aufzurufen src/components. Ich erhalte diese Fehlermeldung.

./src/components/website_index.js Modul nicht gefunden: Sie haben versucht, ../../public/images/logo/WC-BlackonWhite.jpg zu importieren, das außerhalb des Projektverzeichnisses src / liegt. Relative Importe außerhalb von src / werden nicht unterstützt. Sie können es entweder in src / verschieben oder einen Symlink aus den node_modules / des Projekts hinzufügen.

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

Ich habe viele Dinge gelesen, die besagen, dass Sie einen Import in den Pfad durchführen können, aber das funktioniert bei mir immer noch nicht. Jede Hilfe wäre sehr dankbar. Ich weiß, dass es viele Fragen wie diese gibt, aber alle sagen mir, dass ich ein Logo oder ein Bild so deutlich importieren soll, dass mir etwas im Gesamtbild fehlt.

Dies ist eine spezielle Einschränkung, die von Entwicklern der Create-React-App hinzugefügt wurde. Es wird implementiert, ModuleScopePluginum sicherzustellen, dass sich Dateien in befinden src/. Dieses Plugin stellt sicher, dass relative Importe aus dem Quellverzeichnis der App nicht außerhalb davon gelangen.

Sie können diese Funktion deaktivieren, jedoch erst nach dem ejectAusführen des Projekts "App erstellen, reagieren, App".

Die meisten Funktionen und deren Updates sind in den Interna des Create-React-App-Systems verborgen. Wenn Sie machen, werden ejectSie einige Funktionen und deren Update nicht mehr haben. Wenn Sie also nicht bereit sind, die mitgelieferte Anwendung zum Konfigurieren von Webpack usw. zu verwalten und zu konfigurieren, führen Sie keine ejectOperation aus.

Spielen Sie nach den bestehenden Regeln (gehen Sie zu src). Aber jetzt können Sie wissen , wie Einschränkung zu entfernen: tun , ejectund entfernen Sie ModuleScopePluginaus webpack Konfigurationsdatei .

Seit create-react-app v0.4.0 kann mit der NODE_PATHUmgebungsvariablen ein Pfad für den absoluten Import angegeben werden. Und da v3.0.0 NODE_PATH zugunsten der Einstellung baseUrlin jsconfig.jsonoder veraltet ist tsconfig.json.

Beim absoluten Import kann import App from 'App'stattdessen import App from './App'relativ zum in der Basis-URL angegebenen Wert verwendet werden.

Diese Funktion ist besonders nützlich für Monorepos oder andere Konfigurationsfragen, jedoch nicht zum Importieren von Bildern oder anderen Elementen aus Ordnern public.

Der Inhalt des publicOrdners wird im buildOrdner abgelegt und ist über die relative URL verfügbar. Außerdem wird alles, was importiert wird, per Webpack verarbeitet und auch in einem buildOrdner abgelegt .

Wenn Sie etwas aus einem publicOrdner importieren , wird dieses Ding wahrscheinlich im buildOrdner dupliziert und ist über zwei verschiedene URLs (oder mit verschiedenen Möglichkeiten zum Laden) verfügbar, was letztendlich die Downloadgröße des Pakets verschlechtert.

Der Import aus dem src- Ordner ist vorzuziehen und hat Vorteile. Alles wird per Webpack in das Bündel gepackt, wobei die Brocken die optimale Größe und die beste Ladeeffizienz aufweisen .

Es gibt Zwischenlösungen, nämlich das Rewire- System, mit dem Sie die Webpack-Konfiguration programmgesteuert ändern können. Das Entfernen des ModuleScopePluginPlugins ist jedoch keine gute Lösung. Es ist besser, voll funktionsfähige zusätzliche Verzeichnisse hinzuzufügen, die denen ähneln src.

Derzeit werden create-react-appkeine weiteren Verzeichnisse als srcim Stammordner unterstützt. Dies kann mit dem React-App-Rewire-Alias ​​erfolgen

Das Paket react-app-rewired kann verwendet werden, um das Plugin zu entfernen. Auf diese Weise müssen Sie nicht auswerfen.

Befolgen Sie die Schritte auf der npm-Paketseite (installieren Sie das Paket und drehen Sie die Aufrufe in der Datei package.json um) und verwenden Sie eine config-overrides.jsähnliche Datei wie diese:

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;
};

Dadurch wird das ModuleScopePlugin aus den verwendeten WebPack-Plugins entfernt, der Rest bleibt jedoch unverändert, und das Auswerfen entfällt.

Um den Antworten anderer ein bisschen mehr Informationen zu bieten. Sie haben zwei Möglichkeiten, wie Sie die PNG-Datei an den Benutzer senden können. Die Dateistruktur sollte der von Ihnen gewählten Methode entsprechen. Die zwei Optionen sind:

1. Verwenden Sie das import x from ymit der React-Create-App gelieferte Modulsystem ( ) und bündeln Sie es mit Ihrem JS. Legen Sie das Bild in den srcOrdner.

2. Servieren Sie es aus dem publicOrdner und lassen Sie Node die Datei bereitstellen. create-react-app enthält anscheinend auch eine Umgebungsvariable, z <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;. Dies bedeutet, dass Sie in Ihrer React-App darauf verweisen können, es aber weiterhin über Node bereitstellen können, wobei Ihr Browser es in einer normalen GET-Anforderung separat anfordert.

Quelle: create-react-app

Wenn sich Ihre Bilder im öffentlichen Ordner befinden, sollten Sie verwenden

"/images/logo_2016.png"

in Ihrem <img> srcstatt zu importieren

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

Das wird funktionieren

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

Sie müssen WC-BlackonWhite.jpgin Ihr srcVerzeichnis wechseln . Das publicVerzeichnis ist für statische Dateien vorgesehen, die direkt im HTML-Code verlinkt werden (z. B. das Favicon), und nicht für Inhalte, die Sie direkt in Ihr Bundle importieren möchten.

Es gibt einige Antworten, die Lösungen bieten react-app-rewired, aber customize-craeine spezielle removeModuleScopePlugin()API verfügbar machen, die etwas eleganter ist. (Es ist die gleiche Lösung, aber vom customize-craPaket weg abstrahiert .)

npm i --save-dev react-app-rewired customize-cra

package.json

"scripts": {
    - "start": "react-scripts start"
    + "start": "react-app-rewired start",
    ...
},

config-overrides.js

const { removeModuleScopePlugin } = require('customize-cra')

module.exports = removeModuleScopePlugin()

Entfernen Sie es mit Craco:

module.exports = {
  webpack: {
    configure: webpackConfig => {
      const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
        ({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
      );

      webpackConfig.resolve.plugins.splice(scopePluginIndex, 1);
      return webpackConfig;
    }
  }
};

Diese Einschränkung stellt sicher, dass sich alle Dateien oder Module (Exporte) im src/Verzeichnis befinden, in dem sich die Implementierung befindet ./node_modules/react-dev-utils/ModuleScopePlugin.js, und zwar in den folgenden Codezeilen.

// Resolve the issuer from our appSrc and make sure it's one of our files
// Maybe an indexOf === 0 would be better?
     const relative = path.relative(appSrc, request.context.issuer);
// If it's not in src/ or a subdirectory, not our request!
     if (relative.startsWith('../') || relative.startsWith('..\\')) {
        return callback();
      }

Sie können diese Einschränkung durch aufheben

1. entweder diesen Code ändern (nicht empfohlen)
2. oder entfernen Sieeject dann ModuleScopePlugin.jsaus dem Verzeichnis.
3. oder kommentieren / entfernen const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');von./node_modules/react-scripts/config/webpack.config.dev.js

PS: Vorsicht vor den Folgen des Auswurfs .

Installieren Sie diese beiden Pakete

npm i --save-dev react-app-rewired customize-cra

package.json

"scripts": {
    - "start": "react-scripts start"
    + "start": "react-app-rewired start"
},

config-overrides.js

const { removeModuleScopePlugin } = require('customize-cra');

module.exports = function override(config, env) {
    if (!config.plugins) {
        config.plugins = [];
    }
    removeModuleScopePlugin()(config);

    return config;
};

Sie müssen nicht auswerfen, Sie können die react-scriptsKonfiguration mit der Rescripts-Bibliothek ändern

Das würde dann funktionieren:

module.exports = config => {
  const scopePluginIndex = config.resolve.plugins.findIndex(
    ({ constructor }) => constructor && constructor.name === "ModuleScopePlugin"
  );

  config.resolve.plugins.splice(scopePluginIndex, 1);

  return config;
};

Ich denke, die Lösung von Lukas Bach zur Verwendung von React-App-Rewired zum Ändern der Webpack-Konfiguration ist ein guter Weg. Ich würde jedoch nicht das gesamte ModuleScopePlugin ausschließen, sondern stattdessen die spezifische Datei auf die Whitelist setzen, die außerhalb von src importiert werden kann:

config-overrides.js

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

module.exports = function override(config) {
  config.resolve.plugins.forEach(plugin => {
    if (plugin instanceof ModuleScopePlugin) {
      plugin.allowedFiles.add(path.resolve("./config.json"));
    }
  });

  return config;
};

Bild im öffentlichen Ordner

  use image inside html extension
  <img src="%PUBLIC_URL%/resumepic.png"/>

  use image inside  js extension
  <img src={process.env.PUBLIC_URL+"/resumepic.png"}/>

• Verwenden Sie das Bild in der js-Erweiterung

Wenn Sie nur eine einzelne Datei wie README.md oder package.json importieren müssen, kann diese explizit zu ModuleScopePlugin () hinzugefügt werden.

config / paths.js

const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
  appPackageJson: resolveApp('package.json'),
  appReadmeMD:    resolveApp('README.md'),
};

config / webpack.config.dev.js + config / webpack.config.prod.js

module.exports = {
  resolve: {
    plugins: [
      // Prevents users from importing files from outside of src/ (or node_modules/).
      // This often causes confusion because we only process files within src/ with babel.
      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
      // please link the files into your node_modules/ and let module-resolution kick in.
      // Make sure your source files are compiled, as they will not be processed in any way.
      new ModuleScopePlugin(paths.appSrc, [
          paths.appPackageJson,
          paths.appReadmeMD         // README.md lives outside of ./src/ so needs to be explicitly included in ModuleScopePlugin()
      ]),
    ]
  }
}

Die beste Lösung ist das Gabeln react-scripts, dies wird tatsächlich in der offiziellen Dokumentation erwähnt, siehe: Alternativen zum Auswerfen

Wenn Sie mehrere Änderungen benötigen, wie z bei Verwendung des Ameisendesigns , können Sie mehrere Funktionen wie folgt kombinieren:

const {
  override,
  removeModuleScopePlugin,
  fixBabelImports,
} = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
  removeModuleScopePlugin(),
);

Neben der Antwort von Bartek Maciejiczek sieht es bei Craco folgendermaßen aus:

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

module.exports = {
  webpack: {
    configure: webpackConfig => {
      webpackConfig.resolve.plugins.forEach(plugin => {
        if (plugin instanceof ModuleScopePlugin) {
          plugin.allowedFiles.add(path.resolve("./config.json"));
        }
      });
      return webpackConfig;
    }
  }
};