Pembatasan impor buat-reaksi-aplikasi di luar direktori src

Saya menggunakan aplikasi create-react-app. Saya mencoba memanggil gambar dari folder publik saya dari file di dalam folder saya src/components. Saya menerima pesan kesalahan ini.

./src/components/website_index.js Modul tidak ditemukan: Anda berusaha mengimpor ../../public/images/logo/WC-BlackonWhite.jpg yang berada di luar direktori src / direktori proyek. Impor relatif di luar src / tidak didukung. Anda dapat memindahkannya di dalam src /, atau menambahkan symlink ke sana dari node_modules proyek /.

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

Saya telah membaca banyak hal yang mengatakan bahwa Anda dapat melakukan impor ke jalan tetapi itu masih tidak berfungsi untuk saya. Bantuan apa pun akan sangat dihargai. Saya tahu ada banyak pertanyaan seperti ini tetapi mereka semua mengatakan kepada saya untuk mengimpor logo atau gambar sehingga jelas saya kehilangan sesuatu di gambar besar.

Ini adalah batasan khusus yang ditambahkan oleh pengembang aplikasi create-react-app. Ini diterapkan ModuleScopePluginuntuk memastikan file berada src/. Plugin itu memastikan bahwa impor relatif dari direktori sumber aplikasi tidak mencapai di luarnya.

Anda dapat menonaktifkan fitur ini tetapi hanya setelah ejectoperasi proyek create-react-app.

Sebagian besar fitur dan pembaruannya disembunyikan di bagian dalam sistem create-react-app. Jika Anda membuatnya, ejectAnda tidak akan lagi memiliki beberapa fitur dan pembaruannya. Jadi jika Anda belum siap untuk mengelola dan mengkonfigurasi aplikasi yang disertakan untuk mengkonfigurasi webpack dan sebagainya - jangan lakukan ejectoperasi.

Mainkan dengan aturan yang ada (pindahkan ke src). Tapi sekarang Anda bisa tahu cara menghapus pembatasan: lakukan ejectdan hapus ModuleScopePlugindari file konfigurasi webpack .

Sejak membuat-bereaksi-aplikasi v0.4.0 yang NODE_PATHvariabel lingkungan memungkinkan untuk menentukan path untuk impor mutlak. Dan sejak v3.0.0 NODE_PATH tidak digunakan lagi karena pengaturan baseUrlpada jsconfig.jsonatau tsconfig.json.

Impor absolut memungkinkan penggunaan import App from 'App'alih - alih import App from './App'relatif terhadap nilai yang ditentukan dalam url basis.

Fitur ini secara khusus berguna untuk monorepos atau pertanyaan konfigurasi lain tetapi tidak untuk mengimpor gambar atau apa pun dari publicfolder.

Isi dari public folder akan ditempatkan di buildfolder dan tersedia dengan url relatif. Juga, semua yang diimpor akan diproses oleh webpack dan akan ditempatkan juga di buildfolder.

Jika Anda mengimpor sesuatu dari public folder mungkin benda itu akan diduplikasi dalam buildfolder dan akan tersedia oleh dua url yang berbeda (atau dengan berbagai cara memuat), yang pada akhirnya memperburuk ukuran unduhan paket.

Mengimpor dari folder src lebih disukai dan memiliki kelebihan. Semuanya akan dikemas oleh webpack ke bundel dengan potongan ukuran optimal dan untuk efisiensi pemuatan terbaik .

Ada solusi perantara, yaitu sistem rewire yang memungkinkan Anda untuk memodifikasi konfigurasi webpack secara terprogram. Tapi menghapus yang ModuleScopePluginPlugin tidak baik sebuah solusi; lebih baik menambahkan direktori tambahan yang berfungsi penuh seperti src.

Saat ini, create-react-apptidak mendukung direktori tambahan selain srcdi folder root. Ini dapat dilakukan dengan menggunakan react-app-rewire-alias

