인프런 커뮤니티 질문&답변
작성한 질문수
react-hot-loader 적용시 에러가 생깁니다.
작성
·
917
0
ERROR in ./src/index.js
Module build failed: Error: React Hot Loader: The Webpack loader is now exported separately. If you use Babel, we recommend that you remove "react-hot-loader" from the "loaders" section of your Webpack configuration altogether, and instead add "react-hot-loader/babel" to the "plugins" section of your .babelrc file. If you prefer not to use Babel, replace "react-hot-loader" or "react-hot" with "react-hot-loader/webpack" in the "loaders" section of your Webpack configuration.
at Object.warnAboutIncorrectUsage (/Users/heoyunjee/Desktop/react_fundamentals/node_modules/react-hot-loader/lib/index.js:7:11)
@ multi main
서버 실행하면 이런 에러가 뜨는데, 이유와 해결방법을 알려주세요..!
답변 10
2
var webpack = require("webpack");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
path: __dirname + "/public/",
filename: "bundle.js",
},
devServer: {
hot: true,
// inline: true,
host: "0.0.0.0",
port: 4000,
static: __dirname + "/public/",
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
cacheDirectory: true,
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: ["react-hot-loader/babel"],
},
},
],
},
plugins: [new webpack.HotModuleReplacementPlugin()],
};
-
import React, { Component } from "react";
import { hot } from "react-hot-loader";
class App extends Component {
constructor(props) {
super(props);
this.state = {
name: "test",
};
}
render() {
return (
<>
<button
onClick={() => {
this.setState({ name: "Veloport" });
}}
>
CLICK ME
</button>
<div>Hello! {this.state.name}!!</div>
</>
);
}
}
export default hot(module)(App);
-
{
"name": "react-fundamentals",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev-server": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@babel/cli": "^7.16.0",
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"@babel/preset-react": "^7.16.0",
"babel-loader": "^8.2.3",
"react-hot-loader": "^4.13.0",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0"
}
}
1
여러번 삽질 후 webpack 4.x 에서 드뎌~ React, Babel, Sass 번들 환경 구성에 성공했습니다.
물론 react-hot-loader도 설정에 성공했습니다.
참조하실 분은 https://github.com/coddingbear/webpack4_quickstarter/tree/2005-react-hot-loader 함 보세요.
1
0
velopert(김 민준)
지식공유자
알고보니 추가적으로 수정해야 할 부분이 있었습니다: https://github.com/velopert/react-codelab-fundamentals/commit/bead4c5438cb8c030ac6cbb59d0c6be2c1074511
react hot loader 3 테스트 할 때 localhost 에서 작업해서 새로고침이 되고있었는지 몰랐습니다 _ _
업데이트의 자세한 내용은 https://github.com/gaearon/react-hot-loader/tree/next-docs/docs#migration-to-30 여기 참고하시면 되겠구요,,
조만간 강의 수정 하도록 하겠습니다.
0
강의 감사히 잘보고 있습니다.
저도 위와 같은 문제가 있습니다. react-hot-loader 버전은 3.0.0-beta.3을 사용중인데 HMR 강의에 추가된 내용을 넣어도 페이지가 새로고침이 됩니다.
몇 시간째 삽질하는데 잘 안풀리네요.
0
0
0
ooyunjee
질문자
react-hot-loader 버전이 3.0.0-beta.1로 설치가 되어서 1.3.0으로 바꾸고 nam install 했더니 해결 되었습니다. 버전 문제인가요?
0
0
velopert(김 민준)
지식공유자
혹시, webpack.config.js 파일에서
loaders: ['react-hot', 'babel?' + JSON.stringify({
cacheDirectory: true,
presets: ['es2015', 'react']
})],
이 부분에 react-hot 대신에 react-hot-loader 라고 적으신건 아닌지요?
만약에 아니라면 - 다음 내용과 비교해보세요..
var webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public/',
filename: 'bundle.js'
},
devServer: {
hot: true,
inline: true,
host: '0.0.0.0',
port: 4000,
contentBase: __dirname + '/public/',
},
module: {
loaders: [
{
test: /\.js$/,
loaders: ['react-hot', 'babel?' + JSON.stringify({
cacheDirectory: true,
presets: ['es2015', 'react']
})],
exclude: /node_modules/,
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};