无法解析样式化组件的流依赖性

Question

我一直坚持将样式组件库添加到我的reactjs项目中。尝试在浏览器中而不是在构建阶段运行我的应用程序时出现错误。这很常见：

这是我的webpack配置：

textEditBookID

这是我的babelrc：

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

这是我设计的样式：

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

这是我的package.json：

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

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

    return <Container>test</Container>;
}

我认为Webpack应该捆绑所有依赖项。而且我不明白为什么webpack捆绑不包括流导入。

我想答案很简单，但是我找不到。因此，任何建议都会有所帮助。