I'm trying to get Icons working with Gatsby but it they don't seem to be showing in the production build.
I am importing the icons like this
import {
initializeIcons
} from "office-ui-fabric-react"
and calling the function like this
initializeIcons()
which is all in my index.js page file. This works fine when running gatsby develop however when i run gatsby build && gatsby serve the icons show up like this.
However, when I look inside Chrome dev tools, i can see the icon fonts being downloaded.
so i am assuming it is something to do with the static render of gatsby. I started with this template https://github.com/microsoft/gatsby-starter-uifabric
Any help is appreciated.
I had the same issue. After trying a bunch of work-arounds, I ended up using office-ui-fabric-core instead.
Install the library:
npm i office-ui-fabric-core
Import the ui-fabric-core css
import "office-ui-fabric-core/dist/css/fabric.css";
example icon component:
import React from "react";
const MyIcon = ({iconName}) => <i className={`ms-Icon ms-Icon--${iconName}`} aria-hidden="true"></i>
export default MyIcon;
Example usage:
<MyIcon iconName="People" />
The answer was to use the initializeIcons(undefined, { disableWarnings: true }) method outside of the App class code, just above it will do fine.
To quote the wiki article on the use of this method
If your code is running in an environment where icons may have already been registered, you may need to disable the warnings. (By default, registering the same icon twice will ignore subsequent registrations.) To initialize icons and avoid duplication warnings, pass options into initializeIcons:
https://github.com/microsoft/fluentui/wiki/using-icons
Related
I'm trying to create the most basic react app using antd but it renders a blank page. I used a venv, ran npx create-react-app . and replaced the default App.js file contents with the below example from the antd website. Can someone please advise?
App.js:
import React from 'react';
import { Button } from 'antd';
import 'antd/dist/reset.css';
import './App.css';
const App = () => (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
export default App;
Terminal output:
Compiled successfully!
You can now view antd-examples in the browser.
Local: http://localhost:3000
On Your Network: http://10.5.0.2:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
I was expecting to see a button show up with the above code given there were no errors or warnings but just saw a blank screen instead. Note that when I use the starter code generated from running npx create-react-app . the page renders fine and I see the slowly rotating react symbol.
Edit:
There is some messages in the console log. You can see it here in pastebin.
The package.json file contents are here on pastebin.
The problem in this case is that the antd dependency is missing in the package.json. After installing it with yarn add antd the code works like expected.
I'm building a react component library (using typescript and styled-components) and I want to reuse as much as possible code between the two targets (web and native).
I have a folder called styled, and inside that folder, I have two index files: index.ts and index.native.ts.
Inside the index.ts I have: export { default as styled } from 'styled-components'; while in the index.native.ts I have export { default as styled } from 'styled-components/native';
I know react-native uses index.native.ts instead index.ts during the build process when it is available but I really need to make the IDE (vscode) to understand that, I mean, when I'm building a Button.native.ts the statement: import { styled } from '../styled' should import from the .native barrel and the ctrl + click should let us to the .native file.
I don't know if there is a configuration to change the default import file used as a barrel, I already tried to search in the typescript documentation for some react-native preset but I didn't find anything.
It is not related to TypeScript, it is an open issue on VSCode GitHub page. Still doesn't have any solution.
Even I didn't find solution on react native vscode plugin.
By my understanding you are working on RNW, so it is not a correct expectation that VSCode understand by Ctrl+CLICK your meaning is Web or Native side.When it works in development and production so forget about opening right code by click.
I had a certain bug that I was unsure how to debug. The bug is that styling that I use for a create-react-app (Typescript) app through material-ui and regular CSS, shows up just fine in development but it shows differently for certain CSS properties when I deploy the app online (I've only tried Heroku and Vercel). The app doesn't show any errors or warnings in the console when I'm developing. I have no idea why it's happening and I've tried the following so far
Read through my code many times being extra careful at every step.
Open the website (development and production) in incognito mode on Chrome 85.0.4183.83 (Linux, 64 bit)
Look through the documentation for material-ui (material-ui.com) and the React docs for any lead on this
Search google for prior such issues
So far, nothing has turned up. Could someone please guide me in the right direction?
The build pack I use on Heroku after deployment is the well known one by mars and available at https://buildpack-registry.s3.amazonaws.com/buildpacks/mars/create-react-app.tgz .
For convenience, I have included my package.json here on pastebin.
Thank you so much for helping out.
============= EDIT =============
I've been experimenting with the code and it seems like the problem lies with how material-ui is compiled during build time. The problems which don't show up in development, show up in production.
For example, the biggest thing I noticed is if you mix custom style prop flags given by the material-ui components and add your own styling with className or style, during build time these latter styles are overridden partially if not completely.
So if I do
import React,
{ useRef } from "react";
import {
Button,
makeStyle,
Theme
} from "#material-ui/core";
/*
Start of functional component using memo
.
.
.
*/
const useClasses = useRef(makeStyle((theme : Theme) => { return {
buttonStyles:
{
backgroundColor: theme.palette.text.hint
}
}}));
const styles = useClasses.current();
<Button
color={"secondary"}
className={styles.buttonStyles}>
button text
</Button>
/*
.
.
.
*/
in development, the button will have the backgroundColor I give it in makeStyles, but in production that property will switch to secondary as given in the color prop which defaults to the value theme.palette.secondary.main.
And sometimes, just even using a component from material-ui without any extra config causes a problem.
I am also using code splitting with lazy and Suspense if that matters.
StackMatch can you please link your github/gitlab repo? I think I might know what the problem is but can't be certain without seeing how your dev environment is configured.
I am new to react and I have just installed the React Dev Tools extension in google chrome.
I realized that the React tab in the inspect bar was replaced by Components and Profiler tabs.
But for some reason, The rendered tree is not complete in the components tab
take a look at the following pictures
This is what my app looks like in the Components tab
This is what I am expecting it to look like
And I don't know why it is showing Anonymous key = 'something' ForwardRef... Instread of showing a component over there
[![enter image description here][3]][3]
As mentioned I have installed the styled-components plugin
[3]: https://i.stack.imgur.com/j2vnd.png
Make sure you are following these:
if you are using default export of components, there is no name for the component for dev tools to use.
try:
const HelloWorld = () => {
return <h1>Hello</h1>;
};
export default HelloWorld; // Now tool has a name to work on.
For HoC, you can use 'displayName' property:
More useful ref: https://reactjs.org/docs/forwarding-refs.html#displaying-a-custom-name-in-devtools
React dev tools allows you to see the components that are in 'DEV' mode and not running production build.
Update after checking code:
You are using higher order components and as I mentioned earlier/above HoC needs explicit displayName
const PersonWithRadium = Radium(Person);
PersonWithRadium.displayName = "PersonWithRadium";
export default PersonWithRadium;
It seems you are really using Styled Components.
That shows to React Dev tools because you are probably not installing the debugging tools.
npm install --save-dev babel-plugin-styled-components
According to the docs it will show as styled.div if you don't install this which is pretty much similar to your problem.
More info here: https://styled-components.com/docs/tooling#better-debugging
Every time I refresh the page the font-awesome icons are being displayed big. Seems like the css in being loaded before applying the proper size because right after the refresh it shows big, and then goes to the right size.
I tried some solutions I found online but none of them worked.
Right now I'm back to square one where I have these:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faFacebook } from '#fortawesome/free-brands-svg-icons'
import { faTwitter } from '#fortawesome/free-brands-svg-icons'
import { faLinkedin } from '#fortawesome/free-brands-svg-icons'
import { faEnvelope } from '#fortawesome/free-solid-svg-icons'
import { faMapMarkerAlt } from '#fortawesome/free-solid-svg-icons'
and then use them like this:
<FontAwesomeIcon icon={faFacebook} color="white" size="2x"/>
I didn't need to import any css but I did install following this link:
https://www.npmjs.com/package/#fortawesome/react-fontawesome
Basically I installed those:
$ npm i --save #fortawesome/fontawesome-svg-core
$ npm i --save #fortawesome/free-solid-svg-icons
$ npm i --save #fortawesome/react-fontawesome
If someone could give me a direction on what to look for it would be great.
My project is hosted at Github (https://github.com/palomaschkrab/keto-ui)
And you can run it with "npm run dev" and go to localhost:3000/about_us if you want to see it happening.
This is a very common bug when using Font Awesome icons with static site generators that use server side rendering, like Gatsby.js and Next.js.
The cause is the fact that the icon is being rendered before the CSS is loaded.
You can fix this by loading the CSS manually in your root component, and then preventing Font Awesome from loading it again so you don't have duplicate classes.
Add the following to e.g. layout.js or index.js:
// The following import prevents a Font Awesome icon server-side rendering bug,
// where the icons flash from a very large icon down to a properly sized one:
import '#fortawesome/fontawesome-svg-core/styles.css';
// Prevent fontawesome from adding its CSS since we did it manually above:
import { config } from '#fortawesome/fontawesome-svg-core';
config.autoAddCss = false; /* eslint-disable import/first */
More info can be found in this Github issue.
I've seen this before when browsing some pages, most notably www.getbootstrap.com
Only happened with Firefox and I found that Ctrl+F5 would fix the problem. As soon as I opened another URL on the same site, that effect returned. Never found out what was causing it, as I then decided to go to Chrome.