我从https://github.com/briancappello/flask-react-spa构建项目并尝试升级依赖项。
然后我收到此错误。我遵循connect-react-router指南的设置，然后发生了此错误。创建reducer时发生此错误，当初始减速器时，该方法将未定义的ibj传递给减速器方法然后历史记录的createHref需要从此obj获取路径名并发生此错误...
任何人都可以提出建议吗？也许是依赖性问题？
错误堆栈
Uncaught TypeError：无法读取未定义的属性'pathname'在createPath（history.js：70）在createHref（history.js：366）在评估时（redux.js：361）在Array.forEach（）在assertReducerShape（redux.js：359）在CombineReducers（redux.js：422）在createReducer（reducers.js？9c0a：11）在configureStore（configureStore.js？2ddb：35）在Module.eval（index.js？7df2：24）在评估时（index.js：109）
reducer.js
import { combineReducers } from 'redux'
import { connectRouter } from 'connected-react-router'
import formReducer from 'redux-form/es/reducer'
import { loadingBarReducer } from 'react-redux-loading-bar'
import securityReducer from 'security/reducer'
import flashReducer from 'site/reducers/flash'
const createReducer = (injectedReducers) => combineReducers({
router: connectRouter(injectedReducers),
security: securityReducer,
flash: flashReducer,
form: formReducer,
loadingBar: loadingBarReducer,
...injectedReducers,
})
export default createReducer
configureStore.js
import { applyMiddleware, compose, createStore } from 'redux'
import { routerMiddleware } from 'connected-react-router'
import { connectRouter } from 'connected-react-router'
import { loadingBarMiddleware } from 'react-redux-loading-bar'
import createSagaMiddleware from 'redux-saga'
import createReducer from 'reducers'
import getSagas from 'sagas'
import { flashClearMiddleware } from 'site/middleware/flash'
const isDev = process.env.NODE_ENV !== 'production'
const hasWindowObject = typeof window === 'object'
const sagaMiddleware = createSagaMiddleware()
export default function configureStore(initialState, history) {
const middlewares = [
sagaMiddleware,
routerMiddleware(history),
loadingBarMiddleware({ promiseTypeSuffixes: ['REQUEST', 'FULFILL'] }),
flashClearMiddleware,
]
const enhancers = [
applyMiddleware(...middlewares),
]
const composeEnhancers =
isDev && hasWindowObject && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
: compose
const store = createStore(
createReducer(history),
initialState,
composeEnhancers(...enhancers)
)
// extensions
store.runSaga = sagaMiddleware.run
store.injectedReducers = {}
store.injectedSagas = {}
let runningSagas = sagaMiddleware.run(function *() {
yield getSagas()
})
if (module.hot) {
module.hot.accept('./reducers', () => {
const nextCreateReducer = require('./reducers').default
store.replaceReducer(connectRouter(history)(nextCreateReducer(store.injectedReducers)))
})
module.hot.accept('./sagas', () => {
const nextGetSagas = require('./sagas').default
runningSagas.cancel()
runningSagas.done.then(() => {
runningSagas = sagaMiddleware.run(function *() {
yield nextGetSagas()
})
})
})
}
return store
}
这是我的依赖项
"dependencies": {
"@babel/polyfill": "7.4.3",
"@hot-loader/react-dom": "^16.8.6",
"acorn": "^6.4.1",
"babel-polyfill": "^6.26.0",
"chalk": "2.4.2",
"classnames": "^2.2.6",
"compression": "1.7.4",
"connected-react-router": "^6.8.0",
"core-js": "^3.6.4",
"date-fns": "^2.11.0",
"fontfaceobserver": "2.1.0",
"history": "4.9.0",
"hoist-non-react-statics": "3.3.0",
"immer": "3.0.0",
"immutable": "^3.8.2",
"intl": "1.2.5",
"invariant": "2.2.4",
"ip": "1.1.5",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.2.1",
"lodash": "^4.17.15",
"minimist": "^1.2.5",
"normalize.css": "^8.0.1",
"path-to-regexp": "^6.1.0",
"prop-types": "15.7.2",
"query-string": "^6.11.1",
"react": "16.8.6",
"react-bulma-components": "^3.2.0",
"react-dom": "16.8.6",
"react-helmet": "6.0.0-beta",
"react-highlight": "^0.12.0",
"react-intl": "2.8.0",
"react-loadable": "^5.5.0",
"react-redux": "^7.2.0",
"react-redux-loading-bar": "^4.6.0",
"react-router-dom": "5.0.0",
"react-svg": "^11.0.14",
"redux": "4.0.1",
"redux-form": "^8.2.3",
"redux-saga": "1.0.2",
"reselect": "4.0.0",
"sanitize.css": "8.0.0",
"seamless-immutable": "^7.1.4",
"styled-components": "4.2.0",
"utf-8-validate": "^5.0.2",
"warning": "^4.0.3"
},
"devDependencies": {
"@types/react": "^16.9.23",
"add-asset-html-webpack-plugin": "3.1.3",
"canvas": "^2.6.1",
"circular-dependency-plugin": "5.0.2",
"compare-versions": "3.4.0",
"compression-webpack-plugin": "2.0.0",
"coveralls": "3.0.3",
"css-loader": "2.1.1",
"eslint": "5.16.0",
"eslint-config-airbnb": "17.1.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-config-prettier": "4.1.0",
"eslint-import-resolver-webpack": "0.11.1",
"eslint-plugin-import": "2.17.2",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-prettier": "3.0.1",
"eslint-plugin-react": "7.12.4",
"eslint-plugin-react-hooks": "1.6.0",
"eslint-plugin-redux-saga": "1.0.0",
"express": "^4.17.1",
"express-http-proxy": "^1.6.0",
"fibers": "^4.0.2",
"file-loader": "3.0.1",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"image-webpack-loader": "4.6.0",
"imports-loader": "0.8.0",
"jest-cli": "24.7.1",
"jest-dom": "3.1.3",
"jest-styled-components": "^6.3.4",
"jsdom": "^16.2.1",
"json-loader": "^0.5.7",
"lint-staged": "8.1.5",
"ngrok": "3.1.1",
"node-plop": "0.18.0",
"node-sass": "^4.13.1",
"null-loader": "0.1.1",
"offline-plugin": "5.0.6",
"plop": "2.3.0",
"pre-commit": "1.2.2",
"prettier": "1.17.0",
"react-app-polyfill": "0.2.2",
"react-hot-loader": "^4.12.20",
"react-test-renderer": "16.8.6",
"react-testing-library": "6.1.2",
"redbox-react": "^1.6.0",
"resolve-url-loader": "^3.1.1",
"rimraf": "2.6.3",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"shelljs": "0.8.3",
"style-loader": "0.23.1",
"stylelint": "10.0.1",
"stylelint-config-recommended": "2.2.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.6.0",
"svg-url-loader": "2.3.2",
"terser-webpack-plugin": "1.2.3",
"url-loader": "1.1.2",
"webpack": "^4.42.1",
"webpack-bundle-analyzer": "^3.6.1",
"webpack-cli": "3.3.0",
"webpack-dev-middleware": "3.6.2",
"webpack-hot-middleware": "2.24.3",
"webpack-pwa-manifest": "^4.2.0",
"whatwg-fetch": "3.0.0"
}
index.js
import 'babel-polyfill'
// this must come before everything else otherwise style cascading doesn't work as expected
import 'main.scss'
import { AppContainer as HotReloadContainer } from 'react-hot-loader'
import { areComponentsEqual } from 'react-hot-loader';
import React from 'react'
import ReactDOM from 'react-dom'
import {createBrowserHistory} from 'history'
import configureStore from 'configureStore'
import App from 'components/App'
import { login } from 'security/actions'
import { flashInfo } from 'site/actions'
import SecurityApi from 'security/api'
import { storage } from 'utils'
const APP_MOUNT_POINT = document.getElementById('app')
const initialState = {}
const history = createBrowserHistory()
const store = configureStore(initialState, history)
const renderRootComponent = (Component) => {
ReactDOM.render(
<HotReloadContainer>
<Component store={store} history={history} />
</HotReloadContainer>,
APP_MOUNT_POINT
)
}
const token = storage.getToken()
store.dispatch(login.request())
SecurityApi.checkAuthToken(token)
.then(({ user }) => {
store.dispatch(login.success({ token, user }))
})
.catch(() => {
store.dispatch(login.failure())
})
.then(() => {
store.dispatch(login.fulfill())
renderRootComponent(App)
const isAuthenticated = store.getState().security.isAuthenticated
const alreadyHasFlash = store.getState().flash.visible
if (isAuthenticated && !alreadyHasFlash) {
store.dispatch(flashInfo('Welcome back!'))
}
})
if (module.hot) {
module.hot.accept('./components/App.js', () => {
ReactDOM.unmountComponentAtNode(APP_MOUNT_POINT)
const NextApp = App.default
areComponentsEqual(NextApp)
renderRootComponent(NextApp)
})
}
App.js
import React from 'react'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'connected-react-router'
import Helmet from 'react-helmet'
import { history } from './index'
import { NavBar, ProgressBar } from 'components'
import { SITE_NAME, COPYRIGHT } from 'config'
import Routes from 'routes'
const AppLayout = () => (
<div className="fixed-nav-top">
<Helmet titleTemplate={`%s - ${SITE_NAME}`}
defaultTitle={SITE_NAME}
/>
<ProgressBar />
<header>
<NavBar />
</header>
<main>
<Routes />
</main>
<footer className="center">
Copyright {new Date().getFullYear()} {COPYRIGHT}
</footer>
</div>
)
export default (props) => (
<Provider store={props.store}>
<ConnectedRouter history={history}>
<AppLayout />
</ConnectedRouter>
</Provider>
)
请检查]的路径>
import { history } from './index'