fortawesome module throws error on runtime

[littlepine]

When I generated a project with pagination, or other file which contains "fortawesome" icon, it will throw following error on console:

SyntaxError: The requested module '/node_modules/@fortawesome/free-solid-svg-icons/faExclamationCircle.js?v=ff48e29e' does not provide an export named 'faExclamationCircle' (at input-control.svelte? [sm]:3:11)

And it will cause the UI render fail.

Rendered output:

Steps to reproduce:

1. Generate the frontend with pagination enabled
2. npm start
3. try to login and navigate the entities.

Testing environment:

"jhipster-svelte-library": "0.9.2",
node version : v16.18.0

[vishal423]

v0.10.0 includes a change to use ESM import for fontawesome icons. Can you try that or latest version 0.10.2 to see if that fixes the above issue?

[vishal423]

@littlepine, did you get chance to try out the latest version?

[littlepine]

@vishal423 thank you very much for your response.

Let me test it later.

[littlepine]

Oh, sorry, I just figure out the version I am using is already 0.10.2

Here I also attach my .yo-rc for reference

{
	"generator-jhipster": {
		"applicationIndex": 0,
		"applicationType": "monolith",
		"authenticationType": "oauth2",
		"baseName": "vpair",
		"blueprints": [
			{
				"name": "generator-jhipster-svelte",
				"version": "0.10.2"
			}
		],
		"buildTool": "gradle",
		"cacheProvider": "ehcache",
		"clientFramework": "svelte",
		"clientPackageManager": "npm",
		"clientTheme": "minty",
		"clientThemeVariant": "primary",
		"creationTimestamp": 1667237633479,
		"databaseType": "sql",
		"devDatabaseType": "mariadb",
		"devServerPort": 9060,
		"dtoSuffix": "DTO",
		"enableGradleEnterprise": false,
		"enableHibernateCache": true,
		"enableSwaggerCodegen": false,
		"enableTranslation": false,
		"entities": [
			"SystemSetting",
			"MultiLangString",
			"Address",
			"Member",
			"Company",
			"PropertyPost",
			"SearchedQuery",
			"Membership"
		],
		"entitySuffix": "",
		"gradleEnterpriseHost": "",
		"jhiPrefix": "vpr",
		"jhipsterVersion": "7.9.3",
		"languages": ["en"],
		"messageBroker": false,
		"nativeLanguage": "zh-tw",
		"otherModules": [
			{
				"name": "generator-jhipster-svelte",
				"version": "0.10.2"
			}
		],
		"packageFolder": "hk/com/justmove/platform/vpair",
		"packageName": "hk.com.justmove.platform.vpair",
		"pages": [],
		"prodDatabaseType": "mariadb",
		"reactive": false,
		"searchEngine": "elasticsearch",
		"serverPort": "8080",
		"serviceDiscoveryType": false,
		"skipCheckLengthOfIdentifier": false,
		"skipClient": false,
		"skipFakeData": false,
		"skipServer": true,
		"skipUserManagement": true,
		"testFrameworks": ["cypress"],
		"websocket": false,
		"withAdminUi": true
	},
	"generator-jhipster-svelte": {
		"swaggerUi": false,
		"version": "0.10.2"
	}
}

And acturally I have applied my own fix on that, which is not quite alegant through.

Here is what I did:

I installed the "svelte-fa" package to the jhipster-svelte-library project.
Then replaced all the <Icon tags to <Fa and the icon problem fixed.

And I attach part of my patch here also for your reference:

diff --git a/node_modules/jhipster-svelte-library/input-control.svelte b/node_modules/jhipster-svelte-library/input-control.svelte
index 5652ee4..7d8beff 100644
--- a/node_modules/jhipster-svelte-library/input-control.svelte
+++ b/node_modules/jhipster-svelte-library/input-control.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { afterUpdate, createEventDispatcher } from 'svelte'
+	import Fa from 'svelte-fa'
 	import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle'
 	import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes'
 
@@ -150,7 +151,7 @@
 					ref.dispatchEvent(new Event('change'))
 				}}"
 			>
-				<Icon classes="mr-2" icon="{faTimes}" />
+				<Fa classes="mr-2" icon="{faTimes}" />
 			</Button>
 		{/if}
 	{:else}
@@ -182,7 +183,7 @@
 	<slot message="{message}" dirty="{dirty}" valid="{valid}">
 		{#if dirty && !valid}
 			<div data-testid="{name}-error" class="flex items-center">
-				<Icon classes="mr-2" icon="{faExclamationCircle}" />
+				<Fa classes="mr-2" icon="{faExclamationCircle}" />
 				{message}
 			</div>
 		{:else}&nbsp;{/if}

If you don't mind, I can contribute on the fix.

Again, thank you very much for the effort on creating this blueprint and it helps me a lot on learning svelte.

[vishal423]

@littlepine, it seems I missed the ESM change on the library side and hence the issue. Your help is much appreciated. I believe changing the import from import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle' to import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons' should fix the issue.

While doing this, you can also combine multiple import statements like import { faExclamationCircle, faTimes } from '@fortawesome/free-solid-svg-icons'.

Please note this change needs to be done across all references on library side https://github.com/vishal423/jhipster-svelte-library/search?q=from+%27%40fortawesome%2Ffree-solid-svg-icons%27