Snowpack Rollup Bundling Plugin

Common errors

• Error: Cannot find module 'rollup'

  cause The 'rollup' package, a peer dependency, has not been installed in your project.
  fix Install Rollup: `npm install --save-dev rollup` or `yarn add --dev rollup`.

• Error: [snowpack-plugin-rollup-bundle] Entrypoint 'src/index.js' not found. Entrypoints must refer to the build/ directory.

  cause The `entrypoints` option specifies a path from the source directory (`src/`) instead of the Snowpack build output directory (`build/_dist_/`).
  fix Adjust the `entrypoints` in your `snowpack.config.js` to point to the built files, e.g., `"build/_dist_/index.js"`.

• TypeError: Cannot read properties of undefined (reading 'push') when extending Rollup config

  cause Attempting to push to `config.inputOptions.plugins` or `config.outputOptions.plugins` when the `plugins` array does not exist or is undefined in the default config.
  fix Initialize the `plugins` array if it doesn't exist before pushing to it: `config.inputOptions.plugins = config.inputOptions.plugins || []; config.inputOptions.plugins.push(yourPlugin());`

Warnings

• breaking The plugin option `emitHtml` was renamed to `emitHtmlFiles` in `v0.3.3`. Older configurations using `emitHtml` will no longer function correctly.
  Fix: Update your Snowpack configuration to use `emitHtmlFiles: true` instead of `emitHtml: true`.
• gotcha The `entrypoints` option is required and expects paths relative to your Snowpack `build/` directory (e.g., `build/_dist_/index.js`), not your source `src/` directory. Providing `src/` paths will result in files not being found.
  Fix: Ensure all `entrypoints` paths provided in the plugin configuration correctly reference files within the `build/` output directory, typically `build/_dist_/`.
• gotcha Both `rollup` and `snowpack` are peer dependencies. They must be installed separately in your project alongside `snowpack-plugin-rollup-bundle` for the plugin to function.
  Fix: Run `npm install --save-dev rollup snowpack` or `yarn add --dev rollup snowpack` to install the peer dependencies.
• gotcha Snowpack, the host tool for this plugin, is largely unmaintained by its original creators, who now recommend migration to Vite. This plugin is primarily for existing Snowpack projects and is unlikely to receive significant new features or extensive support.
  Fix: For new projects, consider modern build tools like Vite. For existing projects, be aware of the limited ongoing support for the Snowpack ecosystem.
• gotcha Early versions (prior to `v0.4.4`) had issues with path resolution on Windows operating systems due to incorrect path separators. This was fixed in `v0.4.4`.
  Fix: Upgrade to `v0.4.4` or later to ensure proper functionality on Windows.

Install

• npm install snowpack-plugin-rollup-bundle npm
• yarn add snowpack-plugin-rollup-bundle yarn
• pnpm add snowpack-plugin-rollup-bundle pnpm

Imports

• snowpack-plugin-rollup-bundle
  wrong:

  import { snowpackPluginRollupBundle } from 'snowpack-plugin-rollup-bundle';

  correct:

  // snowpack.config.js
  module.exports = {
    plugins: [
      ['snowpack-plugin-rollup-bundle', { /* options */ }]
    ]
  };

  This plugin is configured by adding its name and options directly to the `plugins` array in your `snowpack.config.js`. Snowpack config files typically use CommonJS modules.
• awesomeRollupPlugin

  const awesomeRollupPlugin = require('awesome-rollup-plugin');

  When using `extendConfig` to add custom Rollup plugins, you typically `require` them within your `snowpack.config.js` file, which is a CommonJS context.
• SnowpackConfig

  const plugins = [
    // ...
    ["snowpack-plugin-rollup-bundle", { /* options */ }]
  ];
  module.exports = {
    plugins: plugins
  };

  The entire `snowpack.config.js` file is usually a CommonJS module exporting the configuration object.

Quickstart

This quickstart shows a typical `snowpack.config.js` setup for `snowpack-plugin-rollup-bundle`, demonstrating how to enable HTML file rewriting, specify entrypoints, and extend the underlying Rollup configuration with custom plugins or options.

// snowpack.config.js
const awesomeRollupPlugin = require('awesome-rollup-plugin'); // Example for extending config

module.exports = {
  mount: {
    'src': '/',
  },
  plugins: [
    // Other Snowpack plugins...
    [
      "snowpack-plugin-rollup-bundle",
      {
        emitHtmlFiles: true, // Set to true to rewrite script tags in HTML
        preserveSourceFiles: false,
        entrypoints: [
          "build/_dist_/index.js",
          "build/_dist_/entrypoints/*.js",
        ], // Required: glob patterns or array of paths relative to build/
        extendConfig: (config) => {
          // Example: Add a custom Rollup plugin
          config.inputOptions.plugins.push(awesomeRollupPlugin());
          // Example: Override output options
          config.outputOptions = {
            ...config.outputOptions,
            chunkFileNames: 'chunks/[name]-[hash].js',
            assetFileNames: 'assets/[name]-[hash][extname]'
          };
          return config;
        }
      }
    ]
  ],
  build: {
    out: 'dist',
    metaDir: '_snowpack_',
  },
  optimize: {
    bundle: false, // Ensure Snowpack's built-in bundler is off if using this plugin
  },
};