Library mode: How should I manage external dependencies?

[jimmycallin]

Let's say I'm building a library with a few dependencies: react, moment, lodash, and uuid, and I want to distribute this in both ES and UMD format.

I'm also wary of the final bundle size of the user's application.

React should go into rollupOptions.external, since it requires a single React instance is run in the application. But what about the rest?

In my mind, the library should avoid including any external dependencies, since these risk being duplicated by the library user's application if they were to use the same dependencies.

Thus, I imagine my vite.config.js file to look like this:

const path = require("path");
const { defineConfig } = require("vite");

module.exports = defineConfig({
  build: {
    // Let the library user control minification in their own bundler
    minify: false,
    sourcemap: true,
    lib: {
      entry: path.resolve(__dirname, "source/index.js"),
      name: "my-tiny-library",
      fileName: (format) => `my-tiny-library.${format}.js`,
    },
    rollupOptions: {
      // Add _all_ external dependencies here
      external: ["moment", "uuid", "lodash", "react"],
      output: {
        globals: {
          moment: "moment",
          uuid: "uuid",
          lodash: "lodash"
          react: "react"
        },
      },
    },
  },
});

package.json should contain all dependencies listed in externals as dependencies, and not devDependencies or peerDependencies.

The main con I see with this is that anybody using UMD bundles would need to include additional script tags with all dependencies from other sources, e.g: <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>, and that these would not be tree shaked, thus requiring larger bundles. That said, I think that's an okay tradeoff.

Do you agree with this approach, or do you recommend something else?

Thanks

[yarinsa]

+1

[graup]

I tried using rollup-plugin-node-externals to do this automatically, but it doesn't seem to work. It works if I manually define rollupOptions: { external: ['react'] }. Maybe we can find out why this doesn't work.

import depsExternal from 'rollup-plugin-node-externals';

export default defineConfig({
  plugins: [
    depsExternal(),
  ],
  ...
});

[skript53]

+1

[dparker2]

Any insight as to why this plugin doesn't work?

[davidmyersdev]

@jimmycallin what approach did you end up using here? I'm running into the same problem, and I'd love to know what's recommended.

[jonayet]

Hi,

I'd also faced the same issue and after spending some time found that,
rollup-plugin-node-externals plugin is missing enforce attribute which I suppose is required to work with Vite.

As a workaround, I did following,

Created a wrapper plugin file,

// node-externals.ts
import { Plugin } from 'vite';
import { createRequire } from 'module';

// following 2 lines are because the types from `rollup-plugin-node-externals` seems not working
const require = createRequire(import.meta.url);
const { externals } = require('rollup-plugin-node-externals');

export function nodeExternals(): Plugin {
  return {
    enforce: 'pre',
    ...externals(),
  };
}

and used the wrapper plugin in Vite config,

import { nodeExternals } from './node-externals'

// vite config
plugins: [
  nodeExternals(),
]

Let me know if it helps.

Thanks!

[davidmyersdev]

I appreciate you following up. I actually ended up making a Vite plugin for this since I ran into it for multiple projects now. https://github.com/davidmyersdev/vite-plugin-externalize-deps

[segevfiner]

Maybe just {...nodeExternals(), enforce: 'pre'}? Though maybe the maintainer of that plugin would be willing to include it by default so the plugin just works with Vite.

[Haschtl]

@segevfiner
Your suggestion works!
And I think the current version has type annotations, but still the enforce-flag is no option according to the docs

[cdpark0530]

I finally found @davidmyersdev's great work which actually works and which is without so many configuration in which vite claims 'no configuration' 🙄 I think #6198 (reply in thread) should be marked as an answer so everyone can find it easily.
I tried: @esbuild-plugins/node-globals-polyfill, @esbuild-plugins/node-modules-polyfill, vite-plugin-node-polyfills, rollup-plugin-node-externals, vite-plugin-ngmi-polyfill

[U-4-E-A]

@davidmyersdev I love you.

[iwarner]

I saw this somewhere else

Import Package

// Package
import pkg from './package.json'

And then external exclude these

    rollupOptions: {
      // External packages that should not be bundled into your library.
      // external: ['react', 'react-dom', 'react/jsx-runtime']
      external: Object.keys((pkg as any).dependencies || {})
    }