Не удается разрешить потоковую зависимость стилизованных компонентов

Question

Я застрял с добавлением библиотеки стилевых компонентов в свой проектactjs.Я получаю сообщение об ошибке при попытке запустить мое приложение в браузере, а не на этапе сборки.Это довольно часто:

Вот мой конфиг веб-пакета:

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'],
        }),
    ],
};

Вот мой babelrc:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "babel-plugin-styled-components"
    ]
}

ВотМой стилизованный компонент:

import React from 'react';
import styled from 'styled-components';

export function SearchPage() {
    const Container = styled.div`
        text-align: center;
    `;

    return <Container>test</Container>;
}

Вот мой 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"
  }
}

Я думал, что Webpack должен объединить все зависимости.И я не понимаю, почему импорт потоков не входит в пакет веб-пакетов.

Я думаю, что ответ довольно прост, но я не могу его найти.Так что любой совет будет полезен.

Answer 1

Дело в цели: «узел» в моем package.json.Предполагается использовать только для серверной сборки, а не для клиента.