Aplikacja create-react-app importuje ograniczenie poza katalog src

Używam aplikacji create-react-app. Próbuję wywołać obraz z mojego publicznego folderu z pliku w moim src/components. Otrzymuję ten komunikat o błędzie.

./src/components/website_index.js Nie znaleziono modułu: próbujesz zaimportować ../../public/images/logo/WC-BlackonWhite.jpg, który znajduje się poza katalogiem src / projektu. Względne importowanie poza src / nie jest obsługiwane. Możesz przenieść go do src / lub dodać do niego dowiązanie symboliczne z node_modules / projektu.

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

Przeczytałem wiele rzeczy, w których napisano, że możesz wykonać import do ścieżki, ale to nadal nie działa dla mnie. Każda pomoc byłaby bardzo mile widziana. Wiem, że jest wiele takich pytań, ale wszystkie mówią mi, żebym zaimportował logo lub obraz, więc wyraźnie brakuje mi czegoś w dużym obrazie.

Jest to specjalne ograniczenie dodane przez twórców aplikacji create-react-app. Jest zaimplementowany wModuleScopePlugin aby zapewnić, że pliki znajdują się w src/. Ta wtyczka zapewnia, że ​​względne importy z katalogu źródłowego aplikacji nie sięgają poza nią.

Możesz wyłączyć tę funkcję, ale dopiero później eject uruchomieniu projektu create-re-app.

Większość funkcji i ich aktualizacje jest ukryta w wewnętrznych elementach systemu tworzenia i reagowania. Jeśli sprawisz, że ejectnie będziesz już mieć niektórych funkcji i ich aktualizacji. Więc jeśli nie jesteś gotowy do zarządzania i konfigurowania dołączonej aplikacji do konfigurowania webpacka i tak dalej - nie wykonuj ejectoperacji.

Graj według istniejących zasad (przejdź do źródła). Ale teraz możesz już wiedzieć, jak usunąć ograniczenie: zrób ejecti usuń ModuleScopePluginz pliku konfiguracyjnego pakietu internetowego .

Ponieważ tworzenie reagują app v0.4.0 o NODE_PATHzmiennej środowiska pozwala określić drogę absolutnej importu. A ponieważ wersja 3.0.0 NODE_PATH jest przestarzała, na korzyść ustawienia baseUrlw jsconfig.jsonlub tsconfig.json.

Bezwzględny import umożliwia użycie import App from 'App'zamiast tego import App from './App'względem wartości określonej w podstawowym adresie URL.

Ta funkcja jest szczególnie przydatna w przypadku monorepos lub innych pytań konfiguracyjnych, ale nie do importowania obrazów lub czegokolwiek innego z publicfolderu.

Zawartość publicfolderu zostanie umieszczona wbuild folderze i będzie dostępna według względnego adresu URL. Ponadto wszystko zaimportowane zostanie przetworzone przez webpack i zostanie również umieszczone w buildfolderze.

Jeśli zaimportujesz coś z publicfolderu, prawdopodobnie zostanie to zduplikowane w plikubuild folderze i będzie dostępne pod dwoma różnymi adresami URL (lub różnymi sposobami ładowania), co ostatecznie pogorszy rozmiar pobieranego pakietu.

Importowanie z folderu src jest preferowane i ma zalety. Wszystko zostanie zapakowane w paczkę internetową do pakietu z kawałkami o optymalnym rozmiarze i dla najlepszej wydajności ładowania .

Istnieją rozwiązania pośrednie, a mianowicie system rewire , który pozwala programowo modyfikować konfigurację webpacka. Ale usunięcie ten ModuleScopePluginplugin nie jest dobry rozwiązaniem; lepiej jest dodać w pełni działające dodatkowe katalogi podobne do src.

Obecnie create-react-appnie obsługuje dodatkowych katalogów poza srcfolderem głównym. Można to zrobić za pomocą reagowania na alias aplikacji-rewire

Do usunięcia wtyczki można użyć pakietu reaguj-app-rewired . W ten sposób nie musisz wysuwać.

