rollupjssnowpackskypack-cdn

Getting Snowpack to work with the Skypin Rollup plugin


I'm trying to get rollup-plugin-skypin to work with snowpack through snowpack-plugin-rollup-bundle. I have a small project set up like so:

snowpack.config.mjs

// Snowpack Configuration File
// See all supported options: https://www.snowpack.dev/reference/configuration
import { skypin } from 'rollup-plugin-skypin';

/** @type {import("snowpack").SnowpackUserConfig } */
export default {
  mount: {
    src: '/src/'
  },
  plugins: [
    [
      "snowpack-plugin-rollup-bundle",
      {
        extendConfig: (config) => {
          config.inputOptions.plugins.push(skypin())
          config.inputOptions.input = 'index.js'
          config.outputOptions.file = 'dist/index.js'
          config.outputOptions.format = 'esm'
          return config
        }
      }
    ]
  ],
  packageOptions: {
    /* rollup: {
      options: {
        input: 'src/index.js',
        output: {
          file: 'dist/index.js',
          format: 'esm'
        }
      }
    } */
  },
  devOptions: {
    /* ... */
  },
  buildOptions: {
    clean: true
  },
};

package.json

{
  "name": "test",
  "version": "1.0.0",
  "license": "MIT",
  "type": "module",
  "devDependencies": {
    "hueman": "^2.1.3",
    "rollup": "^2.56.3",
    "rollup-plugin-skypin": "^1.1.2",
    "skypin": "^2.0.10",
    "snowpack": "^3.8.8",
    "snowpack-plugin-rollup-bundle": "^0.4.4"
  },
  "scripts": {
    "start": "snowpack dev",
    "build": "snowpack build"
  }
}

index.js

// src/index.js
import { hueman } from 'hueman';

console.log(hueman(100,1.0,0.5));

And then get this error when running yarn build:

[17:48:10] [snowpack] ! optimizing build...
Error fetching module from skypack. Returning empty strings
ReferenceError: fetch is not defined
    at fetchSkypack (file:///C:/test/node_modules/skypin/dist/browser.mjs:52:22)
    at lookup (file:///C:/test/node_modules/skypin/dist/browser.mjs:47:61)
    at skypin (file:///C:/test/node_modules/skypin/dist/browser.mjs:40:18)
    at Object.resolveId (file:///C:/test/node_modules/rollup-plugin-skypin/dist/index.mjs:27:31)
    at C:\test\node_modules\rollup\dist\shared\rollup.js:20218:25
[17:48:10] [snowpack-plugin-rollup-bundle] Error: Entry module cannot be external (index.js).
error Command failed with exit code 1.

What does this error mean? Is it possible to get everything to work together?


Solution

  • Turns out this functionality is built into Snowpack, but took some digging to find it.

    https://github.com/TropicalRaisel/avalanche