Deprecation - Invalid Main Field

[jvkrakowski]

Describe the problems I use React Icons with Gatsby. Here is the error I received on load:

(node:46591) [DEP0128] DeprecationWarning: Invalid 'main' field in '/Users/jvkrakowski/Desktop/dev/gatsby/nine-realms/node_modules/react-icons/package.json' of 'lib'. Please either fix that or report it to the module author (Use node --trace-deprecation ... to show where the warning was created)

Expected behavior The error appears once you issue the "gatsby develop" command on terminal.

Desktop (please complete the following information):

• Macbook Pro (16 inch Retina Display) on Catalina

Additional context I updated to Gatsby version 4, and I'm using NPM version 8

[EMurrell]

I am having the same issue albeit with next.js app. Is this going to be a breaking issue? Any way to fix it or that I can help?

(node:17672) [DEP0128] DeprecationWarning: Invalid 'main' field in 'C:\Users\ericm\websites2\capital\node_modules\react-icons\package.json' of 'lib'. Please either fix that or report it to the module author

[devmrfitz]

@nolanleung Are there any plans to fix this issue as it's breaking all nextJS and gatsby builds?

[brian-cross]

Same issue here however it's not breaking the build for me on Next.

[nolanleung]

Let me see if I can reproduce...

[mattcarlotta]

The problem is that node v16+ expects main to resolve to an index.js file and not a directory: DEP0128. The problem is that the top-level package.json main property points to the lib directory, which contains its own package.json that points to index.js files within the respective cjs and esm directories; instead, use absolute paths to point to cjs/esm index.js files from the top-level package.json.

Hack Fix (may break the source)

So instead of having the top package.json main point to lib:

Top:

{
  "main": "lib",
  "types": "./lib/esm/index.d.ts",
}

Child (lib directory):

{
  "main": "./cjs/index.js",
  "module": "./esm/index.js"
}

Just point to lib within the top-level package.json.

Top:

{
  "main": "lib/cjs/index.js",
  "module": "lib/esm/index.js",
  "types": "lib/esm/index.d.ts",
}

Proper Fix

While the above will fix the deprecation problem, there's still one more problem that ideally should be fixed in the next major release...

Problem

Both cjs/esm icon imports are pointing to lib: var GenIcon = require('../lib').GenIcon and import { GenIcon } from '../lib';

Therefore removing lib's package.json will cause a bundler/compiler to throw an error because lib won't resolve to any file without the child-level package.json.

This predicament mainly has to do with the current folder structure, where cjs/esm files are mixed at the root-level parent directories, but separated within lib:

├── ai (mix of cjs/esm files)
├── bi (mix of cjs/esm files)
 ...etc 
├── lib
|  ├── cjs
|  └── esm
 ...etc
├── index.esm.js 
├── index.js 
└── package.json

Solution

Instead, separate all cjs and esm files within lib:

├── lib
|  ├── cjs
|  |   ├── ai 
|  |   ├── bi 
|  |    ...etc 
|  |   ├── iconBase.js 
|  |   ├── iconContext.js 
|  |   ├── iconManifest.js 
|  |   ├── index.d.ts 
|  |   └── index.js 
|  | 
|  ├── esm
|  |   ├── ai 
|  |   ├── bi
|  |    ...etc 
|  |   ├── iconBase.js 
|  |   ├── iconContext.js 
|  |   ├── iconManifest.js 
|  |   ├── index.d.ts
|  |   └── index.js 
|  | 
|  └── index.d.ts
| 
└── package.json

With above folder structure, icon imports would then change to...

var GenIcon = require('../index').GenIcon and import { GenIcon } from '../index';

...and point to their respective parent directories.

The package.json would then be:

{
  "main": "lib/cjs/index.js",
  "module": "lib/esm/index.js",
  "types": "lib/index.d.ts",
}

Other thoughts

The above is heavily opinionated and can be changed to many other folder structures/file types approaches. For example, cjs could be root-level within lib but esm is separated; as well as, esm could use the .mjs extension to let node know that it's a ESM file. That said, as is, the current folder structure is a bit strange.

[silkstudio]

Getting the same issue on a Next build (not breaking the build however).

Error message is as follows:

(node:60350) [DEP0128] DeprecationWarning: Invalid 'main' field in '.../node_modules/react-icons/package.json' of 'lib'. Please either fix that or report it to the module author
(Use `node --trace-deprecation ...` to show where the warning was created)

[emilioaray-dev]

Today the problem persist on nextjs

[abiliocoelho]

Today the problem persist on Vite

[kimbaudi]

