Deprecation - Invalid Main Field #509

jvkrakowski · 2021-11-05T12:57:08Z

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

The text was updated successfully, but these errors were encountered:

EMurrell · 2021-11-05T13:19:29Z

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 · 2021-11-16T11:01:36Z

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

brian-cross · 2021-11-21T22:08:50Z

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

nolanleung · 2021-11-21T23:21:03Z

Let me see if I can reproduce...

mattcarlotta · 2021-11-26T03:01:01Z

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 · 2022-01-04T21:36:07Z

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 · 2022-02-11T00:20:55Z

Today the problem persist on nextjs

abiliocoelho · 2022-03-09T16:50:29Z

Today the problem persist on Vite

kimbaudi · 2022-03-27T23:55:05Z

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

kimbaudi · 2022-04-17T14:32:33Z

duplicate of #466 and #461.

chasoft · 2022-07-01T13:51:37Z

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 · 2022-08-04T17:47:18Z

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 · 2022-08-13T20:30:50Z

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 · 2022-09-01T19:09:20Z

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 · 2022-11-09T19:28:10Z

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 · 2022-11-30T10:21:51Z

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 · 2022-12-27T19:32:26Z

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 <kamijin@live.jp>"
  ],
  "license": "MIT",
  "main": "lib",
  "types": "./lib/esm/index.d.ts",
  "sideEffects": false,
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com:react-icons/react-icons.git"
  },
  ...
}

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

dospolov · 2022-12-30T11:55:42Z

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

Across multiple frameworks, users receive a `[DEP0128] DeprecationWarning: Invalid 'main' field in ...` warning. Removing this line fixes it. Issue: react-icons#509

kamijin-fanta · 2023-03-03T06:41:17Z

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

1bb8114

Elieserlaguerre · 2023-03-05T02:18:58Z

