CODEWITHSUNDEEP
reactjs
Hiral
Hiral

Reputation: 77

How to fix 'library is not defined' error in my react app

In my react app I am getting 'library' is not defined no-undef' error. I am trying to add font awesome in my app. I have write some code for this:

Error:

Failed to compile

./src/sections/header/header.js

Line 11: 'library' is not defined no-undef

Search for the keywords to learn more about each error.

header.js code

 import React, { Component } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import {
   faGoogle,
   faFacebook,
   faTwitter,
   fainstagram
 } from '@fortawesome/free-brands-svg-icons';

 library.add(
   faGoogle,
   faFacebook,
   faTwitter,
   fainstagram
 );
 class Header extends Component {
   render() {
    return (

   <div className="social-icons">
     <ul>
        <li><a href="javascript:void(0)" className="facebook"><FontAwesomeIcon icon="fafacebook" /></a></li>
        <li><a href="javascript:void(0)" className="twitter"><FontAwesomeIcon icon="fatwitter" /></a></li>
       <li><a href="javascript:void(0)" className="instagram"><FontAwesomeIcon icon="fainstagram" /></a></li>
      </ul>
    </div>
   )
  }
 }

App.js Code

 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 import bootstrap from 'reactstrap';

 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fab } from '@fortawesome/free-brands-svg-icons' 
 library.add(fab);

Upvotes: 2

Views: 2512

Answers (1)

Abdulla Thanseeh
Abdulla Thanseeh

Reputation: 10526

You could add library import since import is not globally accessible to other component 

import React, { Component } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faGoogle,
   faFacebook,
   faTwitter,
   fainstagram
 } from '@fortawesome/free-brands-svg-icons';

 library.add(
   faGoogle,
   faFacebook,
   faTwitter,
   fainstagram
 );
 class Header extends Component {
   render() {
    return (

   <div className="social-icons">
     <ul>
        <li><a href="javascript:void(0)" className="facebook"><FontAwesomeIcon icon="fafacebook" /></a></li>
        <li><a href="javascript:void(0)" className="twitter"><FontAwesomeIcon icon="fatwitter" /></a></li>
       <li><a href="javascript:void(0)" className="instagram"><FontAwesomeIcon icon="fainstagram" /></a></li>
      </ul>
    </div>
   )
  }
 }

Upvotes: 1

Related Questions