Giter Site home page Giter Site logo

Comments (27)

Kapaak avatar Kapaak commented on March 29, 2024 13

I can confirm that this error is still present, if you try to import more icons at once.
("next": "^13.5.6", "@phosphor-icons/react": "^2.0.13")

The modularizeImports fix above is no longer working with the newest version, since the icons are now in different folders.
@phosphor-icons/react/dist/csr/{{member}}
and
@phosphor-icons/react/dist/ssr/{{member}}

So in order to make it work you need to change it to this:

 modularizeImports: {
    '@phosphor-icons/react': {
      transform: '@phosphor-icons/react/dist/ssr/{{member}}',
    },
  },

I was also using styled-components in my code and it was still throwing errors when I tried to style the icons (icon was undefined). So I also had to import the icon this way.

import { CaretDown } from '@phosphor-icons/react/dist/ssr/CaretDown';

But you would need to import all your icons this way, which is not rly fun. So its easier to use the experimental code and hope that it wont fail.

experimental: { 
      optimizePackageImports: ['@phosphor-icons/react']
    }

from react.

wfl-junior avatar wfl-junior commented on March 29, 2024 10

I managed to solve this problem using the modularizeImports feature from next like mentioned above, but the path for the icons is either incorrect in the package.json or for the types in TypeScript.

"exports": {
  ".": {
    "import": "./dist/index.es.js"
  },
  "./*": {
    "import": "./dist/icons/*.es.js"
  }
}

image

image

But it works with import Icon from "@phosphor-icons/react/Icon";

While TypeScript says the path should be import Icon from "@phosphor-icons/react/dist/icons/Icon";

image

Solution is to add the following property in your next config file:

modularizeImports: {
  "@phosphor-icons/react": {
    transform: "@phosphor-icons/react/{{member}}",
  },
},

And then you can use the imports normally and next will take care to modularize the imports for you.

from react.

rektdeckard avatar rektdeckard commented on March 29, 2024 10

It looks like Nextjs 13.5 added optimizations specifically for this problem (large component/icon libraries with many files). The modularizeImports object is should be replaced with optimizePackageImports: [...pkg names], and the bundler will automagically transform them into the respective submodule imports, in a more efficient way than before.

from react.

xaphod avatar xaphod commented on March 29, 2024 6

Confirming @rektdeckard's find - we updated to NextJS 13.5.3 and the modularizeImports approach wasn't compiling, and we were getting the too many open files crash. The following in next.config.js fixed it:

    experimental: { 
      optimizePackageImports: ['@phosphor-icons/react']
    }

from react.

rektdeckard avatar rektdeckard commented on March 29, 2024 1

Hey gang. The paths for the icons were correct, but the typings did not account for the aliasing we do in the exports field in package.json. I have pushed a v2.0.8 build that

  1. Fixes the typings for aliased exports, and
  2. Includes a UMD build and a main field, so the lib should be comprehensible to CJS environments.

I recommend using the full /dist/icons/Foo paths all the same, if you plan on using modular imports.

I would love to hear if this fixes things for you.

from react.

dantevicenzo avatar dantevicenzo commented on March 29, 2024 1

I'm having the same issue:

[Error: EMFILE: too many open files, open '/var/task/node_modules/@phosphor-icons/react/dist/icons/Sigma.es.js'] {
  errno: -24,
  code: 'EMFILE',
  syscall: 'open',
  path: '/var/task/node_modules/@phosphor-icons/react/dist/icons/Sigma.es.js',
  page: '/'
}
RequestId: b2ef59e8-2c97-447d-937b-16b8ecd60b2f Error: Runtime exited with error: exit status 1
Runtime.ExitError

i had to switch from @phospor-icons/react to phosphor-react and now it's working fine.

from react.

TobiasLueger avatar TobiasLueger commented on March 29, 2024

@lionelrudaz How old is the project and what is the package json look like?☺️

What are you using in the pipe to build the project?

The emfile error sometimes come from a limit at the Node server. So that could be an problem.

from react.

manskron avatar manskron commented on March 29, 2024

Having the same problem.

