Package has been ignored because it contains invalid configuration

[droplessjake]

I'm seeing this error a lot recently across my project. I can't say for sure when it occurred but seems to have been with some recent package updates.

Error is below

warn Package @fortawesome/pro-light-svg-icons has been ignored because it contains invalid configuration. Reason: Cannot find module '/Users/runner/work/1/s/node_modules/@fortawesome/pro-light-svg-icons/package.json.js'
warn Package @fortawesome/pro-regular-svg-icons has been ignored because it contains invalid configuration. Reason: Cannot find module '/Users/runner/work/1/s/node_modules/@fortawesome/pro-regular-svg-icons/package.json.js'
warn Package @fortawesome/pro-solid-svg-icons has been ignored because it contains invalid configuration. Reason: Cannot find module '/Users/runner/work/1/s/node_modules/@fortawesome/pro-solid-svg-icons/package.json.js'

It seems to be hanging a lot of build commands and gets thrown during a lot of react native and yarn commands.

[tagliala]

@robmadole could you please take a look?

[robmadole]

@droplessjake can you tell me what tool you are using?

[droplessjake]

@robmadole We're using fontawesome in react native, latest versions of all libraries and a pro license. This error only seems to have appeared recently, possibly when we updated react native to 16.x.

[harryt04]

I am seeing the same issue with react native. I only installed this package for the first time today though, following this guide. We are pro subscribers who successfully use icons on our angular web app. It seems we can still use icons despite the warning. Just thought I'd add my two cents here since this is a new issue and I couldn't get the warning to go away despite the fact that it seems to be working.

warn Package @fortawesome/free-solid-svg-icons has been ignored because it contains invalid configuration. Reason: Cannot find module '/Users/i24740/Documents/git/mobile/node_modules/@fortawesome/free-solid-svg-icons/package.json.js'
warn Package @fortawesome/pro-light-svg-icons has been ignored because it contains invalid configuration. Reason: Cannot find module '/Users/i24740/Documents/git/mobile/node_modules/@fortawesome/pro-light-svg-icons/package.json.js'
warn Package @fortawesome/pro-regular-svg-icons has been ignored because it contains invalid configuration. Reason: Cannot find module '/Users/i24740/Documents/git/mobile/node_modules/@fortawesome/pro-regular-svg-icons/package.json.js'
warn Package @fortawesome/pro-solid-svg-icons has been ignored because it contains invalid configuration. Reason: Cannot find module '/Users/i24740/Documents/git/mobile/node_modules/@fortawesome/pro-solid-svg-icons/package.json.js'

We have a .yarnrc.yml file that looks like the following:

nmHoistingLimits: workspaces

nodeLinker: node-modules
enableStrictSsl: false

npmScopes:
  fortawesome:
    npmAlwaysAuth: true
    npmAuthToken: <NPM-TOKEN>
    npmRegistryServer: "https://npm.fontawesome.com/"

[droplessjake]

@robmadole @harryt04 Looks like exactly the same issue, whats interesting to me is its looking for package.json.js files, when it should surely be looking for just the package.json files that do exist.

[droplessjordan]

The solution is in this thread. Downgrade from v6, it doesn't work in production mode causing the build to hang. If you need v6 icons you can use Tree-Shaking https://fontawesome.com/docs/apis/javascript/tree-shaking

[harryt04]

I downgraded to @^5 for all the pro icons packages because I didn't want to do deep imports. The warnings went away.

[swelly-ian]

Yep only occurs in v6

[DrOverbuild]

react-native-font v0.3.0 was released, with full support for FontAwesome 6. However, the warnings are still showing up.

The warning seems to be related to react-native-community/cli#1168. I think a simple fix would be to add "./package.json": "./package.json" to the exports property in the package.json off every icon npm package, as shown:

  "exports": {
    //...
    "./package.json": "./package.json", // <----
    "./*": "./*.js"
  }

[likon416]

I still have this error. Can't build v6 using expo for android.

