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

Question

I am working on building a basic shell project in Visual Studio with React and Redux. I'm not doing anything crazy, but I'm getting this error and I cannot figure out why. The error is: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. When I look that on up Google and SO everyone says basically what it says in the second sentence of the error. That is that I must have mixed up named and default imports. When I tried adding curly braces to the import line I get the error: TypeError: react_dom__WEBPACK_IMPORTED_MODULE_3__.ReactDOM is undefined. So I'm pretty sure the original code for the import is correct. Here is the whole index.js file where the error is coming from:

import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './store/configureStore';
import App from './App';
//import registerServiceWorker from './registerServiceWorker';

// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const history = createBrowserHistory({ basename: baseUrl });

// Get the application-wide store instance, prepopulating with state from the server where available.
const initialState = window.initialReduxState;
const store = configureStore(history, initialState);

const rootElement = document.getElementById('root');

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  rootElement);

//registerServiceWorker();

And the error:

App.js code:

import React from 'react';
import { Route } from 'react-router';
import Layout from './components/Layout';
import Home from './components/Home';
import Counter from './components/Counter';
import FetchData from './components/FetchData';

export default () => (
  <Layout>
    <Route exact path='/' component={Home} />
    <Route path='/counter' component={Counter} />
    <Route path='/fetchdata/:startDateIndex?' component={FetchData} />
  </Layout>
);

configureStore.js code:

import { applyMiddleware, combineReducers, compose, createStore } from 'redux';
import thunk from 'redux-thunk';
import { routerReducer, routerMiddleware } from 'react-router-redux';
import * as Counter from './Counter';
import * as WeatherForecasts from './WeatherForecasts';

export default function configureStore(history, initialState) {
  const reducers = {
    counter: Counter.reducer,
    weatherForecasts: WeatherForecasts.reducer
  };

  const middleware = [
    thunk,
    routerMiddleware(history)
  ];

  // In development, use the browser's Redux dev tools extension if installed
  const enhancers = [];
  const isDevelopment = process.env.NODE_ENV === 'development';
  if (isDevelopment && typeof window !== 'undefined' && window.devToolsExtension) {
    enhancers.push(window.devToolsExtension());
  }

  const rootReducer = combineReducers({
    ...reducers,
    routing: routerReducer
  });

  return createStore(
    rootReducer,
    initialState,
    compose(applyMiddleware(...middleware), ...enhancers)
  );
}

DO NOT post images of code, data, error messages, etc. - copy or type the text into the question. stackoverflow.com/help/how-to-ask — Rob
I posted the text from the error in the first paragraph. I tried to copy all the text from that error into here. Obviously the formatting makes it unreadable which is why I chose to just paste a screenshot. — dmikester1

David Bradshaw David Bradshaw · Accepted Answer · 2019-11-11T14:04:29

import { ConnectedRouter } from 'react-router-redux';

ConnectedRouter is not part of the API of react-router-redux

https://github.com/reactjs/react-router-redux#api

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

1 Answers