আনকড ত্রুটি: আক্রমণকারী লঙ্ঘন: এলিমেন্টের ধরণটি অবৈধ: একটি স্ট্রিং (অন্তর্নির্মিত উপাদানগুলির জন্য) বা শ্রেণি / ফাংশন প্রত্যাশিত কিন্তু পেয়েছে: বস্তু


528

আমি এই ত্রুটি পাচ্ছি:

আনকচড ত্রুটি: আক্রমণকারী লঙ্ঘন: এলিমেন্ট প্রকারটি অবৈধ: একটি স্ট্রিং (অন্তর্নির্মিত উপাদানগুলির জন্য) বা শ্রেণি / ফাংশন (সংমিশ্রিত উপাদানগুলির জন্য) প্রত্যাশিত তবে পেয়েছে: অবজেক্ট।

এটি আমার কোড:

var React = require('react')
var ReactDOM =  require('react-dom')
var Router = require('react-router')
var Route = Router.Route
var Link = Router.Link

var App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
        </ul>
      </div>
    )
  }
})

var About = require('./components/Home')
ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
    </Route>
  </Router>
), document.body)

আমার Home.jsxফাইল:

var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');

var Home = React.createClass({
  render:function() {
    return (
        <RaisedButton label="Default" />
    );
  },
});

module.exports = Home;



আপনি যদি অস্তিত্বের উপাদানটি আমদানির চেষ্টা করেন তবে এই ত্রুটিটি বাড়তে পারে । নিশ্চিত করুন যে আপনার কোনও টাইপো নেই এবং সেই উপাদানটির নাম প্রকৃতপক্ষে named গ্রন্থাগারগুলির ক্ষেত্রে নিশ্চিত হয়ে নিন যে আপনি সঠিক সংস্করণটি ব্যবহার করেছেন, যেহেতু উপাদানগুলির বিভিন্ন সংস্করণে বিভিন্ন নাম থাকতে পারে।
টটিমেডলি

আপনি ইতিমধ্যে আমদানি করা উপাদান হিসাবে একই নাম সহ কোনও ES6 ধ্বংসের মাধ্যমে কোনও সম্পত্তি সংজ্ঞায়িত করার সময়ও এটি ঘটতে পারে (এবং এটি অন্য কোনও উপাদানকে দেওয়ার চেষ্টা করুন)।
ফিলিপ মারফি

উত্তর:


885

আমার ক্ষেত্রে ( ওয়েবপ্যাক ব্যবহার করে ) এটির মধ্যে পার্থক্য ছিল:

import {MyComponent} from '../components/xyz.js';

বনাম

import MyComponent from '../components/xyz.js';

দ্বিতীয়টি কাজ করে যখন প্রথম ত্রুটি ঘটায়। বা বিপরীত।


81
গুগলারের ভবিষ্যত থেকে এখানে, ধন্যবাদ এটি আমার সমস্যা ছিল! প্রথমটি রফতানির কাঠামোগত হওয়ায় এটি পূর্ববর্তী ক্ষেত্রে অর্থবোধ করে, তবে আপনি যদি ডিফল্ট ব্যবহার করেন তবে এটি কেবল কোনও ফাংশন / শ্রেণীর কাঠামো তৈরির চেষ্টা করছে।
ইবোলিয়েন

3
ভবিষ্যতের লোকদের জন্য, আমার কেসটি আমি ব্যবহৃত উপাদানটির টাইপ ছিল। আমি পরিবর্তন <TabBarIOS.item>করতে<TabBarIOS.Item>
রায়ান-নীল মেস

6
বিশাল. কেন এই ক্ষেত্রে?
lol

