La creazione-reattiva-app importa le restrizioni al di fuori della directory src

Sto usando creare-reagire-app. Sto provando a chiamare un'immagine dalla mia cartella pubblica da un file all'interno del mio src/components. Ricevo questo messaggio di errore.

./src/components/website_index.js Modulo non trovato: hai tentato di importare ../../public/images/logo/WC-BlackonWhite.jpg che non rientra nella directory src / del progetto. Le importazioni relative al di fuori di src / non sono supportate. Puoi spostarlo all'interno di src / o aggiungere un link simbolico dal nodo_moduli del progetto /.

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

Ho letto molte cose dicendo che puoi fare un'importazione nel percorso ma che non funziona ancora per me. Qualsiasi aiuto sarebbe molto apprezzato. So che ci sono molte domande come questa, ma tutte mi stanno dicendo di importare il logo o l'immagine così chiaramente che mi manca qualcosa nel quadro generale.

Questa è una restrizione speciale aggiunta dagli sviluppatori di create -eagire-app. È implementato ModuleScopePluginper garantire che i file risiedano in src/. Tale plug-in garantisce che le importazioni relative dalla directory di origine dell'app non raggiungano al di fuori di essa.

È possibile disabilitare questa funzione ma solo dopo l' ejectoperazione del progetto create -eagire-app.

La maggior parte delle funzionalità e dei suoi aggiornamenti sono nascosti all'interno del sistema create -eagire-app. Se lo fai ejectnon avrai più alcune funzionalità e il suo aggiornamento. Pertanto, se non si è pronti a gestire e configurare l'applicazione inclusa per configurare il webpack e così via, non eseguire ejectoperazioni.

Gioca secondo le regole esistenti (passa a SRC). Ma ora si può sapere come rimuovere restrizione: fare ejecte rimuovere ModuleScopePlugindal file di configurazione webpack .

Dal momento che create -eagire -app v0.4.0 la NODE_PATHvariabile di ambiente consente di specificare un percorso per l'importazione assoluta. E poiché v3.0.0 NODE_PATH è deprecato a favore dell'impostazione baseUrlin jsconfig.jsono tsconfig.json.

L'importazione assoluta consente l'utilizzo import App from 'App'invece import App from './App'rispetto al valore specificato nell'URL di base.

Questa funzione è particolarmente utile per i monorepos o altre domande di configurazione ma non per l'importazione di immagini o altro dalla publiccartella.

Il contenuto della publiccartella verrà inserito nella buildcartella e disponibile tramite l'URL relativo. Inoltre, tutto ciò che viene importato verrà elaborato dal webpack e verrà inserito anche nella buildcartella.

Se importi qualcosa dalla publiccartella, probabilmente quell'elemento verrà duplicato nella buildcartella e sarà disponibile con due URL diversi (o con modi diversi di caricare), che alla fine peggioreranno le dimensioni del download del pacchetto.

È preferibile importare dalla cartella src e presenta vantaggi. Tutto sarà imballato dal webpack in bundle con pezzi di dimensioni ottimali e per la migliore efficienza di caricamento .

Esistono soluzioni intermedie, vale a dire il sistema rewire che consente di modificare a livello di programmazione la configurazione del webpack. Ma rimuovere il ModuleScopePluginplugin non è una buona soluzione; è meglio aggiungere directory aggiuntive perfettamente funzionanti simili a src.

Attualmente, create-react-appnon supporta directory aggiuntive se non srcnella cartella principale. Questo può essere fatto usando alias reatt-app-rewire-alias

Il pacchetto reatt-app-ricablato può essere usato per rimuovere il plugin. In questo modo non è necessario espellere.

Seguire i passaggi nella pagina del pacchetto npm (installare il pacchetto e invertire le chiamate nel file package.json) e utilizzare un config-overrides.jsfile simile a questo:

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

Questo rimuoverà ModuleScopePlugin dai plugin WebPack usati, ma lascerà il resto com'era e rimuoverà la necessità di espellere.

Per offrire un po 'più di informazioni alle risposte degli altri. Hai due opzioni su come consegnare il file .png all'utente. La struttura del file deve essere conforme al metodo scelto. Le due opzioni sono:

1. Utilizzare il sistema del modulo ( import x from y) fornito con React-create-app e raggrupparlo con JS. Posiziona l'immagine all'interno della srccartella.

2. Servilo dalla publiccartella e lascia che Node serva il file. Apparentemente, create -eagire-app include anche una variabile d'ambiente, ad es <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;. Ciò significa che puoi fare riferimento nella tua app React ma averlo ancora servito tramite Node, con il tuo browser che lo richiede separatamente in una normale richiesta GET.

Fonte: create -eagire-app

Se le tue immagini sono nella cartella pubblica, allora dovresti usare

"/images/logo_2016.png"

nel tuo <img> srcinvece di importare

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

Questo funzionerà

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

Devi spostarti WC-BlackonWhite.jpgnella tua srcdirectory. La publicdirectory è per i file statici che verranno collegati direttamente nell'HTML (come favicon), non cose che importerai direttamente nel tuo bundle.

Ci sono alcune risposte che forniscono soluzioni react-app-rewired, ma customize-craespongono removeModuleScopePlugin()un'API speciale che è un po 'più elegante. (È la stessa soluzione, ma sottratta al customize-crapacchetto.)

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()

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

Questa restrizione assicura che tutti i file o moduli (esportazioni) si trovino all'interno della src/directory, l'implementazione è in ./node_modules/react-dev-utils/ModuleScopePlugin.js, nelle seguenti righe di codice.

// 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();
      }

È possibile rimuovere questa restrizione da

1. o cambiando questo pezzo di codice (non raccomandato)
2. o noneject rimuovere ModuleScopePlugin.jsdalla directory.
3. o commentare / rimuovere const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');da./node_modules/react-scripts/config/webpack.config.dev.js

PS: attenzione delle conseguenze di espulsione .

installa questi due pacchetti

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

Non è necessario espellere, è possibile modificare la react-scriptsconfigurazione con la libreria di script

Questo funzionerebbe quindi:

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

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

  return config;
};

Penso che la soluzione di Lukas Bach per utilizzare la reatt-app-ricablata al fine di modificare la configurazione del webpack sia un buon modo di procedere, tuttavia, non escluderei l'intero ModuleScopePlugin ma invece autorizzo il file specifico che può essere importato al di fuori di src:

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

Immagine all'interno della cartella pubblica

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

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

• usa l'immagine all'interno dell'estensione js

Se devi solo importare un singolo file, come README.md o package.json, questo può essere aggiunto esplicitamente a ModuleScopePlugin ()

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()
      ]),
    ]
  }
}

la soluzione migliore è quella di fork react-scripts, questo è effettivamente menzionato nella documentazione ufficiale, vedi: Alternative all'espulsione

Se hai bisogno di più modifiche, come quando usi la progettazione di formiche , puoi combinare più funzioni come questa:

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

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

Aggiungendo alla risposta di Bartek Maciejiczek, ecco come appare con Craco:

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