Bug: can't import an icon from a kit about font-awesome HOT 11 CLOSED

Hello! I have a smiliar issue!

Just created my first kit, installed it via NPM and wanted to import it so my Angular project:

import { all } from '@awesome.me/kit-{my_kit_id}/icons' and then I get this error both in my IDE and during the build:

TS2307: Cannot find module @awesome.me/kit-{my_kit_id}/icons or its corresponding type declarations.

This is what the package.json of the NPM module looks like:

{
  "description": "Kit {my_kit_id}",
  "keywords": [],
  "engines": {
    "node": ">=16"
  },
  "dependencies": {
    "@fortawesome/fontawesome-common-types": "^6.5.1"
  },
  "version": "1.0.13",
  "name": "@awesome.me/kit-{my_kit_id}",
  "main": "index.js",
  "types": "./index.d.ts",
  "license": "UNLICENSED",
  "private": true,
  "publishConfig": {
    "access": "public"
  },
  "sideEffects": false,
  "exports": {
    ".": {
      "types": "./index.d.ts",
      "import": "./index.mjs",
      "require": "./index.js",
      "default": "./index.js"
    },
    "./icons": {
      "types": "./icons/modules/index.d.ts",
      "import": "./icons/modules/index.mjs",
      "require": "./icons/modules/index.js",
      "default": "./icons/modules/index.js"
    },
    
    "./icons/classic/light": {
      "types": "./icons/modules/classic/light.d.ts",
      "import": "./icons/modules/classic/light.mjs",
      "require": "./icons/modules/classic/light.js",
      "default": "./icons/modules/classic/light.js"
    },
    
    "./icons/classic/solid": {
      "types": "./icons/modules/classic/solid.d.ts",
      "import": "./icons/modules/classic/solid.mjs",
      "require": "./icons/modules/classic/solid.js",
      "default": "./icons/modules/classic/solid.js"
    },
    
    
    "./icons/css/*.css": {
      "default": "./icons/css/*.css"
    },
    "./icons/less/*.less": {
      "default": "./icons/less/*.less"
    },
    "./icons/scss/*.scss": {
      "default": "./icons/scss/*.scss"
    },
    "./icons/webfonts/*.woff2": {
      "default": "./icons/webfonts/*.woff2"
    },
    "./icons/webfonts/*.ttf": {
      "default": "./icons/webfonts/*.ttf"
    },
    "./package.json": "./package.json"
  }
}

from font-awesome.

@bchoubert I'll close it. If something else pops back up we can always reopen. I have a feeling this is not the last packaging + Typescript issue we'll run across.

from font-awesome.

Hello everyone! Can anyone supporte here? This is kind of a blocking problem for my project right now and I appreciaty any help :) @tagliala @robmadole

from font-awesome.

On my side, I consider it solved too!
I needed, for my NextJS Project, to set module=esnext and modulerResolution=Node16.

Thanks a lot @robmadole ! Should I mark this as solved?

from font-awesome.

👋 Hi all. So we are getting some other reports of this and the issue is Typescript moduleResolution. This needs to be set to node16 to support the newer exports feature of package.json.

Give this a try and see if it "resolves" the problem. (Pun intended.)

from font-awesome.

@robmadole Thanks for your support here! Setting the value to node16 fixes the import error. But as I'm working with Angular 17 this setting causes other problems. For example this error:

TS1479: The current file is a CommonJS module whose imports will produce require calls; however, the referenced file is an ECMAScript module and cannot be imported with require. Consider writing a dynamic import(@angular/core)' call instead.

from font-awesome.

@devoto13 have you ran into problems with Angular 17 and packages that use the newish "exports" feature of package.json? Off the top of your head am I missing something here?

from font-awesome.

Haven't tested, but I don't think moduleResolution=node16 is a good choice for Angular as it is bundled and I am not sure node16 would work correctly in this scenario. Perhaps one should use moduleResolution=bundler as suggested in angular/angular#46181 (comment)?

from font-awesome.

@devoto13 good to know! Thank you. @hagealex can you try bundler?

from font-awesome.

@robmadole Using bundler seems to work. No issues so far! Will make a further test tomorrow but for the moment it looks like it's solved. Thank you so much!

from font-awesome.

Awesome. Let us know if you find something else.

from font-awesome.