Skip to content
New issue

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

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

Already on GitHub? # 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
# for free to subscribe to this conversation on GitHub. Already have an account? #.
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