Error webpack dev server when using yarn workspaces - webpack-dev-server

Question

I got an error "webpack-dev-server error cannot find module 'webpack-cli/bin/config/config-yargs'" when installing webpack, webpack-cli and webpack-dev-server in a yarn workspace.
Doesn't have this issue when installing them in a repo.
I checked the node_modules in the root and in the child. It appears that this config/config-yargs file is installed in the node_module of the CHILD but not in the ROOT one.
I have to copy it manually from child to root to make this works.
Is there a way to install this correctly ?
My root package.json :
{
"private": true,
"workspaces": [
"packages/server",
"packages/front", <-- webpack has been installed her
],
"name": "test",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
}
part of child package.json
{
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/preset-env": "^7.8.4",
"#babel/preset-react": "^7.8.3",
"#babel/preset-typescript": "^7.8.3",
"typescript": "^3.7.5",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
webpack.config.js
const path = require("path");
const rules = [
{
test: /\.(tsx)$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.css$/,
loader: ["style-loader", "css-loader"],
},
];
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
target: "web",
mode: "development",
entry: "./src/examples/index.tsx",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
module: { rules },
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
devServer: {
contentBase: "./",
port: 5000,
historyApiFallback: true,
},
plugins: [
new HtmlWebpackPlugin({
title: "react typescript babel webpack boilerplate",
template: "index.html",
}),
],
};

Answer 1

The solution is to use embedded devServer with webpack serve command, read about it here
https://webpack.js.org/guides/development/#using-webpack-dev-server
You might have another problem with workspaces and the solution is nohoist, read about it here
https://classic.yarnpkg.com/blog/2018/02/15/nohoist/
Nohoist for me was not working until I figured out it should be used on root package.json and not in child, here is the version that worked for me
"workspaces": {
"packages": [
"package-1",
"package-2",
],
"nohoist": [
"**/webpack",
"**/webpack/**",
"**/webpack-dev-server",
"**/webpack-dev-server/**",
"**/#webpack-cli",
"**/#webpack-cli/**",
"**/webpack-cli",
"**/webpack-cli/**"
]
},
You might also want to delete node_modules as usual :)