[英]ReactDOM - Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
I am working on building a basic shell project in Visual Studio with React and Redux.我正在使用 React 和 Redux 在 Visual Studio 中构建一个基本的 shell 项目。 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.
错误是:
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.
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
.当我尝试将花括号添加到导入行时,出现错误:
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:
这是错误来自的整个 index.js 文件:
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: App.js 代码:
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: configureStore.js 代码:
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)
);
}
import { ConnectedRouter } from 'react-router-redux';
ConnectedRouter
is not part of the API of react-router-redux
ConnectedRouter
不是react-router-redux
的 API 的一部分
https://github.com/reactjs/react-router-redux#api https://github.com/reactjs/react-router-redux#api
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.