Postępuj zgodnie z instrukcjami na stronie pakietu npm (zainstaluj pakiet i odwróć wywołania w pliku package.json) i użyj config-overrides.js pliku podobnego do tego:

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

Spowoduje to usunięcie ModuleScopePlugin z używanych wtyczek WebPack, ale resztę pozostawi bez zmian i wyeliminuje konieczność wysuwania.

Aby zaoferować trochę więcej informacji na temat odpowiedzi innych osób. Masz dwie opcje dotyczące sposobu dostarczenia pliku .png do użytkownika. Struktura pliku powinna być zgodna z wybraną metodą. Dwie opcje to:

1. Skorzystaj z modułu system ( import x from y) dostarczonego z aplikacją react-create-i dołącz ją do swojego JS. Umieść obraz wewnątrzsrc folderze.

2. Podaj go z publicfolderu i pozwól Node udostępnić plik. create-react-app również najwyraźniej zawiera zmienną środowiskową, np<img src={process.env.PUBLIC_URL + '/img/logo.png'} />; . Oznacza to, że możesz odwołać się do niego w swojej aplikacji React, ale nadal możesz go obsługiwać przez Node, z przeglądarką pytającą o to osobno w normalnym żądaniu GET.

Źródło: aplikacja create-react-app

Jeśli twoje obrazy znajdują się w folderze publicznym, powinieneś użyć

"/images/logo_2016.png"

w twoim <img> srczamiast importowania

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

To zadziała

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

Musisz przenieść się WC-BlackonWhite.jpgdo swojego srckatalogu. publicKatalog dla plików statycznych, który będzie połączony bezpośrednio w kodzie HTML (takich jak favicon), a nie rzeczy, które masz zamiar importować bezpośrednio do wiązki.

Jest kilka odpowiedzi, które dostarczają rozwiązań react-app-rewired, ale customize-craeksponują specjalne removeModuleScopePlugin()API, które jest nieco bardziej eleganckie. (To to samo rozwiązanie, ale wyodrębnione przez customize-crapakiet).

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

Usuń go za pomocą 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;
    }
  }
};

To ograniczenie zapewnia, że ​​wszystkie pliki lub moduły (eksporty) znajdują się w src/katalogu, w którym znajduje się implementacja ./node_modules/react-dev-utils/ModuleScopePlugin.js, w kolejnych wierszach kodu.

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

Możesz usunąć to ograniczenie przez

1. zmiana tego fragmentu kodu (niezalecane)
2. lub nieeject później usunąćModuleScopePlugin.js z katalogu.
3. lub skomentuj / usuń const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');z./node_modules/react-scripts/config/webpack.config.dev.js

PS: uważaj na konsekwencje wyrzucenia .

zainstaluj te dwa pakiety

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

Nie musisz wysuwać, możesz modyfikować react-scriptskonfigurację za pomocą biblioteki rescripts

To zadziałałoby wtedy:

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

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

  return config;
};

Myślę Lukas Bach rozwiązanie do użytku reagują-app-Rewired w celu zmodyfikowania WebPack config to dobra droga, jednak ja nie wyklucza cały ModuleScopePlugin ale zamiast białej listy konkretny plik, który może być importowany z zewnątrz 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;
};

Obraz w folderze publicznym

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

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

• użyj obrazu wewnątrz rozszerzenia js

Jeśli potrzebujesz tylko zaimportować pojedynczy plik, taki jak README.md lub package.json, możesz to jawnie dodać do 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()
      ]),
    ]
  }
}

najlepszym rozwiązaniem jest rozwidlenie react-scripts, jest to faktycznie wspomniane w oficjalnej dokumentacji, patrz: Alternatywy dla wyrzucania

Jeśli potrzebujesz wielu modyfikacji, na przykład podczas korzystania z projektowania Ant , możesz połączyć wiele funkcji, takich jak:

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

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

Dodając do odpowiedzi Bartka Maciejiczka, tak to wygląda z 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;
    }
  }
};