Regression / es fortawesome import broken in latest canary

[mwawrusch]

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/vercel-next-js-reproduction-template-go8s7s?file=%2Fapp%2Flayout.tsx

To Reproduce

use

    "@fortawesome/fontawesome-svg-core": "6.4.2",
    "@fortawesome/free-brands-svg-icons": "6.4.2",
    "@fortawesome/pro-light-svg-icons": "6.4.2",
    "@fortawesome/pro-regular-svg-icons": "6.4.2",
    "@fortawesome/pro-solid-svg-icons": "6.4.2",
    "@fortawesome/pro-thin-svg-icons": "6.4.2",
    "@fortawesome/react-fontawesome": "0.2.0",
    "@headlessui/react": "1.7.17",

import like so:

import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false

This works in canary .11 but not in .16 (haven't tested in between)

Current vs. Expected behavior

It should compile but doesnt.

Error in canary .16:

Module not found: ESM packages (@fortawesome/fontawesome-svg-core) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

Someone pointed out that it could be a problem similar to lucide-icons/lucide#1482

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:22:05 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.14.2
      npm: 9.5.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.20-canary.11
      eslint-config-next: 13.4.16
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.2.2
    Next.js Config:
      output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Additional context

n/a

[nhducit]

I'm getting the same issue.

v13.4.20-canary.12 works but it's broken from v13.4.20-canary.13 - v13.4.20-canary.18

Here is the repro repo

Error message in the terminal

> next13-fontawesome@0.1.0 build /Users/xxx/code/rc/next13-fontawesome
> next build

Failed to compile.

./node_modules/.pnpm/@fortawesome+react-fontawesome@0.2.0_@fortawesome+fontawesome-svg-core@6.4.2_react@18.2.0/node_modules/@fortawesome/react-fontawesome/index.js
Module not found: ESM packages (@fortawesome/fontawesome-svg-core) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/app/page.tsx

./src/app/layout.tsx
Module not found: Can't resolve '@fortawesome/fontawesome-svg-core/styles.css'

https://nextjs.org/docs/messages/module-not-found


> Build failed because of webpack errors
- info Creating an optimized production build . ELIFECYCLE  Command failed with exit code 1.

Error message in the web

./node_modules/.pnpm/@fortawesome+react-fontawesome@0.2.0_@fortawesome+fontawesome-svg-core@6.4.2_react@18.2.0/node_modules/@fortawesome/react-fontawesome/index.js:2:82
Module not found: ESM packages (@fortawesome/fontawesome-svg-core) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/app/page.tsx

Here is the react-fontawesome/index.js:2:82 file content

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fortawesome/fontawesome-svg-core'), require('prop-types'), require('react')) :
  typeof define === 'function' && define.amd ? define(['exports', '@fortawesome/fontawesome-svg-core', 'prop-types', 'react'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["react-fontawesome"] = {}, global.FontAwesome, global.PropTypes, global.React));
})(this, (function (exports, fontawesomeSvgCore, PropTypes, React) { 'use strict';

Based on the error message require('@fortawesome/fontawesome-svg-core') is the root cause

  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fortawesome/fontawesome-svg-core'), require('prop-types'), require('react')) :

It's also broken with experimental.esmExternals = 'loose'

> next build

- warn You have enabled experimental feature (esmExternals) in next.config.js.
- warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

Failed to compile.

./src/app/layout.tsx
Module not found: Can't resolve '@fortawesome/fontawesome-svg-core/styles.css'

https://nextjs.org/docs/messages/module-not-found


> Build failed because of webpack errors
- info Creating an optimized production build . ELIFECYCLE  Command failed with exit code 1.

[mwawrusch]

So this works again with v13.4.20-canary.26

[nhducit]

root cause: recently the next.js team tune the optimizePackageImports config to improve the dev server performance and include fontawesome config. But this config cause the build failed and it's reverted in this commit
https://github.com/vercel/next.js/pull/55040/files#diff-7836d903b56ef6914ef5f3e8d1711c1d353d7b6ae4efefb0d2193897ee4fca85L679

[nhducit]

@mwawrusch could we close this PR now since the bug is fixed?

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.