তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশনটি এসআরসি ডিরেক্টরিগুলির বাইরে সীমাবদ্ধতা আমদানি করে

Question

আমি তৈরি-প্রতিক্রিয়া-অ্যাপ ব্যবহার করছি। আমি আমার ভিতরে থাকা কোনও ফাইল থেকে আমার পাবলিক ফোল্ডার থেকে একটি চিত্র কল করার চেষ্টা করছি src/components। আমি এই ত্রুটি বার্তা পাচ্ছি।

। 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 এর বাইরে সম্পর্কিত আমদানিগুলি সমর্থিত নয়। আপনি এটি হয় এসসিআর / এর ভিতরে সরাতে পারেন, বা প্রকল্পের নোড_মডিউলগুলি / থেকে এটিতে একটি সিমিলিংক যুক্ত করতে পারেন।

— ডেভিড বিয়ারটন

আমার মন্তব্য ধরে নিয়েছে যে আপনার publicফোল্ডারটি সরাসরি আপনার srcফোল্ডারের ভিতরে রয়েছে । আপনার মন্তব্যবিহীন মন্তব্যে পুরানো পথটি বৈশিষ্ট্যযুক্ত ../..যা আপনার পয়েন্টটি কী তা নিশ্চিত নয়?

— ক্রিস জি

কোনও পাবলিক এসআরসি

— ডেভিড ব্রায়ারটন

তারা "বা প্রকল্পের নোড_মডিউলগুলি /" থেকে এতে একটি সিমলিংক যুক্ত বলতে কী বোঝায়?

— জুলা

Answer 1

এটি তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশনগুলির বিকাশকারীদের দ্বারা যুক্ত করা বিশেষ সীমাবদ্ধতা। ModuleScopePluginফাইলগুলি অন্তর্ভুক্ত থাকে তা নিশ্চিত করতে এটি প্রয়োগ করা হয় src/। এই প্লাগইনটি নিশ্চিত করে যে অ্যাপ্লিকেশনটির উত্স ডিরেক্টরি থেকে আপেক্ষিক আমদানিগুলি এর বাইরে না পৌঁছায়।

আপনি এই বৈশিষ্ট্যটি অক্ষম করতে পারবেন তবে কেবল ejectতৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন প্রকল্পের ক্রিয়াকলাপের পরে ।

সর্বাধিক বৈশিষ্ট্য এবং এর আপডেটগুলি তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন সিস্টেমের অভ্যন্তরের মধ্যে লুকানো থাকে। আপনি যদি তৈরি করেন তবে ejectআপনার আর কিছু বৈশিষ্ট্য এবং এর আপডেট থাকবে না। সুতরাং আপনি যদি ওয়েবপ্যাক কনফিগার করার জন্য অন্তর্ভুক্ত অ্যাপ্লিকেশন পরিচালনা এবং কনফিগার করতে প্রস্তুত না হন এবং ejectঅপারেশন করবেন না -

বিদ্যমান নিয়মগুলি (এসসিআর তে সরান) দিয়ে খেলুন। তবে এখন আপনি কীভাবে সীমাবদ্ধতা অপসারণ করবেন তা জানতে পারবেন: ওয়েবপ্যাক কনফিগারেশন ফাইল থেকে করুন ejectএবং সরানModuleScopePlugin ।

---

যেহেতু তৈরি-প্রতিক্রিয়া-অ্যাপ v0.4.0NODE_PATH এনভায়রনমেন্ট ভেরিয়েবল পরম আমদানির জন্য একটি পাথ নির্দিষ্ট করার অনুমতি দেয়। যেহেতু v3.0.0 NODE_PATH সেটিং পক্ষে অবচিত baseUrlমধ্যে jsconfig.jsonবা tsconfig.json।

নিখুঁত আমদানি বেস url এ উল্লিখিত মানটির import App from 'App'পরিবর্তে ব্যবহারের অনুমতি দেয় import App from './App'।

এই বৈশিষ্ট্যটি মনোোরপোস বা অন্যান্য কনফিগারেশন প্রশ্নগুলির জন্য বিশেষভাবে কার্যকর তবে publicফোল্ডার থেকে চিত্র বা অন্য কিছু আমদানির জন্য নয় ।

