Last active
November 13, 2018 11:12
-
-
Save kerwynrg/0ecf4d53345585e77b3fa694bad60d4d to your computer and use it in GitHub Desktop.
Workaround to work with create-react-app-typescript and react-hot-loader
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const rewireReactHotLoader = require('react-app-rewire-hot-loader'); | |
const reactAppRewired = require('react-app-rewired'); | |
const getLoader = reactAppRewired.getLoader; | |
const Matcher = reactAppRewired.Matcher; | |
const typescriptLoaderMatcher = rule => | |
rule.test && | |
rule.test.toString() === /\.(ts|tsx)$/.toString() && | |
'use' in rule && | |
Array.isArray(rule.use) && | |
rule.use.find((r) => r.loader && /ts-loader/.test(r.loader)); | |
module.exports = { | |
webpack: function(config, env) { | |
if (env === 'development') { | |
config = rewireReactHotLoader(config, env); | |
// Locate the Webpack loader responsible for handling Typescript and | |
// add babel before typescript for hot loader | |
const typescriptLoader = getLoader(config.module.rules, typescriptLoaderMatcher); | |
if (!typescriptLoader) { | |
throw new Error('Unable to locate typescript loader.'); | |
} | |
typescriptLoader.use.unshift({ | |
loader: 'babel-loader', | |
options: { | |
babelrc: true, | |
plugins: ['react-hot-loader/babel'], | |
}, | |
}); | |
} | |
return config; | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { | |
createStore, | |
compose, | |
Reducer, | |
Store, | |
applyMiddleware, | |
GenericStoreEnhancer | |
} from 'redux'; | |
import createSagaMiddleware from 'redux-saga'; | |
import { all } from 'redux-saga/effects'; | |
import logger from 'redux-logger'; | |
import DevTools from '../../containers/Devtools'; | |
import ApplicationState from '../store.types'; | |
const sagaMiddleware = createSagaMiddleware(); | |
export default (reducers: Reducer<ApplicationState>, sagas: Function) => ( | |
initialState: ApplicationState | |
): Store<ApplicationState> => { | |
const enhancer = compose( | |
// Middleware you want to use in development: | |
applyMiddleware(logger, sagaMiddleware), | |
// Required! Enable Redux DevTools with the monitors you chose | |
DevTools.instrument() | |
) as GenericStoreEnhancer; | |
const store = createStore<ApplicationState>(reducers, initialState, enhancer); | |
let sagaTask = sagaMiddleware.run(function*() { | |
yield all(sagas()); | |
}); | |
// This is the part to use with react-hot-loader | |
// Hot reload reducers (requires Webpack or Browserify HMR to be enabled) | |
if (module.hot) { | |
module.hot.accept('../reducers', () => | |
store.replaceReducer( | |
require('../reducers') /*.default if you use Babel 6+ */ | |
) | |
); | |
module.hot.accept('../sagas', () => { | |
const getNewSagas = require('../sagas'); | |
sagaTask.cancel(); | |
sagaTask.done.then(() => { | |
sagaTask = sagaMiddleware.run(function*() { | |
yield getNewSagas(); | |
}); | |
}); | |
}); | |
} | |
return store; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from 'react'; | |
import { hot } from 'react-hot-loader'; | |
import { Provider } from 'react-redux'; | |
import DevTools from '../Devtools'; | |
import configureStore from '../../store/configureStore'; | |
import App from '../App'; | |
import ApplicationState from '../../store/store.types'; | |
import { fetchAuth } from '../../store/common/Auth/Auth'; | |
const store = configureStore({} as ApplicationState); | |
store.dispatch(fetchAuth()); | |
const isProd = process.env.NODE_ENV === 'production'; | |
const Root = (): JSX.Element => ( | |
<Provider store={store}> | |
<React.Fragment> | |
<App /> | |
{!isProd && <DevTools />} | |
</React.Fragment> | |
</Provider> | |
); | |
export default (isProd ? Root : hot(module)(Root)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
{ | |
"compilerOptions": { | |
"baseUrl": "./", | |
"outDir": "build/dist", | |
"module": "commonjs", | |
"target": "es6", | |
"lib": ["es6", "dom"], | |
"sourceMap": true, | |
"allowJs": true, | |
"jsx": "react", | |
"moduleResolution": "node", | |
"rootDir": "src", | |
// "forceConsistentCasingInFileNames": true, | |
"noImplicitReturns": true, | |
"noImplicitThis": true, | |
"noImplicitAny": true, | |
// "strict": true, | |
"strictNullChecks": true, | |
// "suppressImplicitAnyIndexErrors": true, | |
"noUnusedLocals": true | |
}, | |
"files": ["src/index.tsx"], | |
"exclude": [ | |
"node_modules", | |
"build", | |
"scripts", | |
"acceptance-tests", | |
"webpack", | |
"jest", | |
"src/setupTests.ts", | |
"stories", | |
".storybook", | |
"*.stories.tsx", | |
"*.test.tsx" | |
], | |
"types": ["typePatches"] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment