使用Create React App导出组件失败：元素类型无效错误求助

Hey there, let's dig into this component export issue you're facing with create-react-app and Redux! That error message is super common when there's a mix-up in how you're exporting or importing your connected component, so let's break it down.

First, let's clarify what that error means:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

This almost always means the thing you're trying to render isn't a valid React component. In your case, it's likely a problem with how you're exporting your Redux-connected component, especially since your code snippet cuts off mid-export.

Let's fix this step by step #

Looking at your partial code:

import React from 'react';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return {};
}

export const Ho...

Here are the most likely fixes:

1. Finish defining your component and connect it properly
   You probably cut off the component definition and the Redux connection. The correct pattern for connecting a component to Redux is to first define your base component, then wrap it with connect, then export the wrapped version. For example:

import React from 'react';
import { connect } from 'react-redux';

// First, define your actual component
const Home = () => {
  return <div>Welcome to my app!</div>;
};

function mapStateToProps(state) {
  return {}; // Add any state properties you need here later
}

// Export the connected version of your component
// Use default export for easier importing
export default connect(mapStateToProps)(Home);

2. Make sure your import matches your export
   If you use a default export (like the example above), import it without curly braces:

// Correct
import Home from './Home';

// Wrong (this will return undefined if you used default export)
import { Home } from './Home';

If you prefer named exports, adjust both sides:

// In Home.js
export const ConnectedHome = connect(mapStateToProps)(Home);

// When importing
import { ConnectedHome } from './Home';

3. Double-check for incomplete code
   Your snippet cuts off at export const Ho...—make sure you didn't leave the component definition unfinished. If the component itself isn't a valid function/class, the export will be undefined, triggering that error.

Full working example #

Here's a complete, valid connected component to reference:

// src/components/Profile.js
import React from 'react';
import { connect } from 'react-redux';

const Profile = ({ username }) => {
  return <h2>Hello, {username}!</h2>;
};

const mapStateToProps = (state) => {
  return {
    username: state.user.username // Example: pull data from Redux state
  };
};

export default connect(mapStateToProps)(Profile);

Then import and render it in App.js:

// src/App.js
import React from 'react';
import Profile from './components/Profile';

function App() {
  return (
    <div className="App">
      <Profile />
    </div>
  );
}

export default App;

If you're still hitting the error after fixing these, share the full code of your component and where you're importing/rendering it, and we can narrow it down further!

内容的提问来源于stack exchange，提问作者Jstuff