publicফোল্ডারের সামগ্রী ফোল্ডারে স্থাপন করা হবে buildএবং আপেক্ষিক ইউআরএল দ্বারা উপলব্ধ হবে। এছাড়াও, আমদানি করা সমস্ত কিছু ওয়েবপ্যাক দ্বারা প্রক্রিয়াজাত করা হবে এবং buildফোল্ডারেও স্থাপন করা হবে ।

আপনি যদি publicফোল্ডার থেকে কিছু আমদানি করেন তবে সম্ভবত সেই জিনিসটি ফোল্ডারে নকল হয়ে যাবে buildএবং দুটি পৃথক ইউআরএল (বা লোড করার বিভিন্ন উপায়ে) দ্বারা উপলব্ধ হবে, যা শেষ পর্যন্ত প্যাকেজ ডাউনলোডের আকারকে আরও খারাপ করে।

এসআরসি ফোল্ডার থেকে আমদানি করাই শ্রেয় এবং এর সুবিধাগুলি রয়েছে। সমস্ত কিছু ওয়েবপ্যাকের মাধ্যমে খণ্ডগুলি অনুকূল আকারের এবং সেরা লোডিং দক্ষতার জন্য বান্ডলে প্যাক করা হবে ।

---

মধ্যবর্তী সমাধান রয়েছে, যথা: রিওয়াইর সিস্টেম যা আপনাকে ওয়েবপ্যাক কনফিগারেশনে প্রোগ্রামালিমে সংশোধন করতে দেয়। কিন্তু সরানোরModuleScopePlugin প্লাগইন একটি ভালো নয় সমাধান; এটির মতো সম্পূর্ণ অতিরিক্ত কাজ করা ডিরেক্টরিগুলি যুক্ত করা আরও ভাল src।

বর্তমানে, রুট ফোল্ডার create-react-appব্যতীত অতিরিক্ত ডিরেক্টরিগুলি সমর্থন করে না src। এটি প্রতিক্রিয়া-অ্যাপ-রিওয়্যার-উপনাম ব্যবহার করে করা যেতে পারে

Comments

আপনি যদি ./src এর মধ্যে সিমলিংক তৈরি করেন এবং সেখান থেকে আমদানি করেন - বিল্ডটি কাজ করে না (বাবেল প্লাগইন সিমলিংকযুক্ত ফোল্ডারে উত্সকে রূপান্তরিত করে না)। সুতরাং এই বিধিনিষেধের সাথে, এসআরসি-এর আওতায় এবং নন-সিমিলিংক দিয়ে আপনাকে কার্যকরভাবে একটি 'নো-শেয়ারিং-কোড-সহ-অন্যান্য-প্রকল্প' কারাগারে রাখা হবে (যদি না আপনি সিআরএ থেকে পুরোপুরি দেশত্যাগ / বহিষ্কার না করেন)

— ভিপি

@ ভিপি কিন্তু ত্রুটিটি "প্রকল্পের নোড_মডিউলগুলি / থেকে এটিতে একটি সিমলিংক যুক্ত করতে" বলে, এটি কি কাজ করে না?

— অ্যাড্রিয়ানমসি

create-react-appযারা ওয়েবপ্যাক কনফিগারেশন বের করতে চান না তাদের জন্য দৌড়ানোর সময় তাদের এটি অক্ষম করার জন্য একটি পতাকা তৈরি করা উচিত । ব্যক্তিগতভাবে আমি সর্বদা উত্সাহিত করি, তবে কিছু লোক ওয়েবপ্যাকগুলি ঝুঁকিপূর্ণ কনফিগারেশনের সাথে বিশৃঙ্খলা করতে স্বাচ্ছন্দ্য বোধ করে না।

— তেত্রদেব

@adrianmc। প্রকল্পের নোড_মডিউলগুলি থেকে সিমলিংক যুক্ত করা কার্যকর হয় না, কারণ অনেক প্রকল্প নোড_মডিউলগুলি নয় এমন অংশগুলি / কোড ব্যবহার করে। উদাহরণস্বরূপ আমি প্রতিক্রিয়া নেটিভ এবং প্রতিক্রিয়া নেটিভ ওয়েবের মধ্যে কোড ভাগ করি। এই 'স্নিপেটস' নোড_মডিউল নয় এবং এই 2 টি প্রকল্পের আসলে আলাদা নোড_মডিউল রয়েছে।

