Cannot resolve stream dependency of styled components - reactjs

Question

I'm stuck with adding styled-components library into my reactjs project. I'm getting an error when trying to run my app in browser, not at the building stage. It's quite common:
Here is my webpack config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
context: path.join(__dirname, 'src'),
entry: {
server: '../server/index.js',
app: './app.jsx',
},
resolve: {
extensions: ['.jsx', '.js'],
},
module: {
rules: [
{
test: /\.(jsx|js)?$/,
use: {
loader: 'babel-loader',
},
},
],
},
target: 'node',
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: './index.html',
excludeChunks: ['server'],
}),
],
};
Here is my babelrc:
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
"#babel/plugin-transform-runtime",
"babel-plugin-styled-components"
]
}
Here is my styled component:
import React from 'react';
import styled from 'styled-components';
export function SearchPage() {
const Container = styled.div`
text-align: center;
`;
return <Container>test</Container>;
}
Here is my package.json:
{
"devDependencies": {
"#babel/core": "^7.3.4",
"#babel/plugin-transform-runtime": "^7.4.0",
"#babel/preset-env": "^7.3.4",
"#babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"babel-plugin-styled-components": "^1.10.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.11.2",
"eslint": "^5.15.3",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-hooks": "^1.6.0",
"husky": "^1.3.1",
"jest": "^24.5.0",
"live-server": "^1.2.1",
"nodemon": "^1.18.10",
"npm-run-all": "^4.1.5",
"prettier": "^1.16.4",
"react-redux": "^6.0.1",
"react-router": "^4.4.0",
"redux": "^4.0.1",
"rimraf": "^2.6.3",
"stream": "^0.0.2",
"uglifyjs-webpack-plugin": "^2.1.2",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
},
"version": "1.0.0",
"main": "dist/server.js",
"scripts": {
"clean": "rimraf dist build",
"dev": "npm-run-all -p dev:watch server:run dev:server",
"dev:build": "webpack --config webpack.dev.js",
"dev:watch": "yarn run dev:build --watch",
"dev:server": "live-server dist",
"server:run": "nodemon",
"prod:build": "npm-run-all clean webpack --config webpack.prod.js",
"test": "jest"
},
"dependencies": {
"express": "^4.16.4",
"html-webpack-plugin": "^3.2.0",
"webpack-merge": "^4.2.1",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"styled-components": "^4.2.0"
}
}
I thought that Webpack should bundle all the dependencies. And I don't understand why stream import is not covered by webpack bundling.
I guess that the answer is pretty simple, but I cannot find it. So any advice will be helpful.

Answer 1

The thing is in target: 'node' into my package.json. It's supposed to use only for server-side build not for client.