I use babel-eslint to lint/fix my code. Worked great until I wanted to adopt some ES2017 async await
found overhere.
I changed my React app accordingly, allbeit slightly different:
The relevant part of my index.js:
async function renderApp() {
const store = await configureStore()
const history = syncHistoryWithStore(browserHistory, store, {
selectLocationState: state => state.get('routing')
})
ReactDOM.render(
<AppContainer>
<MuiThemeProvider muiTheme={muiTheme}>
<Provider store={store}>
<Router history={history} routes={routes(store)} />
</Provider>
</MuiThemeProvider>
</AppContainer>,
document.getElementById('root')
)
}
renderApp()
My store:
// @flow
import 'babel-polyfill'
import { addFormSubmitSagaTo } from 'redux-form-submit-saga/es/immutable'
import { applyMiddleware, createStore, compose } from 'redux'
import { autoRehydrate, persistStore } from 'redux-persist-immutable'
import { browserHistory } from 'react-router'
import { combineReducers } from 'redux-immutable'
import { fromJS } from 'immutable'
import { routerMiddleware } from 'react-router-redux'
import createSagaMiddleware from 'redux-saga'
import rootReducer from './rootReducer'
import sagas from './rootSaga'
export default function configureStore() {
return new Promise((resolve, reject) => {
try {
const sagaMiddleware = createSagaMiddleware()
const middleware = [ routerMiddleware(browserHistory), sagaMiddleware ]
const enhancer = compose(
autoRehydrate(),
applyMiddleware(...middleware)
)
const store = createStore(
combineReducers(rootReducer),
undefined,
enhancer
)
// Decorate with Redux Form Submit Saga
// and create hook for saga's
const rootSaga = addFormSubmitSagaTo(sagas)
sagaMiddleware.run(rootSaga)
// Persist store to the local storage
persistStore(
store,
{ whitelist: ['auth', 'timezone'] },
() => resolve(store)
)
} catch (e) {
reject(e)
}
})
}
Here's my .eslintrc:
{
"env": {
"browser": true,
"jest/globals": true
},
"extends": [
"standard",
"standard-flow",
"plugin:react/recommended"
],
"plugins": [
"compat",
"jest",
"react"
],
"parserOptions": {
"ecmaVersion": 2017,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"comma-dangle": ["warn", "only-multiline"],
"compat/compat": 2,
"jest/no-disabled-tests": "warn",
"jest/no-focused-tests": "error",
"jest/no-identical-title": "error",
"max-len": ["warn", 80],
"no-debugger": 0,
"react/jsx-uses-vars": [2]
}
}
Here's my .babelrc:
{
"plugins": [
"react-hot-loader/babel",
"syntax-flow",
"tcomb",
"transform-class-properties"
],
"presets": [
"es2015",
"react",
["env", {
"targets": {
"browsers": ["last 2 versions"]
}
}]
]
}
But whatever I do: I keep getting the following error:
Module build failed: TypeError: Cannot read property 'range' of null
at TokenStore.getTokenBefore (/Users/danielterwiel/dev/nimbus/node_modules/eslint/lib/token-store/index.js:318:17)
at EventEmitter.checkFunction (/Users/danielterwiel/dev/nimbus/node_modules/eslint/lib/rules/generator-star-spacing.js:131:42)
at emitOne (events.js:101:20)
at EventEmitter.emit (events.js:191:7)
at NodeEventGenerator.enterNode (/Users/danielterwiel/dev/nimbus/node_modules/eslint/lib/util/node-event-generator.js:39:22)
at CodePathAnalyzer.enterNode (/Users/danielterwiel/dev/nimbus/node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:607:23)
at CommentEventGenerator.enterNode (/Users/danielterwiel/dev/nimbus/node_modules/eslint/lib/util/comment-event-generator.js:98:23)
at Controller.enter (/Users/danielterwiel/dev/nimbus/node_modules/eslint/lib/eslint.js:928:36)
at Controller.__execute (/Users/danielterwiel/dev/nimbus/node_modules/estraverse/estraverse.js:397:31)
at Controller.traverse (/Users/danielterwiel/dev/nimbus/node_modules/estraverse/estraverse.js:501:28)
@ multi react-hot-loader/patch webpack-hot-middleware/client babel-polyfill ./src/index.js ./src/style/main.css
I'm not entirely sure what to do. I came accross multiple posts with similar problems, but none of these have lead to an answer until now.