— ভিপি

এটি কীভাবে গৃহীত উত্তর? এই বাজে সীমাবদ্ধতা জাভাস্ক্রিপ্টে গার্বেজ কেবল সেটিং দ্বারা দূর হয়ে যায় NODE_PATH=./src/..এ .envফাইল। এটি করে আপনি নিজের অ্যাপ্লিকেশনটি বের করে দেওয়ার সাথে সম্পর্কিত ব্যথা না পেরে src ফোল্ডারের বাইরে থেকে আমদানি করতে পারেন।

— শিখর

Answer 2

প্লাগইনটি সরিয়ে ফেলতে প্যাকেজটির রিঅ্যাক্ট-অ্যাপ-রিওয়ার্ড ব্যবহার করা যেতে পারে। এইভাবে আপনাকে বের করে দিতে হবে না।

এনপিএম প্যাকেজ পৃষ্ঠাতে পদক্ষেপগুলি অনুসরণ করুন (প্যাকেজটি ইনস্টল করুন এবং প্যাকেজ.জসন ফাইলটিতে কলগুলি ফ্লিপ করুন) এবং এর 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;
};

এটি ব্যবহৃত ওয়েবপ্যাক প্লাগইনগুলি থেকে মডিউলস্কোপপ্লাগিন সরিয়ে ফেলবে, তবে বাকিটি যেমন ছিল তেমন ছেড়ে দেবে এবং বের করার প্রয়োজনীয়তা সরিয়ে ফেলবে।

Comments

