I am watching a video that teaches me to join to react with the back-end, everything is fine after putting the middlwares I always get an error, and I tried to solve it but I could not
Error:
C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\lib\MainTemplate.js:100
throw new Error(
^
Error: MainTemplate.hooks.startup has been removed (use RuntimeGlobals.startup instead)
at Object.tap (C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\lib\MainTemplate.js:100:12)
at LiveReloadPlugin.applyCompilation (C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack-livereload-plugin\index.js:164:42)
at Hook.eval (eval at create (C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:100:1)
at Hook.CALL_DELEGATE [as _call] (C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\node_modules\tapable\lib\Hook.js:14:14)
at Compiler.newCompilation (C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\lib\Compiler.js:993:26)
at C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\lib\Compiler.js:1035:29
at Hook.eval [as callAsync] (eval at create (C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)
at Compiler.compile (C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\lib\Compiler.js:1030:28)
at C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\lib\Watching.js:112:19
I got the original webpack of the video but still the error is not solved, so I doubt that it is something of the code, but still I can not solve since I am new to this topic
Webpack.config.js code
import webpack from 'webpack';
import htmlWebpackPlugin from 'html-webpack-plugin';
import LiveReloadPlugin from 'webpack-livereload-plugin';
export default {
entry: './src/client/index.js',
output: {
path: '/',
filename: 'bundle.js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader', options: {
sourceMap: true
}
},
{
loader: 'sass-loader', options: {
sourceMap: true
}
}
]
}
]
},
plugins: [
new htmlWebpackPlugin({
template: 'src/client/index.html'
}),
new LiveReloadPlugin()
]
}
Server.js
import express from 'express';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackConfig from '../webpack.config';
// initializing packages
const app = express();
// settings
app.set('port', process.env.PORT || 3000);
// middlwares
app.use(webpackDevMiddleware(webpack(webpackConfig)));
// routes
app.get('/', (req, res) => {
res.send('Hello World');
});
app.get('/api', (req, res) => {
res.json({api: 'works!'});
});
// starting the server
app.listen(app.get('port'), () => {
console.log(`Server on port ${app.get('port')}`);
});
I have read and apparently the error is from the webpack-livereload-plugin, but I could not detect the error
If anyone knows why this error occurs please help me