[likon416]

Task :app:bundleReleaseJsAndAssets
[stderr]
warn Package @fortawesome/free-brands-svg-icons has been ignored because it contains invalid configuration. Reason: Cannot find module '/home/expo/workingdir/build/node_modules/@fortawesome/free-brands-svg-icons/package.json.js'
[stderr]
warn Package @fortawesome/free-regular-svg-icons has been ignored because it contains invalid configuration. Reason: Cannot find module '/home/expo/workingdir/build/node_modules/@fortawesome/free-regular-svg-icons/package.json.js'
[stderr]
warn Package @fortawesome/free-solid-svg-icons has been ignored because it contains invalid configuration. Reason: Cannot find module '/home/expo/workingdir/build/node_modules/@fortawesome/free-solid-svg-icons/package.json.js'
[stderr]
warn Package @fortawesome/pro-light-svg-icons has been ignored because it contains invalid configuration. Reason: Cannot find module '/home/expo/workingdir/build/node_modules/@fortawesome/pro-light-svg-icons/package.json.js'
[stderr]
warn Package @fortawesome/pro-regular-svg-icons has been ignored because it contains invalid configuration. Reason: Cannot find module '/home/expo/workingdir/build/node_modules/@fortawesome/pro-regular-svg-icons/package.json.js'
[stderr]
warn Package @fortawesome/pro-solid-svg-icons has been ignored because it contains invalid configuration. Reason: Cannot find module '/home/expo/workingdir/build/node_modules/@fortawesome/pro-solid-svg-icons/package.json.js'
warning: the transform cache was reset.

have react-native-fontawesome 0.3.0 added exports to package.json and nothing works. only for android eas build, iOS build is fine.

[kylesziv]

Same here

[likon416]

@robmadole any tips?

[likon416]

Anyone?

[robmadole]

We've got a fix for this that will be released in 6.1.2. No firm ETA on that yet but our aim is in the next 2 - 3 weeks.

[likon416]

Great news. Would really appreciate fast release. Thanks

[irmakcosarsahna]

Same issue

[mimitch2]

Same issue

[mimitch2]

react-native-font v0.3.0 was released, with full support for FontAwesome 6. However, the warnings are still showing up.

The warning seems to be related to react-native-community/cli#1168. I think a simple fix would be to add "./package.json": "./package.json" to the exports property in the package.json off every icon npm package, as shown:

  "exports": {
    //...
    "./package.json": "./package.json", // <----
    "./*": "./*.js"
  }

This worked for me as a temp fix until a real fix is availalble.

[likon416]

@mimitch2 yeah tried that but it doesn't work for me...

[likon416]

@robmadole how it's going with the fix? any release soon? it really blocks my android build

[robmadole]

The fix is done, we just haven't released it yet. I'm hoping to get to the 6.1.2 release next week.

[loursbourg]

For some reason, this happens only on macOS. It works fine on Windows.

[loursbourg]

@likon416
For now, downgrade to the following versions as a workaround until the proper fix gets merged. (may vary depending on whether you have the pro/free version)

"@fortawesome/fontawesome-svg-core": "1.2.36",
"@fortawesome/free-brands-svg-icons": "5.15.4",
"@fortawesome/free-regular-svg-icons": "5.15.4",
"@fortawesome/free-solid-svg-icons": "5.15.4",
"@fortawesome/react-native-fontawesome": "0.2.7",

[likon416]

@loursbourg I don't want to do it as the naming of icons is different in v5. Would need to change them all.

[mimitch2]

@mimitch2 yeah tried that but it doesn't work for me...

To be clear, this is only working for me in dev/local mode, and each time I run yarn install, I need to add this line back in. I'm not at the point where I am building it for real, in which case I'm sure this would not work.

[harbolaez]

Any eta, when could the fix go out live @robmadole ? Thanks!

[likon416]

I'm waiting for this as well as it blocks my Android release. If everything is ready why you guys will just not release it? come on :)

