बिना त्रुटि के त्रुटि: अपरिवर्तनीय उल्लंघन: तत्व प्रकार अमान्य है: एक स्ट्रिंग की उम्मीद (अंतर्निहित घटकों के लिए) या एक वर्ग / कार्य लेकिन प्राप्त: वस्तु


529

मुझे यह त्रुटि मिल रही है:

बिना त्रुटि के त्रुटि: अपरिवर्तनीय उल्लंघन: तत्व प्रकार अमान्य है: एक स्ट्रिंग की उम्मीद (अंतर्निहित घटकों के लिए) या एक वर्ग / फ़ंक्शन (समग्र घटकों के लिए) लेकिन मिला: ऑब्जेक्ट।

यह मेरा कोड है:

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;



यदि आप किसी गैर-मौजूद घटक को आयात करने का प्रयास करते हैं तो यह त्रुटि बढ़ सकती है । सुनिश्चित करें कि आपके पास कोई टाइपो नहीं है और घटक वास्तव में उस तरह का नाम है। पुस्तकालयों के मामले में सुनिश्चित करें कि आप उचित संस्करण का उपयोग करते हैं, क्योंकि घटकों के विभिन्न संस्करणों में अलग-अलग नाम हो सकते हैं।
तात्यामेली

यह तब भी हो सकता है जब आप किसी संपत्ति को परिभाषित करते हैं, हो सकता है कि ES6 विनाश के माध्यम से, पहले से ही आयातित घटक के रूप में एक ही नाम के साथ (और इसे किसी अन्य घटक को पारित करने का प्रयास करें)।
फिलिप मर्फी

जवाबों:


886

मेरे मामले में ( वेबपैक का उपयोग करके ) यह अंतर था:

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

बनाम

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

दूसरा काम करता है जबकि पहला त्रुटि का कारण बन रहा है। या इसके विपरीत है।


81
भविष्य से यहाँ Googler, धन्यवाद यह मेरा मुद्दा था! यह पूर्वव्यापी में समझ में आता है क्योंकि पहले निर्यात को नष्ट कर रहा है, लेकिन यदि आपने डिफ़ॉल्ट का उपयोग किया है, तो यह सिर्फ एक फ़ंक्शन / वर्ग को नष्ट करने की कोशिश कर रहा है।
इबोलेन

3
भविष्य के लोगों के लिए, मेरा मामला उस तत्व नाम में एक टाइपो था जिसका मैं उपयोग कर रहा था। मैं बदल <TabBarIOS.item>गया<TabBarIOS.Item>
रयान-नील मेस

6
विशाल। यह एक केस क्यों है?
lol

45
किसी के लिए अभी भी सोच क्यों यह काम करता है - {MyComponent} फ़ाइल से आयात निर्यात 'MyComponent' '../components/xyz.js' - दूसरे आयात डिफ़ॉल्ट '../components/xyz.js' से निर्यात।
शॉनयारस्ट्रोन्ग

यह MyComponent के अंदर आयात के कारण भी हो सकता है। मेरे मामले में त्रुटि ने MyComponent का उल्लेख किया है, लेकिन वास्तव में इसके अंदर के बयान को छापने का कारण बनता है: आयात {SomeLibraryCompenent} से 'कुछ-पुस्तकालय'
ykorach

159

आपको निर्यात डिफ़ॉल्ट या आवश्यकता (पथ) की आवश्यकता है

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

2
मैंने इस मुद्दे को 'प्रतिक्रिया-मूल-नवबार' के साथ रखा था। मैंने आवश्यकता पर डिफ़ॉल्ट को बुलाया और इसने मेरा मुद्दा ठीक कर दिया। धन्यवाद।
वराड पीज़ेशियन

3
हम्म, मेरे मामले में .Dfault समस्या को हल करता है। हालाँकि, मैं वास्तव में डिफ़ॉल्ट निर्यात कर रहा हूँ होम उस वर्ग पर घटक का विस्तार करता है, इसलिए मुझे उम्मीद है कि यह '.default' के बिना काम करेगा
मार्क

3
क्या आप कृपया कारण बता सकते हैं कि जब हम डिफ़ॉल्ट जोड़ते हैं तो क्या होता है?
सुभम त्रिपाठी

1
यह काम किया, लेकिन क्या कोई .default क्या करता है, इसके बारे में कोई स्पष्टीकरण दे सकता है।
बुरक करसोय

1
@BurakKarasoy आपको जरूरत है। जब से मॉड्यूल का आयात किया export defaultजाता है exports.defaultतो मानक तरीके से बाबेल मॉड्यूल को बदलना होता है, इसलिए .defaultजब आप मॉड्यूल आयात करते हैं तो आपको इसका उपयोग करना होगा। इससे छुटकारा पाने का एक तरीका यह है कि बेबल-प्लगइन-ऐड-मॉड्यूल-निर्यात का उपयोग किया जाए जो डिफ़ॉल्ट व्यवहार को बहाल करता है।
जीन-बैप्टिस्ट लोएज़ेल

54