দুর্দান্ত উত্তর। আপনি react-app-rewired[ github.com/arackaf/customize-cra50(customize-cra) এর সাথে আরও লিভারেজ করতে পারেন । তারপরে কনফিগারটি কেবলমাত্র babelInclude([path.resolve('src'), path.resolve('../common')])এবং ব্যবহার করবে removeModuleScopePlugin()।

— আইভোশ

আপনি কি দয়া করে এই কোড স্নিপেটটি কোথায় রাখবেন তা নিশ্চিত করতে পারেন?

— বিজয়শ্রেষ্ঠ

@ বিজয়শ্রেষ্ঠ রিঅ্যাক্ট-অ্যাপ-রিওয়ার্ডড প্রকল্পের রিডমি ফাইলটি পড়ুন, সেখানে এটি কীভাবে সেট আপ করবেন তা ব্যাখ্যা করা হয়েছে। সেটআপের সময় আপনি একটি config-overrides.jsফাইল তৈরি করবেন যাতে আপনি কোডটি রাখতে পারেন।

— Lukas বাচ

ModuleScopePluginপ্লাগইন অপসারণ করা ভাল ধারণা নয়। এটি সম্পূর্ণরূপে অনুরূপ অতিরিক্ত ডিরেক্টরি কাজ যোগ করার জন্য উত্তম srcব্যবহার প্রতিক্রিয়া-অ্যাপ-বৈদ্যুতিক তার লাগানো-ওরফে

— oklas

এই সমাধানটি টাইপস্ক্রিপ্ট দিয়ে কাজ করে? আমি এটি টিএস দিয়ে কাজ করতে পারি না।

— ব্যবহারকারী 3053247

Answer 3

অন্যের উত্তরে কিছুটা বেশি তথ্য সরবরাহ করা। ব্যবহারকারীকে .png ফাইলটি কীভাবে সরবরাহ করবেন সে সম্পর্কে আপনার কাছে দুটি বিকল্প রয়েছে। ফাইল কাঠামোটি আপনার চয়ন করা পদ্ধতির সাথে সামঞ্জস্য করা উচিত। দুটি বিকল্প হ'ল:

1. import x from yবিক্রিয়া-অ্যাপ্লিকেশন সহ সরবরাহ করা মডিউল সিস্টেম ( ) ব্যবহার করুন এবং এটি আপনার জেএসের সাথে বান্ডিল করুন। srcফোল্ডারের ভিতরে চিত্রটি রাখুন ।

2. এটি publicফোল্ডার থেকে পরিবেশন করুন এবং নোডকে ফাইলটি পরিবেশন করুন। তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশনটি স্পষ্টতই একটি পরিবেশের পরিবর্তনশীল উদাহরণ সহ আসে <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;। এর অর্থ আপনি আপনার প্রতিক্রিয়া অ্যাপ্লিকেশনটিতে এটি উল্লেখ করতে পারেন তবে আপনার ব্রাউজারটি একটি সাধারণ জিইটি অনুরোধে পৃথকভাবে এটির জন্য জিজ্ঞাসা করে নোডের মাধ্যমে সরবরাহ করেছে।

উত্স: তৈরি-প্রতিক্রিয়া-অ্যাপ

Comments

পরামর্শ # 2 হ'ল আমার জন্য নিম্নলিখিত ত্রুটির কারণ হ'ল: মডিউলটি পাওয়া যায় নি: আপনি আমদানির চেষ্টা করেছিলেন। । 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 এর বাইরে সম্পর্কিত আমদানি / সমর্থিত নয় ''

— আরকাদি

আপনার উত্তরটি সঠিক আইএমও, তবে আপনি যে পথটি <img src="...">আমদানি করছেন না সে সম্পর্কে কথা বলার স্বাধীনতা নিয়েছি

— দিমিত্রি যুদাভভ

আমি যা খুঁজছিলাম ঠিক এটাই ছিল! আমি কেবল আমার সিআরএর "এসসিআর" ডিরেক্টরিতে একটি "চিত্র" ফোল্ডার যুক্ত করেছি এবং তারপরে আমি ব্যবহার করতে সক্ষম হয়েছি<img src="/images/logo.png" alt="Logo" />

— আমোস লং

Answer 5

WC-BlackonWhite.jpgআপনার srcডিরেক্টরিতে যেতে হবে । publicডিরেক্টরি স্ট্যাটিক ফাইল (যেমন ফেভিকন হিসেবে) HTML এ সরাসরিভাবে লিঙ্ক হতে যাচ্ছে, তাই না কাপড় যে আপনি আপনার বান্ডিল মধ্যে সরাসরি আমদানি করতে যাচ্ছেন জন্য।

Comments

আমি অন্যকে এইভাবে করতে দেখেছি। আমি কেন এটি যথাযথ উপায় বলে মনে করি

— ডেভিড বিয়ার্টন

@ ডেভিডবায়ারটন: এই সতর্কতাটি তৈরি করতে হবে-রিঅ্যাক্ট-অ্যাপের আরও সাম্প্রতিক সংস্করণে।

— জো ক্লে

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",
    ...
},

কনফিগ-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

ধন্যবাদ @ সুরজরাও, আমি এটিকে এখানে স্থানান্তরিত করেছি। আমি আশা করি এটি আরও ভাল।

— it4zahoor

@ প্যাটিকেকআর হ্যাঁ, সে কারণেই নীচে আমি নির্গত পরিণতির বিষয়ে সতর্ক থাকতে বলেছি।

— it4zahoor

Answer 9

এই দুটি প্যাকেজ ইনস্টল করুন

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

package.json

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

কনফিগ-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

আমি মনে করি ওয়েবপ্যাক কনফিগারেশনটি সংশোধন করার জন্য রিয়্যাক্ট-অ্যাপ- রিভাইয়ার ব্যবহার করার জন্য লুকাশ বাখ সমাধানটি যাওয়ার একটি ভাল উপায়, তবে আমি পুরো মডিউলস্কোপ প্লাগইনকে বাদ দেই না বরং পরিবর্তে এসআরসি-র বাইরে আমদানি করা যায় এমন নির্দিষ্ট ফাইলটিকে শ্বেত তালিকাতে তালিকাবদ্ধ করব :

কনফিগ-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 () এ যুক্ত করা যেতে পারে

কনফিগ / 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, এটি সরকারী দস্তাবেজগুলিতে আসলে উল্লেখ করা হয়েছে, দেখুন: উত্সর্গের বিকল্প ternative

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