Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Importing a large library (carbon-icons-svelte) causes a out of memory error #2990

Closed
ghost opened this issue Apr 14, 2021 · 3 comments
Closed
Labels
has workaround p2-edge-case Bug, but has workaround or limited in scope (priority)

Comments

@ghost
Copy link

ghost commented Apr 14, 2021

Describe the bug

When trying to import an icon from carbon-icons-svelte, running vite build runs into an out of memory error. Increasing the memory to 16GB helps, but 2GB should be enough for such a small project.

Could be a duplicate of #2433, but I am not sure.

Reproduction

https://github.com/nachtjasmin/vite-out-of-memory-bug

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: macOS 11.2.3
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 110.51 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.14.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.7.6 - /usr/local/bin/npm
  Browsers:
    Edge: 89.0.774.76
    Safari: 14.0.3
  npmPackages:
    vite: ^2.1.5 => 2.1.5 

It's also reproducible on my ThinkPad, which runs Arch Linux.

Used package manager: yarn

Logs

debug-log.txt

@ghost ghost added the pending triage label Apr 14, 2021
@psaren
Copy link
Contributor

psaren commented Apr 15, 2021

I write a vite plugin vite-plugin-imp
it will works like:

import { Add16 } from "carbon-icons-svelte";  // => import Add16 from "carbon-icons-svelte/lib/Add16";	
import { defineConfig } from 'vite'
import svelte from '@sveltejs/vite-plugin-svelte'
import vitePluginImp from 'vite-plugin-imp'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    svelte(),
    vitePluginImp({
      libList: [
        {
          libName: 'carbon-icons-svelte',
          camel2DashComponentName: false,
          replaceOldImport: true,
          libDirectory: 'lib',
          style() {
            return false
          }
        }
      ]
    })
  ]
})

with this plugin, you can run yarn dev & yarn build very fast in your Reproduction repo.
It might be an option.

@ghost
Copy link
Author

ghost commented Apr 15, 2021

With this plugin, you can run yarn dev & yarn build very fast in your Reproduction repo.
It might be an option.

Until this bug is fixed, this is a good workaround. Thank you!

@Shinigami92 Shinigami92 added has workaround p2-edge-case Bug, but has workaround or limited in scope (priority) labels Apr 15, 2021
@Niputi
Copy link
Contributor

Niputi commented Oct 30, 2021

I can reproduce JavaScript heap out of memory error on your reproduction but once I update deps to latest version I'm no longer getting the error but is very slow.

it builds much faster when importing icon like this

import Add16 from "carbon-icons-svelte/lib/Add16";

update of deps will require a change in vite config

import { svelte } from "@sveltejs/vite-plugin-svelte";

image

@Niputi Niputi closed this as completed Oct 30, 2021
@github-actions github-actions bot locked and limited conversation to collaborators Nov 14, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
has workaround p2-edge-case Bug, but has workaround or limited in scope (priority)
Projects
None yet
Development

No branches or pull requests

4 participants