Styled Components not displaying in Chrome

Question

I have created a react app that is using typescript, webpack and babel. I decided to incorporate styled-components for styling. When using my GlobalStyles component the app does not display in chrome browser but when i remove GlobalStyles the app displays. I inspect my app in Chrome and can see the styles from GlobalStyles being applied but again the app does not display. There are no error messages in console log and terminal states compiled successfully.

Has anyone encountered this problem and have a possible solution?

webpack.config.js

const path = require('path')
require("babel-polyfill")
const rules = [
    {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: ['babel-loader','awesome-typescript-loader']
    },
    {
        test: /\.(png|gif|svg)$/,
        loader: ['file-loader', 'url-loader']
    },
    {
        test: /\.css$/,
        loader: ['style-loader', 'css-loader']
    }
]

module.exports = {
    target: 'web',
    mode: 'development',
    entry: ['babel-polyfill', './src/index.tsx'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: { rules },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    devServer: {
        contentBase: './public',
        port: 5000
    }
}

.babelrc

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

globalStyles.js

import { createGlobalStyle } from "styled-components";

export const GlobalStyles = createGlobalStyle`
    html {
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }
    *, *:before, *:after {
        -webkit-box-sizing: inherit;
        box-sizing: inherit;
    }

    body {
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
         'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
    }
`;

index.tsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { GlobalStyles } from "../styles/globalStyles.js";

import { StoreProvider } from "./Store";

const root = document.getElementById("root");
ReactDOM.render(
  
    
      
        
      
    
  ,
  root
);

user_13140337 · Answer

Put your Global style in this way , that is, don't put any components inside it

const root = document.getElementById("root");
ReactDOM.render(
  
    
      
      
    
  
  root
);

user_13140337 · Answer

Anything take a look at this example taken from the library documentation https://styled-components.com/docs/api

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`

// later in your app


  
   {/* example of other top-level stuff */}

Styled Components not displaying in Chrome

2 Answers