क्या आपने अपने किसी रिएक्ट घटक को केवल संशोधित किया है? यदि हां, तो आपको यह त्रुटि मिलेगी यदि आप मॉड्यूल.exports निर्दिष्ट करना भूल गए उदाहरण के लिए,

गैर-संशोधित पहले मान्य घटक / कोड:

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

modularized घटक / मॉड्यूल के साथ कोड। निर्यात :

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

2
क्या यह वर्ग बनाने और फिर निर्यात करने के लिए समान होगा? अपने पहले स्निपेट की तरह और फिरmodule.exports = YourReactComponent
निक पिनेडा

3
मैं इसे सरल बनाने में सक्षम था:export default class YourReactComponent extends React.Component {
१६'१६

एक ही त्रुटि हो रही है। मैं इसे एक घटक में प्रस्तुत करने में सक्षम हूं, लेकिन दूसरे में प्रस्तुत करने में असमर्थ हूं।
Mr_Perfect

यहां तक ​​कि मैंने module.exportsअभी भी त्रुटि प्राप्त करने का उल्लेख किया है
Mr_Perfect

20

यदि आपको यह त्रुटि मिलती है, तो हो सकता है कि आप लिंक का उपयोग करके आयात कर रहे हों

import { Link } from 'react-router'

इसके बजाय, इसका उपयोग करना बेहतर हो सकता है

आयात {लिंक} से ' रिएक्शन-राउटर-डोम '
                      ^ -------------- ^

मेरा मानना ​​है कि प्रतिक्रिया राउटर संस्करण 4 के लिए यह एक आवश्यकता है


मेरा दोस्त reactइसके बजाय से लिंक आयात कर रहा था react-router-dom। मुद्दा तय किया। इससे पहले इस गलत संदेश को कभी नहीं देखा।
O-9

18

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/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

यदि आप लिंक उपयोग ( import) का ES6 सिंटैक्स का उपयोग करना चाहते हैं , तो हेलर को हेल्पर के रूप में उपयोग करें ।

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.js: 13 पर अपना कोड जांचें।

त्रुटि द्वारा पीछा किया

invariant.js: 42 अनकवर्ड एरर: एलिमेंट टाइप अमान्य है: एक स्ट्रिंग (बिल्ट-इन कंपोनेंट्स के लिए) या एक क्लास / फंक्शन (कंपोजिट कंपोनेंट्स के लिए) की उम्मीद की गई थी: अपरिभाषित। आप संभवतः अपने घटक को उस फ़ाइल से निर्यात करना भूल गए हैं जिसे उसने परिभाषित किया है।

मैं त्रुटि को समझ नहीं पाया क्योंकि इसमें किसी भी विधि या फ़ाइल का नाम नहीं है। मैं इस चेतावनी को देखने के बाद ही हल करने में सक्षम था, जिसका उल्लेख ऊपर किया गया है।

मैं index.js पर निम्नलिखित पंक्ति है।

<ConnectedRouter history={history}>

जब मैं कीवर्ड "कनेक्टेड राउटर" के साथ उपरोक्त त्रुटि के लिए गया था, तो मुझे गीथहब पृष्ठ में समाधान मिला।

त्रुटि इसलिए है, क्योंकि जब हम react-router-reduxपैकेज स्थापित करते हैं, तो डिफ़ॉल्ट रूप से हम इसे स्थापित करते हैं। https://github.com/reactjs/react-router-redux लेकिन वास्तविक पुस्तकालय नहीं।

इस त्रुटि को हल करने के लिए, npm गुंजाइश निर्दिष्ट करके उचित पैकेज स्थापित करें @

npm install react-router-redux@next

आपको गलत तरीके से स्थापित पैकेज को हटाने की आवश्यकता नहीं है। यह स्वचालित रूप से अधिलेखित हो जाएगा।

धन्यवाद।

पुनश्च: यहां तक ​​कि चेतावनी आपको मदद करती है। केवल त्रुटि को देखते हुए चेतावनी की उपेक्षा न करें ।


काश मैं इसे कई बार वोट कर सकूं।
सिज़ाफ़िल

15

मेरे मामले में, निर्यात किए गए चाइल्ड मॉड्यूल में से एक उचित प्रतिक्रिया घटक नहीं दे रहा था।

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

के बजाय

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

दिखाई गई त्रुटि माता-पिता के लिए थी, इसलिए पता नहीं लगा सकी।


11

मेरे मामले में, यह गलत टिप्पणी प्रतीकों के कारण था। ये गलत है:

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

यह सही है:

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

घुंघराले कोष्ठक पर ध्यान दें


10

मैं एक ही त्रुटि है: त्रुटि FIX !!!!

मैं 'प्रतिक्रिया-राउटर-रिड्यूक्स' v4 का उपयोग करता हूं, लेकिन वह खराब है। npm के बाद रिएक्ट-राउटर-रेड्यूक्स @ अगले पर स्थापित करें " " रिएक्ट-राउटर-रेडक्स "पर हूं:" ^ 5.0.0-alpha.9 "

और यह काम करता है



8

मैं एक ही मुद्दा रहा था और मुझे एहसास हुआ कि मैं एक पूर्वनिर्धारित प्रदान कर रहा हूं JSX मार्कअप में प्रतिक्रिया घटक । बात यह है कि रेंडर करने के लिए प्रतिक्रिया घटक को गतिशील रूप से गणना की गई थी और यह अनिर्धारित होने के कारण समाप्त हो गई थी!

त्रुटि बताई गई है:

अपरिवर्तनीय उल्लंघन: तत्व प्रकार अमान्य है: एक स्ट्रिंग की उम्मीद की (अंतर्निहित घटकों के लिए) या एक वर्ग / कार्य (समग्र घटकों के लिए) लेकिन मिला: अपरिभाषित। आप संभवतः अपने घटक को उस फ़ाइल से निर्यात करना भूल गए जिसे वह परिभाषित करता है। रेंडर विधि की जाँच करें 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>
  }
  
  // ...
}