I'm also getting this warning on my next.js app.

[kimbaudi]

duplicate of https://github.com/react-icons/react-icons/issues/466 and https://github.com/react-icons/react-icons/issues/461.

[chasoft]

yes, and today... i'm using "react-icons": "^4.4.0", and get the same error

(node:36456) [DEP0128] DeprecationWarning: Invalid 'main' field in '.....\node_modules\react-icons\package.json' of 'lib'. Please either fix that or report it to the module author
[1] (Use `node --trace-deprecation ...` to show where the warning was created)

[David-Huson]

Hello all, Im also getting this error. I am using "react-icons": "^4.4.0" with Astrojs (powered by Vite). Getting the same error as everyone else. It was working fine in dev but will break production. At least if youre deploying on Vercel like I am.

When a deployment is triggered i get the following warning:

(node:391) [DEP0128] DeprecationWarning: Invalid 'main' field in '/vercel/path0/node_modules/react-icons/package.json' of 'lib'. Please either fix that or report it to the module author
--
12:37:58.377 | (Use `node --trace-deprecation ...` to show where the warning was created)
12:38:01.445 | 05:38:01 PM [build] Completed in 3.24s.
12:38:01.445 | 05:38:01 PM [build] Building entrypoints for prerendering...
12:38:02.764 | 05:38:02 PM [build] Completed in 1.32s.
12:38:02.764 |  

followed by this error which causes the build to fail:

12:38:05.145 | generating static routes
12:38:05.275 | error   Directory import '/vercel/path0/node_modules/react-icons/vsc' is not supported resolving ES modules imported from /vercel/path0/dist/entry.mjs
12:38:05.275 | Did you mean to import react-icons/vsc/index.js?
12:38:05.275 | at new NodeError (node:internal/errors:372:5)
12:38:05.275 | at finalizeResolution (node:internal/modules/esm/resolve:433:17)
12:38:05.275 | at moduleResolve (node:internal/modules/esm/resolve:1009:10)
12:38:05.275 | at defaultResolve (node:internal/modules/esm/resolve:1218:11)
12:38:05.275 | at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
12:38:05.275 | at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
12:38:05.276 | at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
12:38:05.276 | at link (node:internal/modules/esm/module_job:78:36)
12:38:05.424 | Error: Command "npm run build" exited with 1

[nyxb]

Hello all, Im also getting this error. I am using "react-icons": "^4.4.0" with Astrojs (powered by Vite). Getting the same error as everyone else. It was working fine in dev but will break production. At least if youre deploying on Vercel like I am.

When a deployment is triggered i get the following warning:

(node:391) [DEP0128] DeprecationWarning: Invalid 'main' field in '/vercel/path0/node_modules/react-icons/package.json' of 'lib'. Please either fix that or report it to the module author
--
12:37:58.377 | (Use `node --trace-deprecation ...` to show where the warning was created)
12:38:01.445 | 05:38:01 PM [build] Completed in 3.24s.
12:38:01.445 | 05:38:01 PM [build] Building entrypoints for prerendering...
12:38:02.764 | 05:38:02 PM [build] Completed in 1.32s.
12:38:02.764 |  

followed by this error which causes the build to fail:

12:38:05.145 | generating static routes
12:38:05.275 | error   Directory import '/vercel/path0/node_modules/react-icons/vsc' is not supported resolving ES modules imported from /vercel/path0/dist/entry.mjs
12:38:05.275 | Did you mean to import react-icons/vsc/index.js?
12:38:05.275 | at new NodeError (node:internal/errors:372:5)
12:38:05.275 | at finalizeResolution (node:internal/modules/esm/resolve:433:17)
12:38:05.275 | at moduleResolve (node:internal/modules/esm/resolve:1009:10)
12:38:05.275 | at defaultResolve (node:internal/modules/esm/resolve:1218:11)
12:38:05.275 | at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
12:38:05.275 | at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
12:38:05.276 | at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
12:38:05.276 | at link (node:internal/modules/esm/module_job:78:36)
12:38:05.424 | Error: Command "npm run build" exited with 1

Here the same error wit Astro and react

(node:21320) [DEP0128] DeprecationWarning: Invalid 'main' field in 'C:\Users\vidar\Projekte\Nine Realms\Websites\New\test\my-astro\node_modules\react-icons\package.json' of 'lib'. Please either fix that or report it to the module author
(Use `node --trace-deprecation ...` to show where the warning was created)

A straightforward solution or a fix would be super nice. This problem has existed for almost a year. In a pure React application it works. Also in a next,js application.

[ghost]

