I have a React/Django app that's behaving differently when built for production that it does when run on the development server. The development version is how I want it to look.
There are a number of issues with the CSS. Text is a different font, and a some Bootstrap/Reactstrap features are ignored. See example screenshots below.
I think the issue has to do with the order in which css files are processed by the dev server, versus how Django serves the built app, by collecting the files in the /build dir created by the build script into the Django /staticfiles dir. I'm mystified how this would selectively apply classes to the same component, however. (See below - the offset of the jumbotron text is different, while the column size is the same)
Here's a screenshot of the home page in the production build, either served locally by Django or remotely on Heroku. (npm run build or npm run build-local - see package.json file below)
And here is how it looks on the local dev server: (npm run start)
In particular, the offset-md-5 class is ignored on the production build, while the rest of the classes aren't, col-md-5 for example applies in both versions.
Here's the relevant component:
const Photojumbo = () => {
return(
<Container className="jumbo-text ">
<Jumbotron className="" style={{ backgroundImage: "url(/static/photosquat-cropped.jpg)", backgroundSize: 'cover' }}>
<Col className="header header-text col-md-5 offset-md-6" >
<h3>ytterblog</h3>
<p>A blog app and portfolio project by Gabriel Ytterberg</p>
</Col>
</Jumbotron>
</Container>
)
}
Here's the part of my package.json with the build scripts and dependencies. Note that I added the build-local script to emulate how it would look deployed to Heroku, since the deploy process takes so long. The build-local and Heroku build version are identical as far as I can tell.
"dependencies": {
"#testing-library/jest-dom": "^5.11.5",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.21.0",
"bootstrap": "^4.5.3",
"bootstrap-social": "^5.1.1",
"express": "^4.17.1",
"font-awesome": "^4.7.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-fontawesome": "^1.7.1",
"react-redux": "^7.2.2",
"react-redux-form": "^1.16.14",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"react-transition-group": "^4.4.1",
"reactstrap": "^8.7.1",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "PUBLIC_URL=http://localhost:3000/ react-scripts start",
"build": "PUBLIC_URL=https://ytterblog.herokuapp.com/ react-scripts build",
"build-local": "PUBLIC_URL=http://localhost:8000/ react-scripts build && python manage.py collectstatic --noinput",
"postbuild": "python manage.py collectstatic --noinput",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Here's my App.css, which is the only css file I'm using:
height: 40vmin;
pointer-events: none;
}
#media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
#keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.jumbotron {
position:relative;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: 0 auto;
background: none;
color:floralwhite;
}
.navbar-dark {
background-color: #142f87;
}
.header{
background-color: #1a3db0;
margin:0px auto;
padding: 20px 0px 20px 0px;
}
.header-text{
color: #dbdbdb;
text-align: center;
}
.footer{
background-color: #1a3db0;
margin-top: 50px;
padding: 20px 0px 20px 0px;
position: relative;
}
.footer-text{
color: #dbdbdb;
text-align: center;
}
.avatar{
height: 100;
width: 100;
margin: 20px;
}
.postcard{
margin: 50px 0px 50px 0px;
}
dl {
display: grid;
grid-template-columns: max-content auto;
column-gap: 20px;
}
dt {
grid-column-start: 1;
}
dd {
grid-column-start: 2;
}
.card {
padding-right: 0!important;
padding-left: 0!important;
}
What am I missing?!?!
It could be race condition. I had an issue where in production, the setState getting called twice, and somehow it run in parallel. The result rendered was half 1st state, and the other half was 2nd state.
I don't remember how did I solve it. Though, you try check if a setState is busy.
Use the developer tools on the browser to see if any bootstrap CDNs or other libraries are not loading properly if any of them are being blocked or ignored somehow it will probably be displayed on the console of the developer tools, that is what I would do.
Related
I'm making a little ticker animation for my navbar but for some reason, the ticker doesn't move when I click on a NavLink. At first, I thought it was a problem with the CSS file but that seems to be working fine. I then tried using an older version of react-router-dom but that also didn't seem to work. Some help would be appreciated.
As you can see, the 'active-nav' class is supposed to change to any NavLink that is Active & the rest are left with empty quotation marks.
Navbar.jsx:
import {Link, NavLink} from 'react-router-dom'
import {links} from '../data'
import {GoThreeBars} from 'react-icons/go'
import Logo from '../images/logo.png'
import "./navbar.css"
const Navbar = () => {
return (
<nav>
<div className='container nav__container'>
<Link to="/" className='logo'>
<img src={Logo} alt="Nav Logo"/>
</Link>
<ul className="nav__links">
{
links.map(({name, path}, index) => {
return (
<li>
<NavLink to={path} className={({isActive}) => isActive ? 'active-nav' : ''}>{name}</NavLink>
</li>
)
})
}
</ul>
<button className="nav__toggle-btn">
<GoThreeBars />
</button>
</div>
</nav>
)
}
export default Navbar
Here you can see that most of the functionality is in the CSS
navbar.css:
nav {
height: 5rem;
width: 100vw;
background: var(--color-primary);
display: grid;
place-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 99;
}
/* only shows on medium and small screens */
.nav__toggle-btn {
display: none;
}
.nav__container {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
width: 1920px;
}
.logo {
width: 7rem;
margin-right: 400px;
}
.nav__links {
display: flex;
gap: 3.5rem;
}
.nav__links a {
transition: var(--transition);
}
.nav__links a:hover {
color: var(--color--secondary);
}
.active-nav {
position: relative;
}
.nav__links::after {
content: '';
display: block;
width: 1.2rem;
height: 1.2rem;
background: var(--color-primary);
position: absolute;
left: calc(50% - 0.6rem);
transform: rotate(45deg);
margin-top: 2.7rem;
}
package.json
{
"name": "reactappblue",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.6.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
app.js:
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import Home from './pages/home/Home'
import About from './pages/about/About'
import Contact from './pages/contact/Contact'
import Gallery from './pages/gallery/Gallery'
import Plans from './pages/plans/Plans'
import Trainers from './pages/trainers/Trainers'
import NotFound from './pages/notfound/Notfound'
import Navbar from './components/Navbar'
import {BrowserRouter as Router} from 'react-router-dom'
const App = () => {
return (
<BrowserRouter>
<Navbar />
<Routes>
<Route index element={<Home/>} />
<Route path="about" element={<About/>} />
<Route path="contact" element={<Contact/>} />
<Route path="gallery" element={<Gallery/>} />
<Route path="plans" element={<Plans/>} />
<Route path="trainers" element={<Trainers/>} />
<Route path="*" element={<NotFound/>} />
</Routes>
</BrowserRouter>
)
}
export default App
It's rather hard to exactly reproduce your problem since you are missing some relevant information in your question. I made some assumptions:
Your package.json would have been valuable since it contains the versions of the packages you're using, I used "react": "18.2.0" and "react-router-dom": "6.4.2"
I wrapped the Navbar in a react-router-dom BrowserRouter in the parent component like this:
import Navbar from './Navbar.jsx';
import {BrowserRouter as Router} from 'react-router-dom'
function App() {
return (
<Router>
<div className="App">
<Navbar/>
</div>
</Router>
);
}
Doing so, the class name was set properly for me. I didn't have to change any parts of the code you provided.
I hope this already helps, if not, please provide the versions of the packages you're using and how the <Navbar /> component is instantiated in its parent component(s).
You can simply use activeClassName prop.
<NavLink to={path} activeClassName="active-nav">{name}</NavLink>
If you are using className you don't need to destructure {isActive}, simply use
<NavLink
to={path}
className={isActive => isActive ? 'active-nav' : ''}
>
{name}
<NavLink/>
SCSS : Why is this code not compiled in extention "Dart JS sass" at first time.Code was saved and compile with watch.But always it can't be compiled.
After quit and restart Visual Stadio Code,it can be naturaly compiled.
I don't know why it nessesory to restart Visual Stadio Code.
This is scss code.
#use "bases" as m;
#top {
.header-top-left {
h1 {
display: inline-block;
padding-right: 20px;
font-size: 10px;
#include m.tab {
font-size: 9px;
height: 24px;
line-height: 24px;
}
#include m.sp {
padding: 0;
}
}
}
This is "bases" as m.'s code.
#mixin tab{ #media screen and (max-width: ($tab))
{
#content;
}
}
This is css error code.
Error: Invalid CSS after " #include m": expected "}", was ".tab {"
on line 12 of /Users/***/Desktop/***/***/***/scss/top.scss
7: .header-top-left {
8: h1 {
9: display: inline-block;
10: padding-right: 20px;
11: font-size: 10px;
12: #include m.tab {
13: font-size: 9px;
14: height: 24px;
15: line-height: 24px;
16: }
17: #include m.sp {
Backtrace:
/Users/***/Desktop/***/***/***/scss/top.scss:12
This is package.json's code.
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"sass": "sass scss/:css/ --no-source-map --watch"
},
"author": "***",
"license": "ISC",
"devDependencies": {
"sass": "^1.49.11"
}
}
This is setting.json's code.
{
"dartsass.targetDirectory": "css",
"dartsass.sassBinPath": "/Users/***/node_modules/sass/sass.js",
"dartsass.disableCompileOnSave": false
}
I'm creating a React component library using the TSDX react-with-storybook template. However, I can't seem to get CSS to work in my components via import.
Here is a my button component:
import React, { FC, HTMLAttributes } from 'react';
import './button.css';
export interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
text: string;
}
export const Button: FC<ButtonProps> = ({ text }) => {
return <button className="button">{text.toLowerCase()}</button>;
};
Here is my css:
.button {
background: '#97C339';
border-radius: '30px';
color: 'white';
border: 'none';
cursor: 'pointer';
font-size: '18px';
height: '60px';
width: '180px';
}
When viewing my button story in the browser the button has no styling and shows 'invalid property value':
What are the best practises in terms of applying css to a react based library?
Here is my package.json:
"devDependencies": {
"#babel/core": "^7.15.8",
"#size-limit/preset-small-lib": "^6.0.2",
"#storybook/addon-essentials": "^6.3.10",
"#storybook/addon-info": "^5.3.21",
"#storybook/addon-links": "^6.3.10",
"#storybook/addons": "^6.3.10",
"#storybook/react": "^6.3.10",
"#types/react": "^17.0.28",
"#types/react-dom": "^17.0.9",
"babel-loader": "^8.2.2",
"husky": "^7.0.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"rollup-plugin-postcss": "^4.0.1",
"size-limit": "^6.0.1",
"tsdx": "^0.14.1",
"tslib": "^2.3.1",
"typescript": "^4.4.3"
}
Not a problem with your React environment, its just that your css is invalid.
Theres no need to encapsulate your css property values in ticks (there are some occasions you need ticks, but none of your's need em).
.button {
background: #97C339;
border-radius: 30px;
color: white;
border: none;
cursor: pointer;
font-size: 18px;
height: 60px;
width: 180px;
}
Removing the ticks should do the trick.
So I'm just starting to learn React and I'm trying to incorporate a css file to style a react component (ie a sidebar) but I'm not sure why none of the styles show up on the webpage. I've tried inlining css in the index.js file and that works but I'm trying to move all of the styling code into a css file. I have a sass loader and css loader installed and included them in the webpack.config.js file. Am I just forgetting something dumb?
Here's my style.css file
.sidebar {
position: fixed;
height: 200px;
font-size: 20;
width: 60px;
background-color: deepskyblue;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: azure;
}
li {
display: block;
color: gray;
padding: 8px;
font-size: 20;
text-decoration: none;
}
li :hover {
background-color: forestgreen;
}
And my index.js file
import React from 'react'
import {styles} from './style.css'
import Home from './home.js'
export class Sidebar extends React.Component {
render() {
return (
<div className={styles.sidebar}>
<ul>
<li>Home</li>
<li>Test1</li>
<li>Test2</li>
</ul>
</div>
)
}
}
no need to call styles.sidebar as if it were an object, just import the file and assign className as an ordinary class....
import './style.css';
// [...]
<div className='sidebar'>
You mentioned you have CSSLoader in your webpack.config.js file. First, let's confirm that you have something similar to me:
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
Now, every time you run your webpack server, the dev bundle will include your styles in it. With that, you should be able to import css files my referencing them in the React file:
import './MyComponent.css'
const MyComponent = () => {...};
If everything is still the same, but things are still not working, I highly recommend create-react-app, which is a painless solution for you to focus on learning React without bothering so much with configuration details. Create React app includes amongst other things, CSS importing and Jest testing.
For a chrome extension, I am trying to apply a set of CSS rules on some elements injected through a script. I tried separately running the injected html, explicitly linking the CSS file and it works in that case but nothing sort of works this way. Following is the code
Snippet from my manifest.json:
"background": {
"scripts": [ "Scripts/Background/background.js" ]
},
"browser_action": {
"default_icon": "img/icon.png"
//"default_popup": "popup.html"
},
"permissions": [
"bookmarks",
"tabs",
"http://*/*",
"https://*/*",
"activeTab"
],
"web_accessible_resources": [
"HTML/popup.html", "Scripts/External/jquery-2.1.3.min.js", "Scripts/Injected/loadExtUI.js", "Style/extUI.css"
]
My Background script:
// Supposed to be Called when the user clicks on the browser action icon.
function loadExt() {
chrome.tabs.insertCSS(null, { file: "Style/extUI.css" }, function () {
alert("Inserted CSS") //This alert works
});
chrome.tabs.executeScript(null, { file: "Scripts/External/jquery-2.1.3.min.js" }, function () {
chrome.tabs.executeScript(null, { file: "Scripts/Injected/loadExtUI.js" });
});
}
chrome.browserAction.onClicked.addListener(loadExt);
Scripts/Injected/loadExtUI.js:
var popup_root = document.getElementById('chimp_ext_container');
if (popup_root == null) {
$.get(chrome.extension.getURL("HTML/popup.html"), function (data) {
//$(data).appendTo('body');
// Or if you're using jQuery 1.8+:
$($.parseHTML(data)).appendTo('body');
});
} else {
document.body.removeChild(popup_root);
}
Style/extUI.css
#chimp_ext_container {
max-width: 420px !important;
overflow-x: hidden !important;
font-family: Arial, sans-serif !important;
font-size: 12px !important;
margin:1px !important;
padding:10px !important;
border: 1px groove !important;
border-radius: 5px !important;
background-color:aqua;
position: absolute !important;
top:10px !important;
float:right !important;
}
And finally, here is the HTML/pop
<!doctype html>
<html>
<head>
<title>Chimpu</title>
</head>
<body>
<div id="chimp_ext_container">
<h1>Chimpu mera doshtttt!</h1>
</div>
</body>
</html>
The test page where I am running this is my own page which just has a element with no other CSS applied so I am sure, nothing is interfering with my CSS file.
While debugging this, I observed that css styles applied to <p> gets properly seen but not to <div>!