TS2339: Property 'add' does not exist on type 'Library'

[Mukhametvaleev]

Hello! I can't manage to build a Library, webpack build fails with:

ERROR in ./Accounts/retrieve.ts(4,9)
    TS2339: Property 'add' does not exist on type 'Library'.

retrieve.ts:

import {library} from "@fortawesome/fontawesome-svg-core";
import {faCheckSquare, faCoffee} from "@fortawesome/free-solid-svg-icons";

library.add(faCheckSquare, faCoffee);

Packages installed via yarn:

"devDependencies": {
    "@types/react": "^16.7.18",
    "@types/react-fontawesome": "^1.6.4",
    "@types/reactstrap": "^6.4.4",
    "autoprefixer": "^9.4.5",
    "css-loader": "^2.1.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "style-loader": "^0.23.1",
    "ts-loader": "^5.3.2",
    "tslint": "^5.12.0",
    "tslint-react": "^3.6.0",
    "typescript": "^3.2.2",
    "webpack": "^4.28.3",
    "webpack-bundle-tracker": "^0.4.2-beta",
    "webpack-cli": "^3.2.0"
},
"dependencies": {
    "@fortawesome/fontawesome-common-types": "0.2.8-2",
    "@fortawesome/fontawesome-svg-core": "1.2.8-2",
    "@fortawesome/free-solid-svg-icons": "5.5.0-2",
    "@fortawesome/react-fontawesome": "0.1.4-1",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "reactstrap": "^7.1.0"
},

I have tried both stable and prerelease versions of @fortawesome packages.

Wepback config:

const path = require("path");
const BundleTracker = require("webpack-bundle-tracker");
const autoprefixer = require("autoprefixer");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const src = path.join(__dirname, "/app/assets");

module.exports = {
    context: src,
    devtool: "inline-source-map",
    entry: {
        accountsRetrieve: path.join(src, "./Accounts/retrieve.ts"),
    },
    module: {
        rules: [{
            exclude: /node_modules/u,
            loader: "ts-loader",
            test: /\.tsx?$/u,
        },
        {
            test: /\.(css)$/u,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [{
                    loader: "css-loader",
                    options: {
                        importLoaders: 1,
                        module: true,
                    },
                }, {
                    loader: "postcss-loader",
                    options: {
                        plugins () {
                            return [
                                autoprefixer,
                            ];
                        },
                    },
                }],
            }),
        }],
    },
    output: {
        chunkFilename: "[name].bundle.js",
        filename: "[name].bundle.js",
        path: path.resolve("./app/webpack/bundles/"),
        publicPath: "./dist/",
    },
    plugins: [
        new BundleTracker({filename: "./app/webpack/stats.json"}),
        new ExtractTextPlugin("styles.css"),
    ],
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
        plugins: [],
    },
};

[robmadole]

@Mukhametvaleev can you provide a reproduction using something like codesandbox.io? It's too difficult to debug this with just partial examples.

[wellingtonsilverio]

I have the same problem :( implement in typescript

[TiagoFuelber]

@Mukhametvaleev, did you find a solution to this problem? I am struggling with it too

[Mukhametvaleev]

@Mukhametvaleev, did you find a solution to this problem? I am struggling with it too

Unfortunately not, I'll try to reproduce this problem again

[chrismarcok]

i have this problem too, my workaround right now is to do this import { library } from "@fortawesome/fontawesome-svg-core"; const myLibrary: any = library; myLibrary.add(fab, faCheckSquare, faCoffee);

[robmadole]

(Please check that you have dependencies updated before continuing)

TS devs can we get some help? We have this defined here but it seems not to work? Again, can someone help to reproduce this? We have a test in our build system that confirms this works so it has to be a situational/configuration issue.

[TiagoFuelber]

@robmadole I'll try to make a sandbox when I have some time, maybe tomorrow.

[TiagoFuelber]

Hi @robmadole, I made a minimum repository to reproduce the problem and a codesandbox too. But it seems the error occurs only running locally, I have no idea why.

https://efbom.sse.codesandbox.io/ >>> sandbox (here it's fine) https://github.com/TiagoFuelber/font-awesome-typescript-error-sandbox >>> repo (git clone, npm i, npm start, and the errors pop in the console)

[robmadole]

Hey all, I looked over @TiagoFuelber GitHub repo example and I have no clue why this isn't working. We have the TS definitions. I can't see any problems. This one is going to be beyond us because we don't use TypeScript. If anyone can offer help and explain why it's broken we'll try and get it fixed. But at this point 🤷‍♂

[rhinon]

Hi @robmadole & @TiagoFuelber I ran into this issue and I believe I've solved it (it works in my project and it works on @TiagoFuelber 's test repo).

Make sure to have "moduleResolution": "node", in your tsconfig.json. That's it, not an issue with Fo(r/n)tAwesome.

Longer explaination (disclaimer: I'm no react expert and only just started messing around with TS): "Property 'add' does not exist on type 'Library'." is slightly misleading as the real issue is the types are not being loaded at all. As far as I can tell, without "moduleResolution": "node", in your tsconfig.json, TS by default will only look in node_modules/@types for type definitions, so any modules like @fortawesome/fontawesome-svg-core that have their types declared in the module (as opposed to a separate @types package) will not resolve as expected. I noticed this in my project because my other packages which also included their type definitions in their main package had the same issue, but all type definitions from @types/* packages were resolving fine.

Anyways, hope that helps!