Error: EMFILE: too many open files, open '/var/task/node_modules/@phosphor-icons/react/dist/icons/SignIn.es.js'] {
  errno: -24,
  code: 'EMFILE',
  syscall: 'open',
  path: '/var/task/node_modules/@phosphor-icons/react/dist/icons/SignIn.es.js'
}
[Error: EMFILE: too many open files, open '/var/task/node_modules/@phosphor-icons/react/dist/icons/SignIn.es.js'] {
  errno: -24,
  code: 'EMFILE',
  syscall: 'open',
  path: '/var/task/node_modules/@phosphor-icons/react/dist/icons/SignIn.es.js',
  page: '/1'
}
RequestId: f4203201-8c26-4fe8-8812-06219932ddcf Error: Runtime exited with error: exit status 1
Runtime.ExitError

from react.

TobiasLueger avatar TobiasLueger commented on March 29, 2024

@manskron, could you also give some more informations about your project pls.

How old is the project and what is the package json look like?☺️

What are you using in the pipe to build the project?

from react.

manskron avatar manskron commented on March 29, 2024

@TobiasLueger It's a Next.js v13.2.4 project running on Node v18.
Not entirely sure if this is what you mean, but we don't have a custom build pipe, it's taken care of by the Next.js compiler.

from react.

manskron avatar manskron commented on March 29, 2024

I am only getting this error when deploying on Vercel. Locally it seems to work just fine.

from react.

wfl-junior avatar wfl-junior commented on March 29, 2024

I am having the same issue, I am trying to use the modularizeImports feature from next, but then I get the following error: Module not found: Can't resolve '@phosphor-icons/react/dist/icons/MagnifyingGlass', even though typescript says it exists.

Using the latest version: 2.0.6

from react.

wfl-junior avatar wfl-junior commented on March 29, 2024

Hey gang. The paths for the icons were correct, but the typings did not account for the aliasing we do in the exports field in package.json. I have pushed a v2.0.8 build that

  1. Fixes the typings for aliased exports, and
  2. Includes a UMD build and a main field, so the lib should be comprehensible to CJS environments.

I recommend using the full /dist/icons/Foo paths all the same, if you plan on using modular imports.

I would love to hear if this fixes things for you.

Updated the lib version and my next config to:

modularizeImports: {
  "@phosphor-icons/react": {
    transform: "@phosphor-icons/react/dist/icons/{{member}}",
  },
},

And it does indeed work now with this path, thank you!

from react.

lionelrudaz avatar lionelrudaz commented on March 29, 2024

It's a Next.js v13.2.4 project running on Node v18.

Same here. I'm also deploying on Vercel.

Sorry for the delay in my answer.

@rektdeckard, does that mean we must have this configuration if we plan to use the library on a Nextjs project?

modularizeImports: {
  "@phosphor-icons/react": {
    transform: "@phosphor-icons/react/dist/icons/{{member}}",
  },
},

Please let us know if this is a temporary workaround or something that must be documented for new developers.

from react.

rektdeckard avatar rektdeckard commented on March 29, 2024

@lionelrudaz I'm really not sure, I don't use Next and I'm honestly shocked at the hoops library maintainers are now needing to jump through to make basic functionality work in it. Every other build tooling supports tree-shaking of ESM modules out of the box, and can handle this in packages with 10 or 10,000 files. Why not in Next?

Could just be a Vercel thing too, IDK.

from react.

lionelrudaz avatar lionelrudaz commented on March 29, 2024

Got you, I agree this becomes a nightmare for you.

Should I open an issue at Vercel's end for that or do you plan to document the workaround? With the market shares of Vercel, this is perhaps a good thing to mention somewhere in your pages. I can help for that of course.

from react.

rektdeckard avatar rektdeckard commented on March 29, 2024

@lionelrudaz you've tried the v2.0.8 without modularizeImports and still not working? If so, please do file a bug with Vercel. EMFILE error means they are paging in every JS module file referenced in /dist/index.es.js to memory at the same time, which means they either aren't tree-shaking modules, or they are doing it in a very inefficient manner. Yes, there are over 2500 files in this library, half of which are referenced in a single barrel file, but that should not be an exceptional case.

from react.

bernardinorafael avatar bernardinorafael commented on March 29, 2024

Just updating this Issue, I have this same error in a Next.js application, where I have version 2.0.5 of Phosphor and the error still persists, strangely, I have another application published in Vercel with the same version of the package and it does not show error.

