बनाएँ-प्रतिक्रिया-एप्लिकेशन src निर्देशिका के बाहर प्रतिबंध आयात करता है

Question

मैं create-react-app का उपयोग कर रहा हूं। मैं अपने अंदर की फ़ाइल से अपने सार्वजनिक फ़ोल्डर से एक छवि को कॉल करने का प्रयास कर रहा हूं src/components। मुझे यह त्रुटि संदेश प्राप्त हो रहा है।

./src/compहें/website_index.js मॉड्यूल नहीं मिला: आपने आयात करने का प्रयास किया ../..public/images/logo/WC-BlackonWhite.jpg जो प्रोजेक्ट src / निर्देशिका के बाहर आता है। Src के बाहर सापेक्ष आयात / समर्थित नहीं हैं। आप इसे src / के अंदर ले जा सकते हैं, या प्रोजेक्ट के नोड_मॉड्यूल्स / से इसे एक सिमलिंक जोड़ सकते हैं।

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

मैंने कई बातें पढ़ते हुए कहा है कि आप पथ का आयात कर सकते हैं, लेकिन यह अभी भी मेरे लिए काम नहीं कर रहा है। किसी भी तरह की सहायता का स्वागत किया जाएगा। मुझे पता है कि इस तरह के कई सवाल हैं, लेकिन वे सभी मुझे लोगो या छवि को आयात करने के लिए कह रहे हैं इसलिए स्पष्ट रूप से मुझे बड़ी तस्वीर में कुछ याद आ रहा है।

Comments

आप की जरूरत है ../public/images/logo_2016.pngआप दो बार ऊपर गए, पहले घटक फ़ोल्डर से बाहर, फिर src फ़ोल्डर से बाहर।

— क्रिस जी

./src/compहें/website_index.js मॉड्यूल नहीं मिला: आपने आयात करने का प्रयास किया ../..public/images/logo/WC-BlackonWhite.jpg जो प्रोजेक्ट src / निर्देशिका के बाहर आता है। Src के बाहर सापेक्ष आयात / समर्थित नहीं हैं। आप इसे src / के अंदर ले जा सकते हैं, या प्रोजेक्ट के नोड_मॉड्यूल्स / से इसे एक सिमलिंक जोड़ सकते हैं।

— डेविड ब्रेटन

मेरी टिप्पणी मानती है कि आपका publicफ़ोल्डर सीधे आपके srcफ़ोल्डर के अंदर है । आपकी टिप्‍पणीहीन टिप्‍पणी पुराने रास्‍ते को शुरू करती है ../..ताकि यह सुनिश्चित न हो कि आपकी बात क्‍या है?

— क्रिस जी

कोई भी सार्वजनिक स्तर पर src

— डेविड ब्रर्टन

क्या वे "द्वारा मतलब है या परियोजना के नोड_मॉड्यूल्स /" से इसे एक सिमलिंक जोड़ते हैं?

— जुला

Answer 1

यह विशेष प्रतिक्रिया है जो create-react-app के डेवलपर्स द्वारा जोड़ी गई है। यह ModuleScopePluginफाइलों में निवास सुनिश्चित करने के लिए लागू किया गया है src/। यह प्लगइन सुनिश्चित करता है कि ऐप के स्रोत निर्देशिका से संबंधित आयात इसके बाहर नहीं पहुंचें।

आप इस सुविधा को अक्षम कर सकते हैं लेकिन केवल ejectबनाने के बाद -प्रतिक्रिया-एप्लिकेशन परियोजना के संचालन के बाद ।

अधिकांश सुविधाएँ और इसके अपडेट्स क्रिएट-रिएक्शन-ऐप सिस्टम के इंटर्नल्स में छिपे हुए हैं। यदि आप बनाते हैं तो ejectआपके पास कुछ सुविधाएँ और उसका अद्यतन नहीं होगा। इसलिए यदि आप वेबपैक को कॉन्फ़िगर करने के लिए शामिल एप्लिकेशन को प्रबंधित और कॉन्फ़िगर करने के लिए तैयार नहीं हैं - तो ejectऑपरेशन न करें ।

मौजूदा नियमों (src के लिए कदम) द्वारा खेलते हैं। लेकिन अब आप जान सकते हैं कि प्रतिबंध को कैसे हटाया जाए: वेबपैक कॉन्फ़िगरेशन फ़ाइल से करें ejectऔर निकालेंModuleScopePlugin ।

---

के बाद से बनाने प्रतिक्रिया-ऐप v0.4.0NODE_PATH वातावरण चर पूर्ण आयात के लिए एक पथ निर्दिष्ट करने के लिए अनुमति देता है। और चूंकि v3.0.0 में या NODE_PATHसेटिंग के पक्ष में पदावनत किया गया है ।baseUrljsconfig.jsontsconfig.json

