Comments (17)
I followed @gaearon recomendations in
https://github.com/gaearon/react-hot-loader#add-babel-after-typescript
and code from
https://github.com/strothj/react-app-rewire-typescript-babel-preset/blob/master/packages/rewire/rewireWebpack.ts
And I succeed with https://github.com/wmonk/create-react-app-typescript hot loader
This is what I did, hope it helps.
https://gist.github.com/kerwynrg/0ecf4d53345585e77b3fa694bad60d4d
from create-react-app-typescript.
Finally, I also made it work. pfeeew 😤
This is everything I did during the process, some of it might be unnecessary.
(The following is basically the diff with my last commit before enabling HMR.)
package.json
{
"dependencies": {
"react-app-rewire-hot-loader": "^1.0.1",
"react-app-rewire-typescript": "^2.0.2",
"react-app-rewired": "^1.5.2",
"react-hot-loader": "^4.3.3",
"react-scripts": "^1.1.4",
"react-scripts-ts": "^2.16.0",
},
"scripts": {
"start": "react-app-rewired start --scripts-version react-scripts-ts",
"build": "react-app-rewired build --scripts-version react-scripts-ts",
"test": "react-app-rewired test --env=jsdom --scripts-version react-scripts-ts",
"eject": "react-app-rewired eject --scripts-version react-scripts-ts",
},
"devDependencies": {
"@types/node": "^9.6.23",
"@types/webpack-env": "^1.13.6",
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es6", // es6 required for babel-loader that is required for react-hot-loader : https://github.com/gaearon/react-hot-loader#add-babel-after-typescript
"module": "esnext",
"moduleResolution": "node"
}
}
tsconfig.prod.json
{
"extends": "./tsconfig",
"target": "es5"
}
src\index.tsx (practically default)
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import registerServiceWorker from './registerServiceWorker'
import './index.css'
ReactDOM.render(
<App/>,
document.getElementById('root') as HTMLElement
)
registerServiceWorker()
src\App.tsx
//...
import { hot } from 'react-hot-loader'
class App extends React.Component {
// ...
}
export default hot(module)(App)
config-overrides.js
const rewireTypescript = require('react-app-rewire-typescript')
const rewireReactHotLoader = require('react-app-rewire-hot-loader')
module.exports = function override(config, env) {
config = rewireTypescript(config, env)
config = rewireReactHotLoader(config, env)
return config
}
from create-react-app-typescript.
This typing looks like it includes the neccessary definitions to enable module.hot
from create-react-app-typescript.
I just had a quick play, and made the changes to get hot-reloading working, you can see the repo and commit here.
You will need to replace @types/node
with @types/webpack-env
as above. And install the other deps required by react-hot-loader@3.
I'm going to close this issue, as I think the above should be enough to get this working for you. But, want to keep react-scripts-ts
as close to react-scripts
as possible, so hot-reloading won't be adopted until it it's in the original repo.
from create-react-app-typescript.
@Aranir just got back to work, and found the way it was handled here, hope this helps:
export interface WebpackNodeModule extends NodeModule {
hot: {
accept: (name: string, handler: () => void) => void
};
}
import { WebpackNodeModule } from './typePatches/webpackNodeModule';
if ((module as WebpackNodeModule).hot) {
// do stuff
}
it's not ideal, and is quite hacky, but would allow you to carry on using the @types/node
definitions with HMR.
from create-react-app-typescript.
@SeanRoberts I updated the gist with mi Root and configureStore for dev environment, It includes some redux-saga code but if you don't use it, you can omit it.
Sometimes it inject code on demand, some other times app reloads to load, I don't remember what are the scenarios when this happens.
from create-react-app-typescript.
@kerwynrg Unfortunately that's not it either. When I've got some time I'm going to try with a fresh app and then slowly add things back in until I find the problem. I'll update this ticket when I find a solution (as long as it's ok with @wmonk for us to keep using this issue tracker)
from create-react-app-typescript.
I have had react-hot-loader@3
working with standard ES6, but haven't tried with TS. I know there is definitely more configuration than just adding the loader like you have done which looks to be best described here - however, i'm not sure how this will work with typescript as it relies on a babel plugin.
from create-react-app-typescript.
I tried with react-hot-loader@3 (current beta version), but in typescript I don't find module.hot
.
if (module.hot) {
module.hot.accept('./containers/Root', () => {
render(
<AppContainer
component={require('./containers/Root').default}
props={{ store }}
/>,
document.getElementById('root')
);
});
}
Any idea where i can get the definition for module.hot
?
from create-react-app-typescript.
It nearly works. As long as I don't need to use the @types/node
definition files in the project.
Unfortunately many libraries (written in typescript) require @types/node
to be installed which then clashes with webpack-env
as for example require
is redefined.
I guess there is currently no fix for this...
from create-react-app-typescript.
@wmonk @Aranir
If its a webpack build, module is there. Just shush typescript and you are good to go.
declare const module:any
from create-react-app-typescript.
yarn add "@types/webpack-env"
and you should be all set
from create-react-app-typescript.
@kerwynrg Thanks for sharing this. I still can't get it working though, my app just reloads and I don't get anything in the console from HMR. Would you mind sharing what your root/index component looks like? Did you have to add a .babelrc or anything else not covered in the gist? Thanks again for sharing, would really like to get this working!
from create-react-app-typescript.
Thanks @kerwynrg, this looks a lot like what I have so I think something else in my stack (possibly another rewire package) might be causing the issue.
from create-react-app-typescript.
@SeanRoberts What package are you using?
from create-react-app-typescript.
@kerwynrg I'm using the following:
react-app-rewire-styled-components
react-app-rewire-graphql-tag
react-app-rewire-svg-react-loader
react-app-rewire-hot-loader
I've also got the following in tsconfig:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom", "esnext.asynciterable"],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "src",
"baseUrl": "./src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true
},
"exclude": [
"node_modules",
"build",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts"
]
}
Did you manually add babel-loader? Or anything in a babelrc file?
Really appreciate the help with this, it'd be great to get a definitive recipe together for getting hot reloading with react-scripts-ts!
from create-react-app-typescript.
I don't have a .babelrc.
This is my tsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"outDir": "build/dist",
"module": "commonjs",
"target": "es6",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "src",
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": 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"]
}
@SeanRoberts I see module and target are different.
@gaearon Mention target should be es6, maybe that's the issue
from create-react-app-typescript.
Related Issues (20)
- Browserlist error
- CRA 2.0 HOT 31
- Include nodejs v8 for for Travis CI build
- Remove dependency on babel HOT 2
- Using jest-extended? HOT 1
- Husky hooks not working HOT 1
- Update webpack-dev-server HOT 10
- Add documentation detailing differences between CRA 2.0 and CRA-TS HOT 10
- Source Maps don't work for `js` or `jsx` files in live dev mode.
- Version 4.0.8: Internet Explorer no working anymore HOT 2
- Build process is almost 20 minutes long HOT 1
- postcss support? HOT 1
- Why is Jest's version hard coded to "20.0.4"? HOT 1
- Jest doesn't work when I add lint-staged
- Maintenance
- Tslint rules are barriers to entry HOT 2
- [Help] Compatibility IE + Firefox old versions problems
- Are 4.X.X versions are legit? HOT 1
- Jest doesn't resolve absolute paths from tsconfig HOT 1
- npm start dont work on freeBSD
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from create-react-app-typescript.