[likon416]

After the update, my build pass the point when it was hanging, but still, all takes more than 45 min to build and expo is cancelling the build as it exceeds the time limit. Normally the build is 15 min, so I think there is still some problem. Do others have the same? Can you guys now do build for android using expo eas build?

[Arjan-Zuidema]

@likon416 Are you using explicit imports? That could also be the problem of your slow build when not used correctly.

[likon416]

@Arjan-Zuidema no, I'm using normal strings

[DrOverbuild]

Yeah @likon416 from my testing it seems these warnings are unrelated to the long release build times, which are actually related to the bundler's tree shaking process.

Since you are using normal strings, I'd check where you're building your library, and make sure that the imports are deep imports there.

[likon416]

@DrOverbuild thanks I will try that. I'm building using expo and it's not showing what is the error or on what it has stuck.

[robmadole]

All, we've released 6.1.2 which includes a fix for this. Please let me know after you upgrade if that fixes things up.

[DrOverbuild]

Hi @robmadole, the warnings are resolved, at least in our project. Thank you for getting the release out and letting us know about the fix!

[mimitch2]

Working great for me.

[likon416]

@robmadole the projects are past the point where it hung before although the build is super long, I don't really know if that's fonts problem or not yet.

[robmadole]

@likon416 can you take a look and make sure you are importing icons like we describe here. We call them "deep imports"?

https://fontawesome.com/v6/docs/web/use-with/react-native#same-icon-different-styles

[likon416]

@robmadole thanks for getting back to me. I'm not importing it icon by icon, I think it's not dynamic and specifying every single icon is a bit too much.
I'm doing general library.add(far, fas);

But I can try to specify single icons I'm using and try it that will help, but in the end that shouldn't be a solution.
I will try that and let you know.
Hard to read from android build logs what causes the build to go from 15m to over 45m.

[ccorneliusHsv]

@robmadole I believe I am importing all icons with deep imports..but I am getting some crazy long build times on Github Actions builds with updating to the latest. Over an hour for Android and over 3 hours for iOS. All of my imports are below as well as the packages I am using. Am I missing something??

"@fortawesome/fontawesome-svg-core": "^6.1.2",
"@fortawesome/free-brands-svg-icons": "^6.1.2",
"@fortawesome/pro-light-svg-icons": "^6.1.2",
"@fortawesome/pro-regular-svg-icons": "^6.1.2",
"@fortawesome/pro-solid-svg-icons": "^6.1.2",
"@fortawesome/react-native-fontawesome": "^0.3.0",

