score:1
If it is still relevant and people have issues yet, there is a way, with the version 3 that is still in dev. I'll paste here my setup for package.json and the webpack.config.js files but if you want a working example here is the repo I created for this
package.json
{
"name": "favesound-project",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --progress --colors --hot --config ./webpack.config.js"
},
"devDependencies": {
"babel-core": "^6.0.20",
"babel-loader": "^6.0.1",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.0.15",
"chai": "^3.5.0",
"enzyme": "^2.3.0",
"exports-loader": "^0.6.3",
"imports-loader": "^0.6.5",
"jsdom": "^9.2.1",
"mocha": "^2.5.3",
"react-addons-test-utils": "^15.1.0",
"react-hot-loader": "^3.0.0-beta.0",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.1"
},
"dependencies": {
"react": "^15.1.0",
"react-dom": "^15.1.0",
"react-redux": "^4.4.5",
"react-router": "^2.4.1",
"react-router-redux": "^4.0.5",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.1.0",
"soundcloud": "^3.1.2",
"whatwg-fetch": "^1.0.0"
},
"author": "",
"license": "ISC",
"keywords": [],
"description": ""
}
webpack.config.js
const webpack = require('webpack');
module.exports = {
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
],
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['babel']
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
}
};
you can use the repo i created as a boilerplate and upgrade the react-hot-loader version when it goes production. cheers.
Source: stackoverflow.com
Related Query
- Webpack Hot Module Reloader not working with React Stateless Component
- webpack and react jsx - hot loading not working with docker container
- React hot reload not working with webpack 4
- Webpack 4 hot reload not working with React TypeScript
- Webpack module federation is not working with eager shared libs
- Connect not working with StateLess component in Redux-react
- Webpack Dev Server (webpack-dev-server) Hot Module Replacement (HMR) Not Working
- How to make svg react component imports from external module working with create-react-app?
- MDL Component Not working with React
- plugin is not working in Webpack with React JS
- Importing SVG as React component not working with Next.js
- createRef not working properly in react stateless component
- React - Material UI - TextField controlled input with custom input component not working properly losing focus
- Importing React as default module not working inside Symfony Webpack Encore project
- Webpack with babel-loader not able to parse react function component
- React built with Webpack 5 typescript compiled with problems in browser. @tailwind directive not working postcss-loader postcss.config.js Emit skipped
- Jest/Enzyme shallow testing React stateless component - wrapper.find() not working
- Not able to add, update, delete rows in material table react using class based component. Previously it was working with functional component
- React Grid Layout with data-grid passed down to a child component not working
- Resolving relative paths in React with Webpack not working
- Webpack hot module replacement lists updated React components in console but does not update them
- React stateless component not working
- React JS Context API with functional component is not working
- React button component with a conditional is not working and displaying
- Webpack 2 + React Hot Loader Not Working
- React async await not working with function component
- React component with Three.js canvas is working but NOT every time
- Visual Studio React Typescript webpack-dev-server hot reload not working for component changes
- React Router - Path with :id is not working correctly for component wrapped by HOC
- Toggling value inside React component with useState not working
More Query from same tag
- Get value returned from Promise in JavaScript
- React append array of objects to formdata
- Is there a way to programatically highlight specific days?
- Mix Redux Store with states
- How do I display data sent from the express router in my react-component?
- How to serialize a form where name is different than data structure
- How to debug a simple API in react
- Dynamically creating table rows in React
- Getting started with React
- Style react-slick.neostack
- Expanded View using Html Css For Given Design
- Make div height grow and shrink when scrolling (React)
- is a good approach defining 2 useEffect Hooks, see my use of case bellow
- rollupjs dynamic require not bundling
- React.js: Passing nested props into React.createElement
- Returning API data with an input search
- Array passed as prop gets accepted as a string
- Having some troubles getting useEffect, useCallback and setTimeout to work together
- How does importing React allow JSX to be processed as JS?
- How to share context between multiple libraries?
- ReactJS – if value is undefined, display placeholder image
- How to select a product by tag in an array?
- Mock a button click in React with Jest and Enzyme
- src\App.js 'nav' is defined but never used no-unused-vars
- How to pass parameter to other component to show details of list from API on button click in react.js
- Adding Modal Popup on Each Image Inside React Slick Slider
- Problems catching the new state of errors in a condition
- Trying to make a conditional state based on api data using redux
- Why does calling the set function of a useState hook apply immediately in async functions?
- How can I apply styles online in React with Meteor?