React Styled Components stripped out from production build

Question

I use Styled Components as CSS alternative for my React App. In development everything works fine (first screenshot), but when I run a production build (npm build

Answer 1

I was able to replicate your issue and it looks like when the application is in production, it can't select html elements within a styled component (the styles don't apply to the element). Instead, you'll need to create additional stylized components for input and button.

Working example: https://github.com/mattcarlotta/Weather-App

I refactored your application to simplify its structure. Please read the README for instructions on how to run it in development and in production (DO NOT use the above repository for production, as it's highly unnecessary to have an express backend -- I only did this so that you can run a local production build).

What I changed:

• Moved any styled components to the components folder for modularity
• Any sort of global stylization was put into a styles folder
• Moved assets to images and imported them into the styled component that needed them (eliminating the need to use require('../path/to/image'))
• Simplified the App.js file. Children are controlled by state and class methods. Most importantly, turned your form into a controlled component, fixed the getWeather method to: Not allow an empty submission, if the AJAX calls fails, it'll catch the error (instead of breaking your app), and reset the form inputs on successful submission.
• Added prop-types to ensure props were consistent in declaration (string remains a string, number remains a number, and so on).