Same problem as others, with a NextJs project.

(node:6728) [DEP0128] DeprecationWarning: Invalid 'main' field in 'C:\Users\***\Blog\-blog-site\node_modules\react-icons\package.json' of 'lib'. Please either fix that or report it to the module author
(Use `node --trace-deprecation ...` to show where the warning was created)

[markgacoka]

The problem still persists in NextJS:

(node:28386) [DEP0128] DeprecationWarning: Invalid 'main' field in '.../node_modules/react-icons/package.json' of 'lib'. Please either fix that or report it to the module author
(Use `node --trace-deprecation ...` to show where the warning was created)

[chrtravels]

Still persists in NextJS, a year after initially reported. Luckily it doesn't seem to be breaking.

DeprecationWarning: Invalid 'main' field in '.../node_modules/react-icons/package.json' of 'lib'. Please either fix that or report it to the module author

[webbertakken]

Fresh install still shows the main field.

{
  "name": "react-icons",
  "version": "4.7.1",
  "description": "SVG React icons of popular icon packs using ES6 imports",
  "author": "Goran Gajic",
  "contributors": [
    "kamijin_fanta <[email protected]>"
  ],
  "license": "MIT",
  "main": "lib",
  "types": "./lib/esm/index.d.ts",
  "sideEffects": false,
  "repository": {
    "type": "git",
    "url": "git+ssh://[email protected]:react-icons/react-icons.git"
  },
  ...
}

That means that the distributed package.json is in fact not fixed.

[dospolov]

@kamijin-fanta can you please take a look? So frustrating, we can't use it with NextJS and AstroJS

[kamijin-fanta]

I pre-released a version [email protected] (or react-icons@beta) containing this commit. Try it out on your project and give us your feedback. thank you.

https://github.com/react-icons/react-icons/commit/1bb8114a5521fd1d22b04f38d4f4e0bb019018d7

[Elieserlaguerre]

I pre-released a version [email protected] (or react-icons@beta) containing this commit. Try it out on your project and give us your feedback. thank you.

1bb8114

Good evening, just to let you know, I've installed the version you're suggesting as a potential solution and it still does not work. here is the error message my NEXT.js app is giving: ./node_modules/react-icons/bi/index.esm.js:2:0 Module not found: Can't resolve '../lib'

[DrUlrichAnders]

I pre-released a version [email protected] (or react-icons@beta) containing this commit. Try it out on your project and give us your feedback. thank you.

1bb8114

The problem is unfortunately not fixed yet.

[kamijin-fanta]

thank you. Validate in a Next.js project.

[kamijin-fanta]

Fixed an issue where packages were not built correctly. Try [email protected].

My Next.js project builds without any warnings.

[DrUlrichAnders]

Fixed an issue where packages were not built correctly. Try [email protected].

My Next.js project builds without any warnings.

Awesome. With [email protected] my next dev and next build also now run without warnings or errors. Well done. Many thanks.

[DevAkintunde]

Fixed an issue where packages were not built correctly. Try [email protected].

My Next.js project builds without any warnings.

Awesome, this worked for me as well in Vite (ReactJS). Thanks.

[barbalex]

4.8.1-snapshot.1 also works for me in a new astro project.

[gxxcastillo]

Using 4.8.1-snapshot.1 and building with [email protected], I get the following error if I import using react-icons/ri, I'm able to load all other es module packages just fine:

node:internal/process/esm_loader:97
    internalBinding('errors').triggerUncaughtException(
                              ^
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/.../node_modules/react-icons/ri' is not supported resolving ES modules imported from ...
Did you mean to import react-icons/ri/index.js?
    at new NodeError (node:internal/errors:399:5)
    at finalizeResolution (node:internal/modules/esm/resolve:319:17)
    at moduleResolve (node:internal/modules/esm/resolve:945:10)
    at defaultResolve (node:internal/modules/esm/resolve:1153:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///.../node_modules/react-icons/ri'
}
Node.js v18.15.0

It works if I import using react-icons/ri/index

[kamijin-fanta]

@gxxcastillo Thanks for your feedback! I built [email protected], nodejs 18.15.0, [email protected] and it completed successfully. It looks like a problem with build settings such as Vite.

[mxvsh]

@kamijin-fanta i am getting the same error, i used vite for bundling

[aritraroy24]

Fixed an issue where packages were not built correctly. Try [email protected].

My Next.js project builds without any warnings.

Awesome. I am using Astro with React. I got the same error with version 4.8.0. Uninstalled that, and installed this package. NO WARNING NOW 😍😍😍. Many thanks.