Paket react-app-rewired dapat digunakan untuk menghapus plugin. Dengan cara ini Anda tidak perlu mengeluarkan.

Ikuti langkah-langkah pada halaman paket npm (instal paket dan balikkan panggilan dalam file package.json) dan gunakan config-overrides.jsfile yang mirip dengan ini:

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

Ini akan menghapus ModuleScopePlugin dari plugin WebPack yang digunakan, tetapi biarkan sisanya seperti semula dan menghapus keharusan untuk mengeluarkan.

Untuk menawarkan sedikit informasi lebih banyak ke jawaban orang lain. Anda memiliki dua opsi tentang cara mengirim file .png ke pengguna. Struktur file harus sesuai dengan metode yang Anda pilih. Dua opsi tersebut adalah:

1. Gunakan sistem modul ( import x from y) yang disediakan dengan reaksi-buat-aplikasi dan bundel dengan JS Anda. Tempatkan gambar di dalam srcfolder.

2. Sajikan dari publicfolder dan biarkan Node melayani file. buat-reaksi-aplikasi juga tampaknya dilengkapi dengan variabel lingkungan mis <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;. Ini berarti Anda dapat mereferensikannya di aplikasi Bereaksi Anda tetapi masih disajikan melalui Node, dengan browser Anda memintanya secara terpisah dalam permintaan GET normal.

Sumber: create-react-app

Jika gambar Anda ada di folder publik maka Anda harus menggunakan

"/images/logo_2016.png"

di <img> srcalih-alih mengimpor

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

Ini akan bekerja

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

Anda harus pindah WC-BlackonWhite.jpgkesrc direktori . The publicdirektori untuk file statis yang akan dihubungkan langsung dalam HTML (seperti favicon), tidak hal-hal yang Anda akan mengimpor langsung ke bundel Anda.

Ada beberapa jawaban yang memberikan solusi react-app-rewired, tetapi customize-cramemperlihatkan removeModuleScopePlugin()API khusus yang sedikit lebih elegan. (Ini solusi yang sama, tetapi disarikan oleh customize-crapaket.)

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

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

Pembatasan ini memastikan semua file atau modul (ekspor) berada di dalam src/direktori, implementasinya dalam ./node_modules/react-dev-utils/ModuleScopePlugin.js, dalam baris kode berikut.

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

Anda dapat menghapus batasan ini dengan

1. baik mengubah bagian kode ini (tidak disarankan)
2. atau lakukaneject kemudian hapus ModuleScopePlugin.jsdari direktori.
3. atau komentar / hapus const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');dari./node_modules/react-scripts/config/webpack.config.dev.js

PS: waspadalah terhadap konsekuensi dari eject .

instal kedua paket ini

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

Anda tidak perlu mengeluarkan, Anda dapat memodifikasi react-scriptskonfigurasi dengan pustaka reskrip

Ini akan berhasil kemudian:

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

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

  return config;
};

Saya pikir solusi Lukas Bach untuk menggunakan reaksi-aplikasi-rewired untuk memodifikasi konfigurasi webpack adalah cara yang baik untuk pergi, namun, saya tidak akan mengecualikan seluruh ModuleScopePlugin tetapi sebaliknya memasukkan daftar putih file tertentu yang dapat diimpor di luar 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;
};

Gambar di dalam folder publik

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

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

• gunakan gambar di dalam js Extension

Jika Anda hanya perlu mengimpor satu file, seperti README.md atau package.json, maka ini dapat secara eksplisit ditambahkan ke 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()
      ]),
    ]
  }
}

solusi terbaik adalah dengan garpu react-scripts, ini sebenarnya disebutkan dalam dokumentasi resmi, lihat: Alternatif untuk Mengeluarkan

Jika Anda memerlukan banyak modifikasi, seperti saat menggunakan desain semut , Anda dapat menggabungkan beberapa fungsi seperti ini:

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

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

Menambah jawaban Bartek Maciejiczek, beginilah tampilannya dengan 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;
    }
  }
};