निरपेक्ष आयात आधार यूआरएल में निर्दिष्ट मूल्य के सापेक्ष उपयोग import App from 'App'करने की अनुमति देता है import App from './App'।

यह सुविधा विशेष रूप से मोनोरेपोज़ या अन्य कॉन्फ़िगरेशन प्रश्नों के लिए उपयोगी है, लेकिन छवियों या publicफ़ोल्डर से कुछ भी आयात करने के लिए नहीं ।

publicफ़ोल्डर की सामग्री फ़ोल्डर में रखी जाएगी buildऔर रिश्तेदार यूआरएल द्वारा उपलब्ध होगी। इसके अलावा, आयातित सभी चीजें वेबपैक द्वारा संसाधित की जाएंगी और इसे buildफ़ोल्डर में भी रखा जाएगा ।

यदि आप publicफ़ोल्डर से कुछ आयात करते हैं, तो संभवतः वह चीज़ buildफ़ोल्डर में डुप्लिकेट हो जाएगी और दो अलग-अलग यूआरएल (या लोड करने के विभिन्न तरीकों के साथ) उपलब्ध होगी, जो अंततः पैकेज डाउनलोड आकार को खराब करती है।

Src फ़ोल्डर से आयात करना बेहतर है और इसके फायदे हैं। सब कुछ वेबपैक द्वारा बंडल के साथ पैक किया जाएगा जिसमें चूजों का इष्टतम आकार और सर्वोत्तम लोडिंग दक्षता हो ।

---

इंटरमीडिएट समाधान हैं, अर्थात् रीवायर सिस्टम जो आपको वेबपैक कॉन्फ़िगरेशन को प्रोग्रामेटिक रूप से संशोधित करने की अनुमति देता है। लेकिन दूर करनेModuleScopePlugin प्लगइन एक अच्छा नहीं है समाधान; पूरी तरह से काम कर रहे अतिरिक्त निर्देशिकाओं को जोड़ना बेहतर है src।

वर्तमान में, रूट फ़ोल्डर के create-react-appअलावा अन्य अतिरिक्त निर्देशिकाओं का समर्थन नहीं करता है src। यह प्रतिक्रिया-ऐप-rewire-alias का उपयोग करके किया जा सकता है

Comments

यदि आप ./src के भीतर सिमलिंक बनाते हैं, और वहां से आयात करते हैं - बिल्ड काम नहीं करता है (बैबल प्लगइन सिम्लिंक किए गए फ़ोल्डरों में स्रोतों को रूपांतरित नहीं करता है)। इसलिए इस प्रतिबंध के साथ, src के तहत और नो-सिमलिंक पर, आपको प्रभावी रूप से 'नो-शेयरिंग-कोड-विद-अदर-प्रोजेक्ट्स' जेल में रखा गया है (जब तक कि आप CRA से पूरी तरह से बाहर नहीं निकलते / बाहर नहीं निकलते)

— VV

@VP, लेकिन त्रुटि कहती है, "प्रोजेक्ट के नोड_मॉड्यूल्स / से इसे सिम्बलिन जोड़ें", क्या यह काम नहीं करता है?

— एड्रिनमैक

वे इसे अक्षम करने के लिए एक झंडा बनाना चाहिए create-react-app, जो उन लोगों के लिए चल रहा है जो वेबपैक कॉन्फिगरेशन को बाहर नहीं करना चाहते हैं। व्यक्तिगत रूप से मैं हमेशा बेदखल करता हूं, लेकिन कुछ लोग वेबपैक डिंगिंग कॉन्फिग के साथ अभी तक खिलवाड़ करने में सहज महसूस नहीं करते हैं।

— तेतरादेव

@adrianmc। प्रोजेक्ट के नोड_मॉड्यूल्स से सिमलिंक जोड़ने से काम नहीं चलता है, क्योंकि कई प्रोजेक्ट शेयर घटकों / कोड का उपयोग करते हैं जो नोड_मॉड्यूल्स नहीं हैं। उदाहरण के लिए मैं रिएक्ट नेटिव और रिएक्ट देशी वेब के बीच कोड साझा करता हूं। वे 'स्निपेट' नोड_मॉड्यूल नहीं हैं, और इन 2 परियोजनाओं में वास्तव में अलग-अलग नोड_मॉडल हैं।

— वीपी

यह स्वीकृत उत्तर कैसे है? यह फर्जी प्रतिबंध केवल फ़ाइल NODE_PATH=./src/..में सेटिंग द्वारा तुच्छ रूप से समाप्त कर दिया गया है .env। ऐसा करने से, आप अपने ऐप को बाहर करने से जुड़े दर्द से गुजरे बिना src फ़ोल्डर के बाहर से आयात कर सकते हैं।