from react.

rektdeckard avatar rektdeckard commented on March 29, 2024

@bernardinorafael that's because this isn't an error originating in Phosphor, it's a Vercel CLI tool that is not designed to work with libraries with many small files.

Upgrade to 2.0.8 and try modularizing the imports.

from react.

rektdeckard avatar rektdeckard commented on March 29, 2024

Possibly resolved by #56. Would anyone here care to test by upgrading to v2.0.10 and attempting to deploy to Vercel?

from react.

lionelrudaz avatar lionelrudaz commented on March 29, 2024

I've upgraded the library to 2.0.10, was using 2.0.9 before. I wonder if our friends at Vercel haven't changed something at their end, as I haven't added the modularizeImports workaround and I've been deploying with no issue for a while.

Anybody in the same situation?

from react.

s0urfruit avatar s0urfruit commented on March 29, 2024

I've tried 2.0.9 & 2.0.10, both still result in the same error:

[Error: EMFILE: too many open files, open '/var/task/node_modules/@phosphor-icons/react/dist/icons/SidebarSimple.es.js'] {
  errno: -24,
  code: 'EMFILE',
  syscall: 'open',
  path: '/var/task/node_modules/@phosphor-icons/react/dist/icons/SidebarSimple.es.js',
  page: '/onboard'
}
RequestId: f43037d6-9a55-4320-ac4e-a0c042575b96 Error: Runtime exited with error: exit status 1
Runtime.ExitError

Adding modularizeImports into my next.config.js hasn't worked either.

Should also note I am importing the icons as:
import * as Icons from "@phosphor-icons/react"

It does not work when importing each one individually either.

TL;DR — Vercel screwed something up?

from react.

s0urfruit avatar s0urfruit commented on March 29, 2024

New error message on a different route (now errors at Sigma, not Sidebar)

[Error: EMFILE: too many open files, open '/var/task/node_modules/@phosphor-icons/react/dist/icons/Sigma.es.js'] {
  errno: -24,
  code: 'EMFILE',
  syscall: 'open',
  path: '/var/task/node_modules/@phosphor-icons/react/dist/icons/Sigma.es.js',
  page: '/dashboard'
}
RequestId: 682253ba-77bf-4251-834d-ade211103887 Error: Runtime exited with error: exit status 1
Runtime.ExitError

Current (temporary) solution: use the legacy package via npm i phosphor-react - works just fine. You just won't get some of the newer icons.

from react.

MelkorNemesis avatar MelkorNemesis commented on March 29, 2024

Loading the phosphor icons from react-icons/pi works ok too. Note that the components have different names though (e.g., Bold suffix).

from react.

jasondainter avatar jasondainter commented on March 29, 2024

Also having this issue on NextJs with Netlify.
Getting

Jul 11, 12:40:14 AM: 2533ac12 ERROR [Error: EMFILE: too many open files, open '/var/task/node_modules/@phosphor-icons/react/dist/icons/SidebarSimple.es.js'] {Jul 11, 12:40:14 AM: 2533ac12 ERROR errno: -24,Jul 11, 12:40:14 AM: 2533ac12 ERROR code: 'EMFILE',Jul 11, 12:40:14 AM: 2533ac12 ERROR syscall: 'open',Jul 11, 12:40:14 AM: 2533ac12 ERROR path: '/var/task/node_modules/@phosphor-icons/react/dist/icons/SidebarSimple.es.js'Jul 11, 12:40:14 AM: 2533ac12 ERROR }

@dantevicenzo bit of a noob developer here but your solution looked promising, could you kindly explain the main differences of @phospor-icons/react vs phosphor-react?

I'm importing icons like this if its any help:

// Import phosphor icons import { PencilLine, Balloon, HandWaving, HandsClapping, TreePalm, HandsPraying, Heart, SmileyNervous, ThumbsUp, } from "@phosphor-icons/react";

Thanks ahead for any help.

from react.

gabrielvrl avatar gabrielvrl commented on March 29, 2024

Dit not work for me, can anyone help?

from react.

Tamicktom avatar Tamicktom commented on March 29, 2024

It appears that in Nextjs version 13.5.5 this issue has been resolved without requiring any additional configuration.

from react.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.