I pre-released a version react-icons@4.8.1-snapshot.0 (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 · 2023-03-05T18:01:13Z

I pre-released a version react-icons@4.8.1-snapshot.0 (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 · 2023-03-06T00:34:31Z

thank you. Validate in a Next.js project.

kamijin-fanta · 2023-03-06T10:34:37Z

Fixed an issue where packages were not built correctly. Try react-icons@4.8.1-snapshot.1.

My Next.js project builds without any warnings.

DrUlrichAnders · 2023-03-06T11:53:01Z

Fixed an issue where packages were not built correctly. Try react-icons@4.8.1-snapshot.1.

My Next.js project builds without any warnings.

Awesome. With react-icons@4.8.1-snapshot.1 my next dev and next build also now run without warnings or errors. Well done. Many thanks.

DevAkintunde · 2023-03-09T08:57:59Z

Fixed an issue where packages were not built correctly. Try react-icons@4.8.1-snapshot.1.

My Next.js project builds without any warnings.

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

barbalex · 2023-03-11T22:46:55Z

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

gxxcastillo · 2023-03-15T14:14:35Z

Using 4.8.1-snapshot.1 and building with Vite@4.1.4, 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 · 2023-03-16T02:50:35Z

@gxxcastillo Thanks for your feedback! I built vite@4.1.4, nodejs 18.15.0, react-icons@4.8.1-snapshot.1 and it completed successfully. It looks like a problem with build settings such as Vite.

mxvsh · 2023-03-27T10:06:14Z

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

aritraroy24 · 2023-05-18T10:45:21Z

Fixed an issue where packages were not built correctly. Try react-icons@4.8.1-snapshot.1.

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.

user1m · 2023-07-08T02:16:53Z

Using 4.8.1-snapshot.1 and building with Vite@4.1.4, 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

solved my issue buliding w/ vite for an SSR project. Thanks!

bartelemi mentioned this issue Oct 6, 2022

(node:13869) [DEP0128] DeprecationWarning #591

Closed

kamijin-fanta mentioned this issue Oct 16, 2022

(node:166) [DEP0128] DeprecationWarning #622

Closed

wweaver mentioned this issue Dec 15, 2022

Warning during development #650

Closed

brianprost mentioned this issue Jan 17, 2023

Remove deprecated "main" field from package.json #676

Closed

wadeen mentioned this issue Jan 22, 2023

Zenn記事と現在の記事の紐付け wadeen/nextjs-blog#14

Merged

kamijin-fanta pinned this issue Mar 8, 2023

kamijin-fanta mentioned this issue Mar 8, 2023

Error on npm run dev in a Next.js app #466

Closed

This was referenced Mar 8, 2023

react-iconsのリンターエラー wadeen/nextjs-blog#22

Closed

Fix: react-iconsのリンターエラー解決 wadeen/nextjs-blog#23

Merged

user1m mentioned this issue Jul 8, 2023

[Feature]: Support Native ESM #717

Closed

natemoo-re mentioned this issue Jul 18, 2023

Build fails when using a React component with react-icons within an astro file withastro/astro#7629

Closed

1 task

aster-void mentioned this issue Jan 10, 2024

import のエイリアスを可能にした ut-code/website#98

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Deprecation - Invalid Main Field #509

Deprecation - Invalid Main Field #509

jvkrakowski commented Nov 5, 2021

EMurrell commented Nov 5, 2021

devmrfitz commented Nov 16, 2021

brian-cross commented Nov 21, 2021 •

edited

nolanleung commented Nov 21, 2021

mattcarlotta commented Nov 26, 2021 •

edited

silkstudio commented Jan 4, 2022

emilioaray-dev commented Feb 11, 2022 •

edited

abiliocoelho commented Mar 9, 2022

kimbaudi commented Mar 27, 2022

kimbaudi commented Apr 17, 2022

chasoft commented Jul 1, 2022

David-Huson commented Aug 4, 2022

nyxb commented Aug 13, 2022 •

edited

ghost commented Sep 1, 2022

markgacoka commented Nov 9, 2022

chrtravels commented Nov 30, 2022

webbertakken commented Dec 27, 2022

dospolov commented Dec 30, 2022

kamijin-fanta commented Mar 3, 2023

Elieserlaguerre commented Mar 5, 2023

DrUlrichAnders commented Mar 5, 2023

kamijin-fanta commented Mar 6, 2023

kamijin-fanta commented Mar 6, 2023

DrUlrichAnders commented Mar 6, 2023

DevAkintunde commented Mar 9, 2023

barbalex commented Mar 11, 2023

gxxcastillo commented Mar 15, 2023

kamijin-fanta commented Mar 16, 2023

mxvsh commented Mar 27, 2023

aritraroy24 commented May 18, 2023

user1m commented Jul 8, 2023

Deprecation - Invalid Main Field #509

Deprecation - Invalid Main Field #509

Comments

jvkrakowski commented Nov 5, 2021

EMurrell commented Nov 5, 2021

devmrfitz commented Nov 16, 2021

brian-cross commented Nov 21, 2021 • edited

nolanleung commented Nov 21, 2021

mattcarlotta commented Nov 26, 2021 • edited

Hack Fix (may break the source)

Proper Fix

Problem

Solution

Other thoughts

silkstudio commented Jan 4, 2022

emilioaray-dev commented Feb 11, 2022 • edited

abiliocoelho commented Mar 9, 2022

kimbaudi commented Mar 27, 2022

kimbaudi commented Apr 17, 2022

chasoft commented Jul 1, 2022

David-Huson commented Aug 4, 2022

nyxb commented Aug 13, 2022 • edited

ghost commented Sep 1, 2022

markgacoka commented Nov 9, 2022

chrtravels commented Nov 30, 2022

webbertakken commented Dec 27, 2022

dospolov commented Dec 30, 2022

kamijin-fanta commented Mar 3, 2023

Elieserlaguerre commented Mar 5, 2023

DrUlrichAnders commented Mar 5, 2023

kamijin-fanta commented Mar 6, 2023

kamijin-fanta commented Mar 6, 2023

DrUlrichAnders commented Mar 6, 2023

DevAkintunde commented Mar 9, 2023

barbalex commented Mar 11, 2023

gxxcastillo commented Mar 15, 2023

kamijin-fanta commented Mar 16, 2023

mxvsh commented Mar 27, 2023

aritraroy24 commented May 18, 2023

user1m commented Jul 8, 2023

brian-cross commented Nov 21, 2021 •

edited

mattcarlotta commented Nov 26, 2021 •

edited

emilioaray-dev commented Feb 11, 2022 •

edited

nyxb commented Aug 13, 2022 •

edited