CODEWITHSUNDEEP
javascriptreactjsimport
RamAlx
RamAlx

Reputation: 7344

Error that an imported component is undefined despite it is imported

i'm facing a very weird issue and i can't find a solution. I'm rendering a component like this:

const Trans = () =>(
<div>
....
</div>)
export default Trans

Then i import it as import Trans from './trans' And i use connect (mapStateToProps, mapDispatchToProps)(Trans) and an error is showing that You must pass a component to the function returned by connect. Instead received undefined

Upvotes: 0

Views: 2866

Answers (3)

Marc Davies
Marc Davies

Reputation: 266

This is probably caused by a circular dependency.

The simplest example is 

// moduleOne.js

import {something} from './moduleTwo';

export const somethingElse = something;

// moduleTwo.js

import {somethingElse} from './moduleOne';

export const something = somethingElse;

When somethingElse is declared in moduleOne.js, it goes looking for for something in moduleTwo.js.

But moduleTwo needs somethingElse from moduleOne.js to be declared first. somethingElse hasn't been declared yet because it's in moduleOne, which is waiting on moduleTwo, so it is undefined.

Your setup is probably way less dumb and more complicated than this but amounts to the same problem.

We use circular-dependency-plugin to detect and fix these.

Upvotes: 3

RVCoder
RVCoder

Reputation: 542

if you are using connect method, its necessary to use "react-redux" package. Please check if you have imported that or not

Upvotes: -1

Hemerson Carlin
Hemerson Carlin

Reputation: 7424

Although it's a component (or it looks like a component), don't forget to import react as well. 

import React from 'react'

const Trans = () => 
  <div>
    ...
  </div>

export default Trans

Upvotes: 0

Related Questions