Problem with Nuxt3: Unexpected token 'export'

[lukaszflorczak]

Describe the bug
The vue-fontawesome (3.0.0-5) doesn't work with Nuxt3 (3.0.0-27244261.c49f9ca, the same on earlier releases too).

(node:27545) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
Unexpected token 'export'
  at Object.compileFunction (node:vm:352:18)  
  at wrapSafe (node:internal/modules/cjs/loader:1031:15)  
  at Module._compile (node:internal/modules/cjs/loader:1065:27)  
  at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)  
  at Module.load (node:internal/modules/cjs/loader:981:32)  
  at Function.Module._load (node:internal/modules/cjs/loader:822:12)  
  at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:196:29)  
  at ModuleJob.run (node:internal/modules/esm/module_job:183:25)  
  at async Loader.import (node:internal/modules/esm/loader:178:24)  
  at async __instantiateModule__ (file://./.nuxt/dist/server/server.mjs:2253:3)

Reproducible test case
Clone and run project (branch test/fontawesome): https://github.com/lukaszflorczak/nuxt3-demo/tree/test/fontawesome

npm install
npm run dev

Visit http://localhost:3000

[mateuszgiza]

@lukaszflorczak
I've found a temporary solution. Rename the plugin to fontawesome.client.js, and remove it from nuxt.config.js (Nuxt3 automatically loads it).
My Nuxt plugin seams like that:

Please note that it might work only on 'client' side, it might throw an error on 'server' therefore SSR might not fully work.

// tsconfig.json
{
  "extends": "./.nuxt/tsconfig.json",
  "paths": {
    "font-awesome": "./node_modules/@fortawesome/fontawesome-svg-core"
  }
}

// nuxt.config.ts
// removed from css/plugins sections
...
alias: {
    'font-awesome': resolve(__dirname, './node_modules/@fortawesome/fontawesome-svg-core')
},
...
purgeCSS: {
    whitelistPatterns: [/svg.*/, /fa.*/]
},

// app.vue
...
<script lang="ts" setup>
import 'font-awesome/styles.css'
import './assets/css/tailwind.css'
</script>

// plugins/fontawesome.client.js

import { defineNuxtPlugin } from '#app'
import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'

export default defineNuxtPlugin(nuxtApp => {
    config.autoAddCss = false;
    library.add(fas);

    nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon);
})

[lukaszflorczak]

I tried it today again, with nuxt3@3.0.0-27255771.f78ec93 and it works without any hacks (the plugin is loaded in SSR mode). @mateuszgiza could you confirm it too?

My code/implementation looks like this – maybe it'll be useful for someone:

// nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  css: [
    '@fortawesome/fontawesome-svg-core/styles.css'
  ]
})

// plugins/icons.js

import { defineNuxtPlugin } from '#app'
import { config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

config.autoAddCss = false

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.component('fa-icon', FontAwesomeIcon)
})

// composables/icons.js

import { library } from '@fortawesome/fontawesome-svg-core'

export const useIcons = icons => {
  for (const [key, value] of Object.entries(icons)) {
    if (/^fa/.test(key)) library.add(value)
  }
}

<!-- In component -->

<template>
  <fa-icon :icon="['fas', 'heart']"/>
</template>

<script setup>
  import { faHeart } from '@fortawesome/pro-solid-svg-icons'

  useIcons({ faHeart })
</script>

[mateuszgiza]

@lukaszflorczak thank you. It seems to be working now 🎉

[eMeRiKa13]

@mateuszgiza and @lukaszflorczak is-it still working for you?

I have a 500 error:

[Vue warn]: Unhandled error during execution of render function 
  at <FontAwesomeIcon icon= [ 'fas', 'browser' ] >
Cannot read properties of undefined (reading 'icon')

With

"nuxt3": "3.0.0-27296423.f3082ca"
"@fortawesome/fontawesome-svg-core": "^1.3.0-beta3",
 "@fortawesome/free-brands-svg-icons": "^6.0.0-beta3",
"@fortawesome/pro-solid-svg-icons": "^6.0.0-beta3",
"@fortawesome/vue-fontawesome": "^2.0.6",

[eMeRiKa13]

I switched to your versions and it's now working!

"@fortawesome/fontawesome-free": "^5.15.4",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/vue-fontawesome": "^3.0.0-5"

[lukaszflorczak]

Yep, vue-fontawesome has to be in the 3.x version. And probable 6.0.0-beta icons are still incompatible.

[Tragio]

Is anyone facing the same problem with nuxt-bridge? I'm having the same problem. I created a minimal reproduction here #344

"@fortawesome/fontawesome-svg-core": "^1.3.0",
"@fortawesome/free-solid-svg-icons": "^6.0.0",
"@fortawesome/vue-fontawesome": "^2.0.6",