ERROR
Attempted import error: 'faTwitter' is not exported from '#fortawesome/free-solid-svg-icons'.
I'm using font awesome icons in react js there are few icons is working like:-
faPhoneAlt, faHeart, faBars, faChevronDown
but social media icons are not working.
Code
import React, {Component} from 'react';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import {faMapMarkerAlt, faPhoneAlt, faShoppingBag, faHeart, faBars, faChevronDown, faTwitter} from '#fortawesome/free-solid-svg-icons';
<FontAwesomeIcon icon={faTwitter} /></Link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
For that, you need to install free-brands-svg-icons
https://www.npmjs.com/package/#fortawesome/free-brands-svg-icons
In the doc it's clearly mentioned that for brands aka social media, you must to use another package.
https://fontawesome.com/how-to-use/on-the-web/using-with/react
Related
I have just started learning ReactJS and made my first app by following a tutorial but nothing is rendered on the screen when I run the html file.
index.js
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"));
index.html
<html>
<body>
<div id="root">
</div>
</body>
<script type="text/babel" src="index.js"></script>
</html>
Here I think you need to write your code in the form of function which would be called from the HTML file.
So you need to update your index.js to:
import React from "react"
import ReactDOM from "react-dom"
window.printHello = function(id){
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(id)
);
}
And your html file should be updated to the below code:
<div id="hello"></div>
<script src="index.js"></script>
<script>
printHello('hello');
</script>
Here is another solution for your query.
There is no need to add the script tag in your HTML.
If the js and HTML are part of the same component you can just use the id directly in the HTML.
So your updated code for js and HTML would be be somewhat like this.
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"));
And the HTML code:
<html>
<body>
<div id="root">
</div>
</body>
</html>
I hope this would be helpful to you.
For me the issue was ReactDOM getting imported from different module. After updating the import statement from
import ReactDOM from "react";
to
import ReactDOM from 'react-dom/client';
in index.js file worked.
I am new in ReactJS
I have created a child component called footer and also installed Bootstrap package but not receiving any style in footer.
Code App.js --
import React, { Component }from 'react';
import './App.css';
import Header from './components/header';
import Footer from './components/footer';
class App extends Component {
render() {
return (
<div>
<Header />
<Footer />
</div>
);
}
}
export default App;
Footer.js under components folder
import React from 'react';
const Footer = () => {
return (
<footer className="page-footer font-small blue">
<div className="footer-copyright text-center py-3">© 2019 Copyright:
Test.com
</div>
</footer>
);
};
export default Footer;
index.js --
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.register();
But there is no styling in footer.
Any help is highly appreciated.
Well, the problem is that you don't import bootstrap properly, do you have import errors in your console ?
import 'bootstrap/dist/css/bootstrap.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
try to import by one of i written above.
In your app.css import bootstrap.css like this
import 'bootstrap/dist/css/bootstrap.css';
Then restart your server
That simply means you did not correctly import bootstrap, i dont know how your code is structured so i would suggest you use the cdn version below and link it in your index.html file.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
this means you have to online everytime you use it.
Another option i would suggest is that you use reactstrap which would be easier for you as a beginner. install by using npm install --save reactstrap and then you can use it any component you want. you google the documentation for more details.
Link to my site:
https://inspiring-curran-a31177.netlify.com/
It's using Gridsome, the static site generator for Vue.
When you go down to mobile and click on the Bootstrap Hamburger menu, it won't open.
I've followed the instructions in Gridsome's docs by installing BootstrapVue: https://gridsome.org/docs/assets-css/
There are no Javascript errors in the console.
Code from /src/main.js:
// This is the main.js file. Import global CSS and scripts here.
// The Client API can be used here. Learn more: gridsome.org/docs/client-
api
// Import nav
import DefaultLayout from '~/layouts/Nav.vue'
// Import footer
import Footer from '~/layouts/Footer.vue'
// Import Bootstrap
import BootstrapVue from 'bootstrap-vue'
// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.min.css'
// Import Bootstrap JS
import 'bootstrap-vue/dist/bootstrap-vue.min.js'
export default function (Vue, { router, head, isClient }) {
// Set default layout as a global component
Vue.component('Layout', DefaultLayout),
// Footer
Vue.component('Footer', Footer)
// Import bootstrap
Vue.use(BootstrapVue),
// Add google fonts
head.link.push({
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro'
})
}
Welcome to SO!
Let's say you're using Bootstrap npm module.
npm i -s bootstrap
in your Main.js file
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
For Hamburger please find the codesandbox, where bootstrap menu is used
Hope this helps!
Found the solution!
I had to use the navbar directly from BootstrapVue as a component, which is here - https://bootstrap-vue.js.org/docs/components/navbar. Instead of using a standard bootstrap navbar, right from the main bootstrap site.
Did you install all the scripts in the HTML ?
<script src="//unpkg.com/#babel/polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
I've installed Vue.js framework called element but I'm getting this error.
I'm importing all I need to index.html and Reviews.vue file which only contains:
<template>
<div id="app">
<el-button type="primary" round>Primary</el-button>
</div>
</template>
<script>
import Vue from 'vue'
import ColorPicker from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
export default {}
</script>
<style lang="scss">
</style>
All I'm getting as a result is text "Primary"
this 'quick start' snippet from the element github page will put you in the right direction:
import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)
// or
import {
Select,
Button
// ...
} from 'element-ui'
Vue.component(Select.name, Select)
Vue.component(Button.name, Button)
Basically, you either load all the elements with the Vue.use syntax (which I believe will load all of them into your bundle, so you maybe don't want to do so if you're not using a lot of element components in your app), or you load element's Button component in your component:
<template>
<div id="app">
<el-button type="primary" round>Primary</el-button>
</div>
</template>
<script>
import Vue from 'vue'
import ColorPicker from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// mind this new line:
import {Button} from 'element-ui'
export default {}
</script>
<style lang="scss">
</style>
I am trying to import CSS for each page of my react app but the order of the css import is wrong.
In index.js I load all common css for the site (bootstrap and custom), then go page 'A' that react router handles which also loads its own CSS file. What results is the CSS from page A being loaded before the CSS imports I had in index.js
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './routes';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './common.css';
ReactDOM.render(
<Routes />,
document.getElementById('root')
);
.
//home.js
import React, { Component } from 'react';
import './home.css';
class Home extends Component {
render() {
return ( ... )
}
}
results in:
<style home.css />
<style bootstrap.css />
<style common.css />
How would I be able to make the CSS from child components load after the parent?