import { FontAwesomeIcon, FontAwesomeIconStyle } from "@fortawesome/react-native-fontawesome";
import { IconPrefix, IconProp, Transform } from "@fortawesome/fontawesome-svg-core";
import { IconName } from "@fortawesome/free-brands-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faStar } from "@fortawesome/pro-regular-svg-icons/faStar";
import { faSquareCheck } from "@fortawesome/pro-regular-svg-icons/faSquareCheck";
import { faBookmark } from "@fortawesome/pro-regular-svg-icons/faBookmark";
import { faBookmark as faBookMarkSolid } from "@fortawesome/pro-solid-svg-icons/faBookmark";
import { faCheck } from "@fortawesome/pro-regular-svg-icons/faCheck";
import { faCheck as faCheckSolid } from "@fortawesome/pro-solid-svg-icons/faCheck";
import { faCheck as faCheckLight } from "@fortawesome/pro-light-svg-icons/faCheck";
import { faCircleUser } from "@fortawesome/pro-regular-svg-icons/faCircleUser";
import { faEllipsisV } from "@fortawesome/pro-regular-svg-icons/faEllipsisV";
import { faShareAlt as faShareAltSolid } from "@fortawesome/pro-solid-svg-icons/faShareAlt";
import { faCircleExclamation } from "@fortawesome/pro-regular-svg-icons/faCircleExclamation";
import { faCircleExclamation as faCircleExclamationSolid } from "@fortawesome/pro-solid-svg-icons/faCircleExclamation";
import { faTimes } from "@fortawesome/pro-regular-svg-icons/faTimes";
import { faSquare } from "@fortawesome/pro-regular-svg-icons/faSquare";
import { faChevronCircleDown as faChevronCircleDownSolid } from "@fortawesome/pro-solid-svg-icons/faChevronCircleDown";
import { faExchange } from "@fortawesome/pro-regular-svg-icons/faExchange";
import { faAngleDown } from "@fortawesome/pro-regular-svg-icons/faAngleDown";
import { faChevronRight } from "@fortawesome/pro-regular-svg-icons/faChevronRight";
import { faChevronRight as faChevronRightLight } from "@fortawesome/pro-light-svg-icons/faChevronRight";
import { faChevronDown as faChevronDownSolid } from "@fortawesome/pro-solid-svg-icons/faChevronDown";
import { faChevronLeft } from "@fortawesome/pro-regular-svg-icons/faChevronLeft";
import { faSlidersH } from "@fortawesome/pro-regular-svg-icons/faSlidersH";
import { faInfoCircle } from "@fortawesome/pro-regular-svg-icons/faInfoCircle";
import { faInfoCircle as faInfoCircleLight } from "@fortawesome/pro-light-svg-icons/faInfoCircle";
import { faBars as faBarsLight } from "@fortawesome/pro-light-svg-icons/faBars";
import { faSearch } from "@fortawesome/pro-regular-svg-icons/faSearch";
import { faCircleCheck as faCircleCheckLight } from "@fortawesome/pro-light-svg-icons/faCircleCheck";
import { faCircleCheck as faCircleCheckSolid } from "@fortawesome/pro-solid-svg-icons/faCircleCheck";
import { faTimesCircle as faTimesCircleLight } from "@fortawesome/pro-light-svg-icons/faTimesCircle";
import { faTimesCircle as faTimesCircleSolid } from "@fortawesome/pro-solid-svg-icons/faTimesCircle";
import { faArrowUp } from "@fortawesome/pro-regular-svg-icons/faArrowUp";
import { faArrowLeft } from "@fortawesome/pro-regular-svg-icons/faArrowLeft";
import { faTags } from "@fortawesome/pro-regular-svg-icons/faTags";
import { faEyeSlash as faEyeSlashSolid } from "@fortawesome/pro-solid-svg-icons/faEyeSlash";
import { faEye as faEyeSolid } from "@fortawesome/pro-solid-svg-icons/faEye";
import { faList as faListSolid } from "@fortawesome/pro-solid-svg-icons/faList";
import { faEnvelope } from "@fortawesome/pro-regular-svg-icons/faEnvelope";
import { faEnvelope as faEnvelopeSolid } from "@fortawesome/pro-solid-svg-icons/faEnvelope";
import { faMobileAlt as faMobileAltSolid } from "@fortawesome/pro-solid-svg-icons/faMobileAlt";
import { faPlusSquare as faPlusSquareSolid } from "@fortawesome/pro-solid-svg-icons/faPlusSquare";

[robmadole]

@ccorneliusHsv it might be this:

import { IconName } from "@fortawesome/free-brands-svg-icons";

Try this instead:

import { IconName } from "@fortawesome/fontawesome-svg-core";

[ccorneliusHsv]

@robmadole That did not fix the issue. Should I start a new issue to capture this? Any other ideas?

[robmadole]

@ccorneliusHsv yes, please, let's start a new issue at https://github.com/FortAwesome/react-native-fontawesome. I think we'll have to have a good reproducible test case to continue. I know that can be challenging for a mobile app. Is this something you can help us create?

[ccorneliusHsv]

@robmadole I have submitted a new issue #19272. Will do what I can to create a reproducible test case..it will be a lower priority as updating this package is not on the critical path. Will update the new issue with info when available. Thanks!