45
যে কারও জন্য এখনও এটি ভাবছে যে কেন এটি কাজ করে - {মাইকিম্পোনেন্ট 'রফতানি' মাই কম্পোম্পোন্ট 'ফাইলটি' ../compferences/xyz.js ' থেকে আমদানি করে - দ্বিতীয় ' ../compferences/xyz.js 'থেকে ডিফল্ট আমদানি আমদানি করে ।
শানইয়ার্সট্রং

এটি মাই কম্পোম্পোনেন্টের অভ্যন্তরে আমদানির কারণেও হতে পারে। আমার ক্ষেত্রে ত্রুটি MyComponent উল্লেখ করা হয়েছে, কিন্তু এটি ভিতরে আসলে ইম্পোর্ট বিবৃতিটি rror কারণ: আমদানি {SomeLibraryCompenent} থেকে 'কিছু-গ্রন্থাগার'
ykorach

159

আপনার রফতানি ডিফল্ট প্রয়োজন বা (পথ) .ডাফাল্টের প্রয়োজন

var About = require('./components/Home').default

2
'রিএ্যাক্ট-নেটিভ-নাবার' নিয়ে আমার এই সমস্যাটি ছিল। আমি প্রয়োজনের ভিত্তিতে ডিফল্ট বলেছি এবং এটি আমার সমস্যাটি স্থির করেছে। ধন্যবাদ।
ভারান্দ পেজেস্কিয়ান

3
হুঁ, আমার ক্ষেত্রে ডিফল্ট সমস্যাটি সমাধান করে। যাইহোক, আমি আসলে রপ্তানি ডিফল্ট '.default' ছাড়া বাড়ি যে বর্গ উপর কম্পোনেন্ট প্রসারিত, তাই আমি এটা কাজ করবে বলে আশা করা যেত am
মার্ক

3
আমরা দয়া করে কারণটি ব্যাখ্যা করতে পারি যখন আমরা ডিফল্ট যুক্ত করি তখন কী হয়?
সুবহাম ত্রিপাঠি

1
এটি কাজ করেছে তবে কেউ .default কী করে সে সম্পর্কে একটি ব্যাখ্যা দিতে পারে।
বুড়াক করাসয়ে

1
@ বুর্ককারাসয় আপনার বাডেল প্রয়োজন কারণ যেহেতু বাবেল স্ট্যান্ডার্ড পদ্ধতিতে মডিউলগুলি তৈরি করে তা export defaultবিবৃতিতে রূপান্তর করা exports.defaultযাতে আপনি .defaultমডিউলটি আমদানি করার সময় ব্যবহার করতে হয়। এ থেকে মুক্তি পাওয়ার এক উপায় হ'ল ব্যাবেল-প্লাগ-ইন-অ্যাড-মডিউল-রফতানি যা ডিফল্ট আচরণ পুনরুদ্ধার করে।
জিন-ব্যাপটিস্ট লৌজেল

54

আপনি কি কেবলমাত্র আপনার প্রতিক্রিয়া উপাদানগুলির কোনও মডুলারিজ করেছেন? যদি হ্যাঁ হয় তবে আপনি এই ত্রুটিটি পাবেন যদি আপনি মডিউল.এক্সপোর্টগুলি নির্দিষ্ট করতে ভুলে যান তবে :

অ-মডুলারাইজ করা পূর্বে বৈধ উপাদান / কোড:

var YourReactComponent = React.createClass({
    render: function() { ...

মডিউল.এক্সপোর্টগুলি সহ মডুলারাইজড উপাদান / কোড :

module.exports = React.createClass({
    render: function() { ...

2
এটি কি ক্লাস তৈরি এবং তারপরে রফতানির ক্ষেত্রে একই হবে? আপনার প্রথম স্নিপেট এবং তারপরেmodule.exports = YourReactComponent
নিক পাইনেদা

3
আমি এটিকে সহজ করতে সক্ষম হয়েছি:export default class YourReactComponent extends React.Component {
সিপ্রেস

একই ত্রুটি পাওয়া। আমি এটি একটি উপাদান রেন্ডার করতে সক্ষম কিন্তু অন্যটিতে রেন্ডার করতে অক্ষম unable
মিঃ_পরিফেক্ট

এমনকি আমি তবুও module.exportsত্রুটিটি থাকার কথা উল্লেখ করেছি
Mr_Perfect

20

আপনি যদি এই ত্রুটিটি পান তবে এটি হতে পারে কারণ আপনি ব্যবহার করে লিংক আমদানি করছেন

import { Link } from 'react-router'

পরিবর্তে, এটি ব্যবহার করা ভাল হতে পারে

' বিক্রিয়া-রাউটার-ডোম ' থেকে {লিঙ্ক} আমদানি করুন
                      ^ -------------- ^

আমি বিশ্বাস করি প্রতিক্রিয়া রাউটার সংস্করণ 4 এর জন্য এটি একটি প্রয়োজনীয়তা


আমার বন্ধুটি reactপরিবর্তে, থেকে লিঙ্কটি আমদানি করছিল react-router-dom। ইস্যু স্থির। এই ভুল বার্তাটি আগে কখনও দেখেনি।
ও -9

18

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/example/query-params/app.js#L4 Router এর অন্যতম বৈশিষ্ট্য react-router। সুতরাং আপনার মডিউলগুলি পরিবর্তনের জন্য কোডের প্রয়োজন:

  var reactRouter = require('react-router')
  var Router = reactRouter.Router
  var Route = reactRouter.Route
  var Link = reactRouter.Link

আপনি যদি ES6 এর সিনট্যাক্সটি লিঙ্কটি ব্যবহার করতে ( import) ব্যবহার করতে চান তবে হেল্পার হিসাবে ব্যাবেল ব্যবহার করুন ।

BTW, আপনার কোড কাজ করতে, আমরা যোগ করতে পারেন {this.props.children}মধ্যে Appমত,

render() {
  return (
    <div>
      <h1>App</h1>
      <ul>
        <li><Link to="/about">About</Link></li>
      </ul>
      {this.props.children}
    </div>

  )
}

গত রাতে সাবধানে পরীক্ষা না করার জন্য দুঃখিত, আপনার হোম উপাদানটিতে কোনও সমস্যা নেই। আমি কী সম্পাদনা করেছি তা চেষ্টা করে দেখতে পারেন?
ডেভিড গুয়ান

18

একক প্রশ্নের উত্তরের তালিকায় অবাক হবেন না। এই সমস্যাটির বিভিন্ন কারণ রয়েছে;

আমার ক্ষেত্রে, সতর্কতা ছিল

चेतावनी.js: 33 সতর্কতা: React.createElement: প্রকারটি অবৈধ - একটি স্ট্রিং (অন্তর্নির্মিত উপাদানগুলির জন্য) বা একটি শ্রেণি / ফাংশন (সংমিশ্রিত উপাদানগুলির জন্য) প্রত্যাশিত তবে পেয়েছিল: অপরিবর্তিত। আপনি সংজ্ঞায়িত ফাইলটি থেকে আপনার উপাদানটি রফতানি করতে সম্ভবত ভুলে গিয়েছেন index

ত্রুটি দ্বারা অনুসরণ করা

invariant.js: 42 অপরিবর্তিত ত্রুটি: এলিমেন্টের ধরণটি অবৈধ: একটি স্ট্রিং (অন্তর্নির্মিত উপাদানগুলির জন্য) বা শ্রেণি / ফাংশন (সংমিশ্রিত উপাদানগুলির জন্য) প্রত্যাশিত কিন্তু পেয়েছিল: অপরিজ্ঞাত। আপনি সম্ভবত সংজ্ঞায়িত ফাইলটি থেকে আপনার উপাদানটি রপ্তানি করতে ভুলে গেছেন।

আমি ত্রুটিটি বুঝতে পারি না কারণ এটি কোনও পদ্ধতি বা ফাইলের নাম উল্লেখ করে না। আমি উপরে উল্লিখিত এই সতর্কতাটি দেখার পরেই সমাধান করতে সক্ষম হয়েছি।

আমার সূচী .js এ নিম্নলিখিত লাইন আছে।

<ConnectedRouter history={history}>

"সংযুক্ত রউটার" কীওয়ার্ড দিয়ে উপরের ত্রুটির জন্য যখন আমি গুগল করলাম তখন আমি একটি গিটহাব পৃষ্ঠায় সমাধানটি পেয়েছি।

ত্রুটিটি হ'ল কারণ, আমরা যখন react-router-reduxপ্যাকেজ ইনস্টল করি, তখন আমরা ডিফল্টরূপে এটি ইনস্টল করি। https://github.com/reactjs/react-router-redux তবে আসল পাঠাগার নয়।

এই ত্রুটি সমাধানের জন্য, এনপিএম স্কোপটি নির্দিষ্ট করে সঠিক প্যাকেজটি ইনস্টল করুন @

npm install react-router-redux@next

আপনার ভুলভাবে ইনস্টল করা প্যাকেজটি সরানোর দরকার নেই। এটি স্বয়ংক্রিয়ভাবে ওভাররাইট করা হবে।

ধন্যবাদ.

PS: এমনকি সতর্কতা আপনাকে সাহায্য করে। সতর্কতা অবহেলা করবেন না শুধুমাত্র ত্রুটি তাকান


আমি আশা করি আমি এটি একাধিকবার ভোট দিতে পারি।
সিজাফিল

15

আমার ক্ষেত্রে, রফতানি হওয়া শিশু মডিউলগুলির মধ্যে একটি যথাযথ প্রতিক্রিয়া উপাদান ফেরত দিচ্ছে না।

const Component = <div> Content </div>;

পরিবর্তে

const Component = () => <div>Content</div>;

দেখানো ত্রুটিটি পিতামাতার জন্য ছিল, সুতরাং এটি বের করতে পারেনি।


11

আমার ক্ষেত্রে, এটি ভুল মন্তব্য প্রতীকগুলির কারণে হয়েছিল। এটা ভুল:

<Tag>
    /*{ oldComponent }*/
    { newComponent }
</Tag>

এটি সঠিক:

<Tag>
    {/*{ oldComponent }*/}
    { newComponent }
</Tag>

কোঁকড়া বন্ধনী দেখুন


10

আমার একই ত্রুটি রয়েছে: এরর ফিক্স !!!!

আমি 'রিএ্যাক্ট-রাউটার-রিডেক্স' ভি 4 ব্যবহার করি তবে সে খারাপ ... এনপিএম ইনস্টল করার পরে রিঅ্যাক্ট -রাউটার-রেডেক্স @ পরের দিকে আমি "রিএ্যাক্ট-রাউটার-রেডেক্স": "^ 5.0.0-alpha.9" এ আছি,

এবং এটির কাজ



8

আমার একই সমস্যা ছিল এবং আমি বুঝতে পেরেছিলাম যে আমি জেএসএক্স মার্কআপে একটি অনির্ধারিত প্রতিক্রিয়া উপাদান সরবরাহ করছি । জিনিসটি হল যে রেন্ডার করতে প্রতিক্রিয়া উপাদানটি গতিশীলভাবে গণনা করা হয়েছিল এবং এটি অপরিবর্তিত হয়ে শেষ হয়েছিল!

ত্রুটিটি বলেছেন:

আক্রমণাত্মক লঙ্ঘন: এলিমেন্টের ধরণটি অবৈধ: একটি স্ট্রিং (অন্তর্নির্মিত উপাদানগুলির জন্য) বা একটি শ্রেণি / ফাংশন (সংমিশ্রিত উপাদানগুলির জন্য) প্রত্যাশিত কিন্তু পেয়েছিল: অপরিবর্তিত। আপনি সম্ভবত ফাইল এটা সংজ্ঞায়িত হয়েছে তা থেকে আপনার উপাদান রপ্তানি করতে ভুলে গেছি। পদ্ধতি রেন্ডার চেক করুন C।,

এই ত্রুটি উত্পাদন উদাহরণ:

var componentA = require('./components/A');
var componentB = require('./components/B');

const templates = {
  a_type: componentA,
  b_type: componentB
}

class C extends React.Component {
  constructor(props) {
    super(props);
  }
  
  // ...
  
  render() {
    //Let´s say that depending on the uiType coming in a data field you end up rendering a component A or B (as part of C)
    const ComponentTemplate = templates[this.props.data.uiType];
    return <ComponentTemplate></ComponentTemplate>
  }
  
  // ...
}

সমস্যাটি হ'ল একটি অবৈধ "ইউআইটাইপ" সরবরাহ করা হয়েছিল এবং ফলস্বরূপ এটি অপরিবর্তিত ছিল:

templates['InvalidString']


প্রতিক্রিয়া-জরিমানা-আপলোডারের সাথে আমারও তেমন ত্রুটি রয়েছে বলে মনে হচ্ছে তবে কিছুই (এখনও) খুঁজে পাওয়া যায় না। এটিতে একটি গ্যালারী উপাদান রয়েছে যা আমি আমদানি করছি এবং এটির রেন্ডার পদ্ধতিতেও চলে যায় তবে রেন্ডার ত্রুটি ঘটে যায়, আমি নিশ্চিত নই যে এটি লাইব্রেরির ইস্যু বা আমার সমস্যা হিসাবে আমি প্রতিক্রিয়া জানাতে বেশ নতুন।
জিয়া উল রেহমান মুঘল

একটি জটিল উপাদানটিতে একটি ত্রুটি ছিল যেখানে অনুরূপ ত্রুটি ছিল। একটি সাধারণ ডিবাগ পদ্ধতি হ'ল অস্থায়ীভাবে উপাদানটিকে সহজতর করা, যেমন const MyComponent = () => <div>my component</div>;কেবলমাত্র আমদানিগুলি তখন স্বাভাবিকভাবে কাজ করে কিনা তা দেখার জন্য।
metakermit

এটি সনাক্ত করতে সক্ষম হবেন হ'ল উদাহরণস্বরূপ, একটি লিঙ্ক বিধি সহ।
কেইন

7

এটিতে একটি দ্রুত সংযোজন হিসাবে। আমার একই সমস্যা ছিল এবং ওয়েবপ্যাকটি যখন আমার পরীক্ষাগুলি সংকলন করছিল তখন অ্যাপ্লিকেশনটি ঠিকঠাক চলছিল। আমি যখন পরীক্ষার ফাইলে আমার উপাদানটি আমদানি করছিলাম তখন আমি আমদানিগুলির একটিতে ভুল কেসটি ব্যবহার করছিলাম এবং এটি একই ত্রুটির কারণ হচ্ছিল।

import myComponent from '../../src/components/myComponent'

হওয়া উচিত ছিল

import myComponent from '../../src/components/MyComponent'

নোট করুন যে আমদানির নামটি ফাইলের myComponentঅভ্যন্তরে রফতানির নামের উপর নির্ভর করে MyComponent


7

রিএ্যাক্ট নেটিভ সর্বশেষ সংস্করণ 0.50 এবং তার বেশি ক্ষেত্রে একই সমস্যা ছিল।

আমার জন্য এটির মধ্যে পার্থক্য ছিল:

import App from './app'

এবং

import App from './app/index.js'

(দ্বিতীয়টি সমস্যাটি স্থির করে)। এই অদ্ভুতটি ধরতে আমাকে ঘন্টা সময় নিয়েছে, কষ্টসাধ্য বিজ্ঞপ্তিটি লক্ষ্য করা শক্ত :(


6

আর একটি সম্ভাব্য সমাধান, যা আমার পক্ষে কাজ করেছিল:

বর্তমানে, react-router-reduxবিটাতে রয়েছে এবং এনএমপি 4.x আসে, তবে 5.x হয় না not কিন্তু @types/react-router-reduxফিরে 5.x. সুতরাং সেখানে অপরিবর্তিত ভেরিয়েবলগুলি ব্যবহৃত হয়েছিল।

এনপিএম / সুতাটিকে 5.x ব্যবহার করতে বাধ্য করা আমার জন্য এটি সমাধান করেছে।


6

আপনার ত্রুটি দেওয়া:

'Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object'

আপনার কাছে দুটি বিকল্প রয়েছে:

  1. তোমার এক্সপোর্ট ফাইল শব্দ থাকতে পারে defaultহিসেবে export default class ____.... আপনার আমদানির ব্যবহার এড়িয়ে প্রয়োজন হবে তখন {}এটি প্রায়। হিসাবে হিসাবেimport ____ from ____

  2. ডিফল্ট শব্দটি ব্যবহার করা থেকে বিরত থাকুন। তারপরে আপনার রফতানীর মতো মনে হচ্ছে export class ____... তারপরে আপনার আমদানিটি অবশ্যই ব্যবহার করে {}। মতimport {____} from ____


দুর্দান্ত উত্তর !!! +1 ... আমি সম্পূর্ণরূপে উপেক্ষা করেছি export default {component name}এবং এটি যুক্ত করতে ভুলে
গিয়েছি

@ সি 8 আনন্দিত হলেন সেবার জন্য এবং সকালে আমাকে প্রথম জিনিসটি হাসানোর জন্য ধন্যবাদ।
জেসনলোনহার্ড

5

আমার ক্ষেত্রে, আমদানিটি একটি গ্রন্থাগারের কারণে স্পষ্টভাবে ঘটছিল।

আমি পরিবর্তন করে এটি ঠিক করতে পরিচালিত

export class Foo

প্রতি

export default class Foo


5

আমি যখন একই ডিরেক্টরিতে একই ডিরেক্টরিতে একটি .jsx এবং .scss ফাইল পেয়েছি তখন আমি এই ত্রুটিটি ছুঁড়েছি।

সুতরাং, উদাহরণস্বরূপ, যদি আপনার কাছে Component.jsxএবং Component.scssএকই ফোল্ডারে থাকে এবং আপনি এটি করার চেষ্টা করেন:

import Component from ./Component

ওয়েবপ্যাক দৃশ্যত বিভ্রান্ত হয়ে পড়ে এবং আমার ক্ষেত্রে অন্তত স্ক্যাস ফাইলটি আমদানি করার চেষ্টা করে যখন আমি সত্যিই .jsx ফাইলটি চাই।

আমি .scss ফাইলটির নাম পরিবর্তন করে এবং অস্পষ্টতা এড়িয়ে এটি ঠিক করতে সক্ষম হয়েছি। আমি সুস্পষ্টভাবে কম্পোনেন্ট.জেএসএক্স আমদানি করতে পারতাম


1
আপনি স্যার, একটি জীবন রক্ষাকারী। আমার ক্ষেত্রে এটি মূলত কম্পোনেন্ট.জেসন ছিল (একটি ডেটা ফাইল)।
টেংেন

4

এবং আমার ক্ষেত্রে আমি আমার সাব মডিউলগুলির একটিতে আমদানি-ঘোষণার সময় কেবলমাত্র একটি সেমিকোলন অনুপস্থিত ছিল।

এটি পরিবর্তন করে এটি স্থির করে:

import Splash from './Splash'

এটি:

import Splash from './Splash';

2
ঈশ্বর. মানুষ, তুমি আমার জীবন বাঁচিয়েছ আমি সত্যিই বুঝতে পারি না কেন নির্মাতারা আপনাকে এটি জানায় না।
মিলান ভ্ল্যাচ

4

আমার ক্ষেত্রে আমি ডিফল্ট রফতানি ব্যবহার করছিলাম, তবে একটি functionবা React.Component, তবে কেবল একটি JSXউপাদান রফতানি করছিলাম না

ত্রুটি:

export default (<div>Hello World!</div>)

কাজগুলি:

export default () => (<div>Hello World!</div>)

2

উল্লেখ import/ exportইস্যু ছাড়াও । আমি একটি শিশু উপাদান React.cloneElement()যুক্ত propsকরতে ব্যবহার করে এবং তারপর এটি রেন্ডারিং আমাকে এই একই ত্রুটি দিয়েছে।

আমাকে পরিবর্তন করতে হয়েছিল:

render() {
  const ChildWithProps = React.cloneElement(
    this.props.children,
    { className: `${PREFIX}-anchor` }
  );

  return (
    <div>
      <ChildWithProps />
      ...
    </div>
  );
}

প্রতি:

render() {
  ...
  return (
    <div>
      <ChildWithProps.type {...ChildWithProps.props} />
    </div>
  );
}

আরও তথ্যের জন্য React.cloneElement() ডক্স দেখুন ।


2

প্রতিক্রিয়াশীল রাউটিংয়ে আমি এই ত্রুটিটি পেয়েছি, সমস্যাটি ছিল আমি ব্যবহার করছি

<Route path="/" component={<Home/>} exact />

তবে এটি ছিল ভুল রুটের ক্লাস / ফাংশন হিসাবে উপাদান প্রয়োজন তাই আমি এটিকে পরিবর্তন করেছি

<Route path="/" component={Home} exact />

এবং এটা কাজ করে. (কেবলমাত্র উপাদানটির চারপাশের ধনুর্বন্ধনীগুলি এড়ানো)


কিছু অন্য উপায়ে, আমার সমাধানটি আপনার বিপরীত ছিল, :), তবে আমি চোখ খুলতে আপনাকে ধন্যবাদ জানাই।
ইউলিও আলেমান জিমনেজ

1

আমার জন্য এটি ছিল যে আমার স্টাইলযুক্ত উপাদানগুলি আমার কার্যকরী উপাদান সংজ্ঞা অনুসারে সংজ্ঞায়িত করা হয়েছিল। এটি কেবল মঞ্চে ঘটছিল এবং আমার জন্য স্থানীয়ভাবে নয়। আমি একবার আমার স্টাইলিং-উপাদানগুলিকে আমার উপাদান সংজ্ঞাটির উপরে সরালে ত্রুটিটি চলে যায়।


1

এর অর্থ হল আপনার আমদানি করা কিছু উপাদান ভুলভাবে ঘোষিত বা অস্তিত্বহীন

আমারও একই সমস্যা ছিল, আমিও করেছি

import { Image } from './Shared'

তবে আমি যখন ভাগ করা ফাইলটি দেখলাম তখন আমার কাছে একটি 'চিত্র' উপাদান ছিল না বরং একটি 'আইটেম আইমেজ' উপাদান ছিল

import { ItemImage } from './Shared';

আপনি যখন অন্যান্য প্রকল্পের কোড অনুলিপি করেন তখনই এটি ঘটে থাকে;)


1

আমার একটি সমস্যা ছিল React.Fragment, কারণ আমার প্রতিক্রিয়াটির সংস্করণ ছিল < 16.2, তাই আমি এটি থেকে মুক্তি পেয়েছি।


0

@ বালাসুব্রামণি এম আমাকে এখানে বাঁচিয়েছেন। লোকদের সহায়তা করতে আরও একটি যুক্ত করতে চেয়েছিলেন। আপনি যখন অনেকগুলি জিনিস একসাথে মিশ্রিত করছেন এবং সংস্করণগুলি সহ অশ্বচালিত হন তখনই এই সমস্যাটি হয়। আমি উপাদান-ইউআইয়ের একটি সংস্করণ আপডেট করেছি এবং এটি পরিবর্তন করা দরকার

import Card, {CardContent, CardMedia, CardActions } from "@material-ui/core/Card"; 

এটি:

import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';

0

আমার একই সমস্যা ছিল এবং সমস্যাটি ছিল কিছু জেএস ফাইলগুলি সেই নির্দিষ্ট পৃষ্ঠার বান্ডিলিংয়ের অন্তর্ভুক্ত ছিল না। এই ফাইলটি অন্তর্ভুক্ত করার চেষ্টা করুন এবং সমস্যাটি সংশোধন করা হতে পারে। আমি এটা করেছি:

.Include("~/js/" + jsFolder + "/yourjsfile")

এবং এটি আমার জন্য বিষয়টি স্থির করেছে।

আমি ডট নেট এমভিসিতে প্রতিক্রিয়া ব্যবহার করার সময় এটি ছিল


0

আমি এই ত্রুটির আরও একটি কারণ আবিষ্কার করেছি। এটি সিএসএস-ইন-জেএসকে একটি রিঅ্যাক্ট উপাদানটিতে রিটার্ন ফাংশনের শীর্ষ স্তরের জেএসএক্সের একটি নাল মান ফিরিয়ে দেওয়ার সাথে সম্পর্কিত।

উদাহরণ স্বরূপ:

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return null;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

আমি এই সতর্কতা পেতে হবে:

সতর্কতা: React.createElement: প্রকারটি অবৈধ - একটি স্ট্রিং (অন্তর্নির্মিত উপাদানগুলির জন্য) বা শ্রেণি / ফাংশন (সংমিশ্রিত উপাদানগুলির জন্য) প্রত্যাশিত তবে পেয়েছে: নাল।

এই ত্রুটি দ্বারা অনুসরণ করা:

আনকচড ত্রুটি: এলিমেন্টের ধরণটি অবৈধ: একটি স্ট্রিং (অন্তর্নির্মিত উপাদানগুলির জন্য) বা শ্রেণি / ফাংশন (সংমিশ্রিত উপাদানগুলির জন্য) প্রত্যাশিত কিন্তু পেয়েছে: নাল।

আমি এটি আবিষ্কার করেছি কারণ সিএসএস-ইন-জেএস উপাদানগুলির সাথে কোনও সিএসএস নেই যা আমি রেন্ডার করার চেষ্টা করছিলাম। সিএসএস ফিরে আসছিল এবং নাল মান হচ্ছিল না তা নিশ্চিত করে আমি এটি ঠিক করেছি।

উদাহরণ স্বরূপ:

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return Css;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

0

আমি প্রায় একই ত্রুটি পেয়ে যাচ্ছি:

অপ্রকাশিত (প্রতিশ্রুতিতে) ত্রুটি: এলিমেন্টের ধরণটি অবৈধ: একটি স্ট্রিং (অন্তর্নির্মিত উপাদানগুলির জন্য) বা শ্রেণি / ফাংশন (সংমিশ্রিত উপাদানগুলির জন্য) প্রত্যাশিত কিন্তু পেয়েছে: অবজেক্ট।

আমি আমার টিম বিকাশকারী অন্য নোড লাইব্রেরি থেকে খাঁটি কার্যকরী উপাদান আমদানির চেষ্টা করছিলাম। এটি ঠিক করার জন্য, আমাকে এখান থেকে একটি চূড়ান্ত আমদানিতে (অভ্যন্তরের উপাদানটির দিকে নির্দেশ করে node_modules) পরিবর্তন করতে হয়েছিল

'টিম-ইউআই' থেকে ফুবারলিস্ট আমদানি করুন;

প্রতি

'টিম-ইউআই / লাইব / উপাদানগুলি / ফু-বার-তালিকা / FooBarList' থেকে FooBarList আমদানি করুন;


0

আমার ক্ষেত্রে এটি বাহ্যিক উপাদান যেমন আমদানি করা শেষ হয়েছিল:

import React, { Component } from 'react';

এবং তারপরে ঘোষণা করা হয়েছে:

export default class MyOuterComponent extends Component {

যেখানে অভ্যন্তরীণ উপাদানগুলি প্রতিক্রিয়াটি খালি আমদানি করে:

import React from 'react';

এবং এটি ঘোষণার জন্য বিন্দুযুক্ত:

export default class MyInnerComponent extends ReactComponent {


0

আমার ক্ষেত্রে, এটি অনুসন্ধান করতে আমার বেশ কিছুটা সময় নিয়েছিল এবং চেক করা যেতে পারে তবে কেবল এই পথেই ঠিক করা হয়েছে: একটি কাস্টম উপাদান আমদানি করার সময় "{", "}" সরান:

import OrderDetail from './orderDetail';

আমার ভুল উপায় ছিল:

import { OrderDetail } from './orderDetail';

অর্ডারডেটেল.জেএস ফাইলটিতে, আমি ডিফল্ট শ্রেণি হিসাবে অর্ডারডেটেল রফতানি করেছি:

class OrderDetail extends Component {
  render() {
    return (
      <View>
        <Text>Here is an sample of Order Detail view</Text>
      </View>
    );
  }
}

export default OrderDetail;
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.