— फ्लैम

Answer 2

प्लगइन को निकालने के लिए पैकेज रिएक्शन-ऐप-रिवाइंड किया जा सकता है। इस तरह आपको बेदखल नहीं होना है।

Npm पैकेज पृष्ठ पर दिए गए चरणों का पालन करें (पैकेज को स्थापित करें और पैकेज में कॉल फ्लिप करें। फ़ाइल को खोलें) और config-overrides.jsइस तरह से एक फ़ाइल का उपयोग करें:

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

यह इस्तेमाल किए गए वेबपैक प्लगइन्स से ModuleScopePlugin को हटा देगा, लेकिन बाकी को वैसा ही छोड़ देगा और बाहर निकालने की आवश्यकता को हटा देगा।

Comments

बहुत बढ़िया जवाब। आप react-app-rewired[ github.com/arackaf/customize-craiding(customize-cra) के साथ आगे का लाभ उठा सकते हैं । फिर विन्यास सिर्फ babelInclude([path.resolve('src'), path.resolve('../common')])और सिर्फ उपयोग करेगा removeModuleScopePlugin()।

— ivosh

क्या आप कृपया पुष्टि कर सकते हैं कि मुझे यह कोड स्निपेट कहां रखना चाहिए?

— द्विजश्रेष्ठ

@bijayshrestha रिएक्ट-ऐप-रिवाइंड प्रोजेक्ट की रीडमी फ़ाइल पढ़ें, वहाँ यह समझाता है कि इसे कैसे सेट किया जाए। सेटअप के दौरान, आप एक config-overrides.jsफ़ाइल बनाएँगे जिसमें आप कोड रख सकते हैं।

— लुकास बाख

ModuleScopePluginप्लगइन को हटाना एक अच्छा विचार नहीं है। प्रतिक्रिया-src

— ऐप-

क्या यह समाधान टाइपस्क्रिप्ट के साथ काम करता है? मैं टीएस के साथ काम नहीं कर सकता।

— user3053247

Answer 3

अन्य उत्तरों के लिए थोड़ी अधिक जानकारी प्रदान करने के लिए। आपके पास उपयोगकर्ता के लिए .Png फ़ाइल वितरित करने के बारे में दो विकल्प हैं। फ़ाइल संरचना आपके द्वारा चुनी गई विधि के अनुरूप होनी चाहिए। दो विकल्प हैं:

1. import x from yप्रतिक्रिया-निर्माण-ऐप के साथ प्रदान किए गए मॉड्यूल सिस्टम ( ) का उपयोग करें और इसे अपने जेएस के साथ बंडल करें। छवि को srcफ़ोल्डर के अंदर रखें।

2. इसे publicफ़ोल्डर से परोसें और नोड को फ़ाइल परोसने दें। create-react-app भी जाहिरा तौर पर एक पर्यावरण चर उदाहरण के साथ आता है <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;। इसका मतलब है कि आप इसे अपने रिएक्ट ऐप में रेफर कर सकते हैं लेकिन फिर भी इसे नोड के माध्यम से परोसा जाता है, आपके ब्राउज़र ने इसे सामान्य रीट रिक्वेस्ट में अलग से मांगा है।

स्रोत: create-reaction-app

Comments

सुझाव # 2 बिल्कुल वही है जो मेरे लिए निम्न त्रुटि का कारण बनता है: मॉड्यूल नहीं मिला: आपने आयात करने का प्रयास किया। । Src के बाहर सापेक्ष आयात / समर्थित नहीं हैं। आप इसे src / के अंदर ले जा सकते हैं, या प्रोजेक्ट के नोड_मॉड्यूल्स / से इसे एक सिमलिंक जोड़ सकते हैं।

— आमोस लॉन्ग

Answer 4

यदि आपकी छवियां सार्वजनिक फ़ोल्डर में हैं, तो आपको उपयोग करना चाहिए

"/images/logo_2016.png"

<img> srcआयात करने के बजाय अपने में

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

यह काम करेगा

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

Comments

मेरे लिए काम नहीं कर रहा है। एक ही संदेश प्राप्त करना - 'प्रोजेक्ट src / निर्देशिका के बाहर। Src के बाहर सापेक्ष आयात / समर्थित नहीं हैं। '

— अर्कादि

आपका उत्तर सही है IMO लेकिन मैंने स्पष्ट करने की स्वतंत्रता ली कि आप रास्ते में बात कर रहे हैं <img src="...">, इसे आयात नहीं कर रहे हैं

— दिमित्री युडाकोव

यह ठीक वही है जिसकी मुझे तलाश थी! मैंने अपने CRA के "src" निर्देशिका में बस एक "चित्र" फ़ोल्डर जोड़ा, और फिर मैं उपयोग करने में सक्षम था<img src="/images/logo.png" alt="Logo" />

— अमोस लॉन्ग

Answer 5

आपको WC-BlackonWhite.jpgअपनी srcनिर्देशिका में जाने की आवश्यकता है । publicनिर्देशिका स्टैटिक फ़ाइलें (जैसे फ़ेविकॉन के रूप में) को सीधे HTML में जोड़ा जा रहा है, न सामान है कि आप अपने बंडल में सीधे आयात करने के लिए जा रहे हैं के लिए है।

Comments

मैंने दूसरों को इस तरह से करते देखा है। यही कारण है कि मुझे लगा कि यह उचित तरीका है

— डेविड ब्रिएर्टन

@DavidBrierton: इस एहतियात को हाल ही में वर्जन-रिएक्शन-ऐप में जोड़ा गया है।

— जो क्ले

Answer 6

कुछ उत्तर हैं जो समाधान प्रदान करते हैं react-app-rewired, लेकिन customize-craएक विशेष removeModuleScopePlugin()एपीआई को उजागर करते हैं जो थोड़ा अधिक सुरुचिपूर्ण है। (यह एक ही समाधान है, लेकिन customize-craपैकेज से दूर है ।)

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

Comments

आपने मेरा दिन बचाया!

— lmiguelvargasf

Answer 7

क्रैको का उपयोग करके इसे निकालें:

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

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

Comments

क्रैको के लिए वोट करें!

— क्रैको

Answer 8

यह प्रतिबंध सुनिश्चित करता है कि सभी फाइलें या मॉड्यूल (निर्यात) src/निर्देशिका के अंदर हैं , कार्यान्वयन ./node_modules/react-dev-utils/ModuleScopePlugin.jsकोड की निम्नलिखित पंक्तियों में है।

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

आप इस प्रतिबंध को हटा सकते हैं

1. या तो इस कोड को बदलना (अनुशंसित नहीं)
2. या हैeject तो हटाने ModuleScopePlugin.jsनिर्देशिका से।
3. या टिप्पणी / निकालें const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');से./node_modules/react-scripts/config/webpack.config.dev.js

पुनश्च: बेदखल के परिणामों से सावधान रहें ।

Comments

धन्यवाद @ SajajRao, मैंने इसे यहाँ स्थानांतरित किया। मुझे उम्मीद है कि यह बेहतर होगा।

— इसका 4zahoor

@PattycakeJr हां, यही कारण है कि नीचे मैंने बेदखल करने के परिणामों को बताया है।

— इसका4zahoor

Answer 9

इन दो पैकेजों को स्थापित करें

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

Answer 10

आपको बेदखल करने की आवश्यकता नहीं है, आप react-scriptsकॉन्फ़िगरेशन को लाइब्रेरी के साथ संशोधित कर सकते हैं

यह तब काम करेगा:

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

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

  return config;
};