समस्या यह थी कि एक अमान्य "uiType" प्रदान किया गया था और इसलिए यह परिणाम के रूप में अपरिभाषित पैदा कर रहा था:

templates['InvalidString']


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

एक समान त्रुटि थी जहां एक जटिल घटक में एक त्रुटि थी। एक साधारण डिबग विधि घटक को अस्थायी रूप से सरल बनाने के लिए है, जैसे const MyComponent = () => <div>my component</div>;कि यह देखने के लिए कि क्या आयात सामान्य रूप से काम करता है।
मेटाक्रिटिट

यह एक लिंट नियम के साथ, उदाहरण के लिए, इसका पता लगाने में सक्षम होगा।
कैन

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 में नहीं। लेकिन @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'

आपके पास 2 विकल्प हैं:

  1. आपकी निर्यात फ़ाइल में शब्द हो सकता है defaultजैसा कि export default class ____.... तब आपके आयात को {}इसके चारों ओर उपयोग करने से बचने की आवश्यकता होगी । जैसे कीimport ____ from ____

  2. डिफ़ॉल्ट शब्द का उपयोग करने से बचें। तब आपका निर्यात दिखता है, export class ____... तब आपके आयात का उपयोग करना चाहिए {}। पसंदimport {____} from ____


बहुत बढ़िया जवाब !!! +1 ... मैंने इसे पूरी तरह से अनदेखा कर दिया export default {component name}और इसे जोड़ना भूल गया
Si8

@ Si8 खुशी है कि सेवा की है और मुझे सुबह पहली बात करने के लिए धन्यवाद।
jasonleonhard

5

मेरे मामले में, आयात एक पुस्तकालय के कारण स्पष्ट रूप से हो रहा था।

मैं इसे बदलकर ठीक करने में कामयाब रहा

export class Foo

सेवा

export default class Foo


5

जब मैं एक ही रूट नाम के साथ एक ही निर्देशिका में .jsx और .scss फ़ाइल था, तो मैं इस त्रुटि में भाग गया।

इसलिए, उदाहरण के लिए, यदि आपके पास Component.jsxऔर Component.scssउसी फ़ोल्डर में है और आप ऐसा करने का प्रयास करते हैं:

import Component from ./Component

वेबपैक स्पष्ट रूप से भ्रमित हो जाता है और, कम से कम मेरे मामले में, एससीएस फ़ाइल आयात करने की कोशिश करता है जब मैं वास्तव में .jsx फ़ाइल चाहता हूं।

मैं .scss फ़ाइल का नाम बदलने और अस्पष्टता से बचने के द्वारा इसे ठीक करने में सक्षम था। मैं भी Component.jsx को स्पष्ट रूप से आयात कर सकता था


1
आप सर, एक जीवन रक्षक हैं। मेरे मामले में यह अनिवार्य रूप से Component.json (एक डेटा फ़ाइल) था।
टेंगेन

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'

लेकिन जब मैंने साझा की गई फ़ाइल में देखा तो मेरे पास 'ItemImage' घटक के बजाय 'छवि' घटक नहीं था

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

मेरे पास एक ही मुद्दा था और मुद्दा कुछ js फाइलें उस विशिष्ट पृष्ठ के बंडलिंग में शामिल नहीं थीं। उन फ़ाइल और समस्या को शामिल करने का प्रयास करें। इसे मैने किया है:

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

और यह मेरे लिए मुद्दा तय किया।

यह तब था जब मैं डॉट एनईटी एमवीसी में रिएक्ट का उपयोग कर रहा था


0

मैंने इस त्रुटि का एक और कारण खोजा है। यह CSS-in-JS को एक प्रतिक्रिया घटक में रिटर्न फ़ंक्शन के शीर्ष-स्तरीय JSX में एक अशक्त मान लौटाता है।

उदाहरण के लिए:

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 को 'team-ui / lib / Components / foo-bar-list / 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';

क्योंकि orderDetail.js फ़ाइल में, मैंने डिफ़ॉल्ट श्रेणी के रूप में OrderDetail निर्यात किया है:

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

export default OrderDetail;
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.