The Problem
I have a React app that is deployed to Heroku that uses create-react-app to do all of the bundling in the background.
I am using a Node.js backend written in Typescript running node version 10.15.3
When I serve my site locally in development everything goes fine. I run npm start and the website serves correctly and looks like this:
The site also looks the same on staging & production.
But when I look at the site on my mobile device I see:
I have reached out to Heroku support and they told me that they didn't know what was going on.
It seems that all problems with this online are solved for people using Ruby & I haven't seen a single person using React run into this.
All the right files exist in the build folder.
Also, here is my index.js:
import LoadingIndicator from './components/elements/LoadingIndicator';
import { PersistGate } from 'redux-persist/integration/react';
import { persistStore, persistReducer } from 'redux-persist';
import { BrowserRouter as Router } from "react-router-dom";
import { StripeProvider } from 'react-stripe-elements';
import storage from 'redux-persist/lib/storage';
import * as Environment from './Environment';
import App from './components/App';
import ReactDOM from 'react-dom';
import React from 'react';
import './index.css';
import { Provider } from 'react-redux';
import middleware from './middleware';
import rootReducer from './reducers';
import { createStore } from 'redux';
const persistConfig = {
key: 'app',
storage
}
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer, middleware);
const persistor = persistStore(store);
ReactDOM.render(
<Provider store={store}>
<PersistGate loading={<LoadingIndicator />} persistor={persistor}>
<StripeProvider apiKey={Environment.get("STRIPE_PUBLIC_KEY")}>
<Router>
<App />
</Router>
</StripeProvider>
</PersistGate>
</Provider>,
document.getElementById('root')
);
And my folder structure:
Resources I Have Referenced:
Create React App Deployment
Creating A Production Build
Create React App Deployment (Heroku Section)
Checking The Heroku App's File System
CSS Is Looking Different On Heroku
Heroku Messes Up Styles
I forgot to add <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet"> to the <head> section in my index.html file.
Not sure how it loaded locally...probably because I have the font on my laptop? Not sure but that made it work.
It was not anything to do with CSS not loading or being served.
Related
I am importing Uppy styles in my component. In the local environment styles are successfully loaded from Uppy module. But when app is deployed to Vercel then the CSS files are not loaded.
What am I missing?
import Uppy from "#uppy/core";
import { Dashboard } from "#uppy/react";
import "#uppy/core/dist/style.css";
import "#uppy/dashboard/dist/style.css";
export default function UploadPage() {
const uppy = new Uppy();
return (
<Dashboard uppy={uppy} />
)
}
Running npm run build outputs a diffrent css compiled website than when running npm start what's the difference and why does it happen? The posts i found were about changing webpack.config but i know that create-react-app work a bit differently. May you shine some light?
My app.js :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from 'react-redux';
import {store, persistor} from './Reducers/configStore'
import {PersistGate} from 'redux-persist/integration/react'
import './index.css';
import './App.css';
import "normalize.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import "#blueprintjs/core/lib/css/blueprint.css";
import "#blueprintjs/icons/lib/css/blueprint-icons.css";
import 'react-notifications-component/dist/theme.css';
require('dotenv').config();
const Piazeta = () => {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
)
}
ReactDOM.render(<Piazeta />, document.getElementById('root'));
The problem was that in the development build the bootstrap css was overwriting the css written by me and in the production build it was the other way around. I had a couple of things named the same which made the problems appear. Double check your css every time i guess, the order of them differs in prod and build
I'm trying to use AtlasKit with Next.js 8, but for some reason, there is a SyntaxError: Unexpected token export error when attempting to build.
I think it's an issue with #atlaskit/editor-core not being properly preprocessed for ES6 (via webpack or babel, etc), but I'm not sure. Any ideas?
//Home.tsx
import * as React from 'react';
import * as classnames from 'classnames';
import * as css from './Home.css';
import { Editor } from '#atlaskit/editor-core';
export const Home: React.FunctionComponent = props => (
<div className={classnames('test', css.home)}>
<Editor />
</div>
);
I've created a repo to replicate the issue here: https://github.com/brandontle/nextjs-with-atlaskit
The file that uses AtlasKit Editor is ~/src/components/Home.tsx.
I've built a fairly simple React app based on create-react-app which uses the Material-UI for its interface components. It also depends on one of my own packages which also uses Material-UI (same version) for a couple of shared components.
Things were looking good locally until I ran a production build and deployed it. Some of the styles were behaving oddly, for example the Material-UI grid was much narrower than when running locally.
I did some reading and found a few instances of people discussing colliding class names under my scenario. This took me to some official Material-UI documentation which provides the following example code to use a custom class name prefix:
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName } from '#material-ui/core/styles';
const generateClassName = createGenerateClassName({
dangerouslyUseGlobalCSS: true,
productionPrefix: 'c',
});
function App() {
return (
<JssProvider generateClassName={generateClassName}>
...
</JssProvider>
);
}
export default App;
Before applying this fix when inspecting my production app's source code I could see the outermost DIV using the CSS class jss2 jss24.
After applying this fix my production app actually visually renders the same layout as my development version and so would appear to be fixed. However, examining the source shows the outermost DIV to have the class MuiGrid-container-2 MuiGrid-spacing-xs-8-24 which suggests to me something isn't right. I could leave it like this but it does mean I'm running with unoptimised code.
Am I doing something wrong here? Or is there an alternative resolution? I'm using current latest version of #material-ui/core (3.3.2) and the full contents of my App.js are:
import React, { Component } from 'react';
import { Provider } from "react-redux";
import { OidcProvider } from 'redux-oidc';
import JssProvider from 'react-jss/lib/JssProvider';
import Routes from './routes';
import store from './store';
import userManager from './utils/userManager';
import {
CustomUiTheme as Theme,
CustomUiLayout as Layout,
CustomUiSnackbar as Snackbar,
CustomUiModalAlert as Alert
} from 'custom-ui';
import Loading from './components/loading';
import { createGenerateClassName } from '#material-ui/core/styles';
const generateClassName = createGenerateClassName({
dangerouslyUseGlobalCSS: true,
productionPrefix: 'tw',
});
class App extends Component {
render() {
return (
<JssProvider generateClassName={generateClassName}>
<Provider store={store}>
<OidcProvider store={store} userManager={userManager}>
<Theme>
<Loading />
<Layout variant="xmas">
<Alert />
<Routes />
<Snackbar />
</Layout>
</Theme>
</OidcProvider>
</Provider>
</JssProvider>
);
}
}
export default App;
I have a complex analytics html page, I have converted most of the elements into react components, most of my elements are organized into two sections top / bottom.
My setup is working, yet, I'm wondering if this is legal / correct way of setting things up?
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import TopSection from './components/app';
import BottomSection from './components/app_content';
import reducers from './reducers';
const createStoreWithMiddleware = applyMiddleware()(createStore);
// Top Section
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<TopSection />
</Provider>
, document.querySelector('.top-section'));
// Bottom Section
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BottomSection />
</Provider>
, document.querySelector('.bottom-section'));
You can have multiple store if it is really needed. But it is strongly recommoneded to NOT go with multiple store setups. Single store is always best choice because,
it's reliable
it's fast
debugging is easy
Here are the links, why multiple store setup is not recommended.
redux.js.org
stackoverflow.com