Answer 11

मुझे लगता है कि वेबपैक कॉन्फिगरेशन को संशोधित करने के लिए लुकास बाच सॉल्यूशन का उपयोग रिएक्शन-ऐप-रिवाइंड करने के लिए किया जाता है, हालांकि, यह एक अच्छा तरीका है, लेकिन मैं पूरे मॉड्यूलस्कॉपप्लगिन को बाहर नहीं करूंगा, लेकिन इसके बजाय विशिष्ट फाइल को सफ़ेद करें जो 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;
};

Comments

इस प्रकार यह सबसे अच्छा समाधान है।

— adi518

Answer 12

सार्वजनिक फ़ोल्डर के अंदर छवि

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

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

• जेएस एक्सटेंशन के अंदर छवि का उपयोग करें

Answer 13

यदि आपको केवल एक फ़ाइल आयात करने की आवश्यकता है, जैसे कि README.md या package.json, तो यह स्पष्ट रूप से 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()
      ]),
    ]
  }
}

Comments

इसके लिए पहले क्रिएट-रिएक्शन-ऐप से इजेक्शन चाहिए, नहीं?

— ब्यू स्मिथ

Answer 14

सबसे अच्छा समाधान कांटा है react-scripts, यह वास्तव में आधिकारिक दस्तावेज में उल्लिखित है, देखें: बेदखल करने के लिए विकल्प

Answer 15

यदि आपको कई संशोधनों की आवश्यकता है, जैसे चींटी डिजाइन का उपयोग करते समय , आप इस तरह से कई कार्यों को जोड़ सकते हैं:

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

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

Answer 16

बार्टेक मेकियेजिकेक के जवाब में जोड़ना, यह है कि यह क्रैको के साथ कैसा दिखता है:

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