CODEWITHSUNDEEP
javascriptrolluprollupjs
Jujubes
Jujubes

Reputation: 434

How to get Dynamic Imports working on Rollup.js

I am trying to rollup a icon library using vue

I have a folder full of .svg

I run a command to scan the folders with all the .svgs and convert them to

export default `svg`;

and change the file to iconName.js

In the .vue document i require the correct file using :

Promise.resolve(
        import(`./icons/${this.iconSet}/${this.icn}`)
          .then(v => {
            console.log('required', v)
            this.svg = v.default
          })
          .catch(e => {
            console.log('err', e)
            this.error = true
          })
      )

In development, the .vue icon component works. In production as an npm package i get:

TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string or Uint8Array without null bytes. Received 'B:\\icons\\node_modules\\\u0000commonjs-dynamic-register:\\icons\\brands\\500px.js\\package.json'

-> 500px.js is the first file in the icon pack and not the one being required by the vue component. -> No clue why package.json is being appended (the files are contained within the dist folder - hoping relative paths would work but no luck

The above statement seems to be rendered from rollup via:

require("\u0000commonjs-dynamic-register:B:/icons/dist/icons/brands/500px.js")

B:/icons/dist -> the computer's path to the repo -> i believe i have to shorten it to:

require("\u0000commonjs-dynamic-register:/icons/brands/500px.js")

Which gives me the same error

I'm lost and have spent days looking into this thanks

https://github.com/mjmnagy/rollup-error-Sept-01-2020

Upvotes: 2

Views: 2853

Answers (1)

Jujubes
Jujubes

Reputation: 434

This is the issue:

  **import(`./icons/${this.iconSet}/${this.icn}`)**

Rollup doesnt handle "dynamic"/lazy loading like this as it doesnt know what or what not to include(no tree-shaking)

If you change the import to include the relevant documents ie:

import * as icons from  './icons'

There isnt an issue with rollup However there is now an issue that you have included every .svg which is a lot to load.

if you refer to font-awesome their package actually forces u to specifically name icon packages or specific icons.

My solution as i want them all to be available on demand, was to kill this and move into .svg sprites

HTH

Upvotes: 1

Related Questions