{"id":15830,"library":"snowpack","title":"Snowpack","description":"Snowpack is a lightweight, ESM-powered frontend build tool designed for rapid development cycles by serving applications unbundled. It introduced \"O(1) Build Tooling,\" where only changed files are recompiled, leading to near-instant Hot Module Replacement (HMR) and dev server startup times (under 50ms). Unlike traditional bundlers that rebuild entire applications on every save, Snowpack leverages native ES Modules in development, effectively offloading complex bundling tasks to a dedicated production build step using tools like Webpack or Rollup. The project's last stable release was 3.8.8. While Snowpack pioneered a novel approach to frontend development and gained significant traction, it has since been largely superseded. The project is no longer actively maintained, with its core ideas and principles having evolved into other actively developed tools, most notably Vite, which was created by Snowpack's original architect. This makes it an unsuitable choice for new projects requiring ongoing support.","status":"abandoned","version":"3.8.8","language":"javascript","source_language":"en","source_url":"https://github.com/snowpackjs/snowpack","tags":["javascript","bundle","build","build tool","web","esm","esbuild","wasm","typescript"],"install":[{"cmd":"npm install snowpack","lang":"bash","label":"npm"},{"cmd":"yarn add snowpack","lang":"bash","label":"yarn"},{"cmd":"pnpm add snowpack","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Programmatic API for starting the development server. Snowpack is primarily ESM-driven.","wrong":"const { startServer } = require('snowpack');","symbol":"startServer","correct":"import { startServer } from 'snowpack';"},{"note":"Programmatic API for initiating a production build.","wrong":"const { build } = require('snowpack');","symbol":"build","correct":"import { build } from 'snowpack';"},{"note":"TypeScript type for configuration objects, useful when extending Snowpack or writing plugins.","symbol":"SnowpackConfig","correct":"import type { SnowpackConfig } from 'snowpack';"}],"quickstart":{"code":"{\n  \"name\": \"my-snowpack-app\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"start\": \"snowpack dev\",\n    \"build\": \"snowpack build\"\n  },\n  \"devDependencies\": {\n    \"snowpack\": \"^3.8.8\",\n    \"typescript\": \"^4.0.0\"\n  }\n}\n\n// snowpack.config.mjs\nexport default {\n  mount: {\n    'public': '/',\n    'src': '/_dist_',\n  },\n  plugins: ['@snowpack/plugin-typescript'],\n  optimize: {\n    bundle: true,\n    minify: true,\n    target: 'es2018',\n  },\n  devOptions: {\n    open: 'none',\n  },\n  buildOptions: {\n    out: 'build',\n    clean: true,\n  },\n};\n\n// public/index.html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Snowpack App</title>\n</head>\n<body>\n  <div id=\"root\"></div>\n  <script type=\"module\" src=\"/_dist_/index.js\"></script>\n</body>\n</html>\n\n// src/index.ts\nconst app = document.getElementById('root');\nif (app) {\n  app.innerHTML = `<h1>Hello from Snowpack & TypeScript!</h1>`;\n}\n\nconsole.log('Snowpack development server is running...');\n","lang":"typescript","description":"This quickstart demonstrates a basic Snowpack project with TypeScript, including package scripts, a configuration file, an HTML entry point, and a TypeScript source file, ready for development and production builds."},"warnings":[{"fix":"Migrate to an actively maintained alternative like Vite (created by Snowpack's original author) or esbuild.","message":"Snowpack is no longer actively maintained and is not recommended for new projects. Its development has ceased, and its creators have moved on to other tools like Vite. Expect no further updates, security patches, or community support.","severity":"breaking","affected_versions":">=3.8.0"},{"fix":"Refer to the Snowpack v3 upgrade guide for specific migration steps. Update configuration properties (e.g., use 'buildOptions.baseUrl' directly) and adjust paths relative to the configuration file.","message":"Snowpack v3 introduced several breaking changes including configuration file renames (e.g., 'homepage' no longer sets 'baseUrl'), changes to relative path resolution in config files, and clearer build file naming conventions.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Always use `import` statements for Snowpack's API and ensure your project's entry points are configured for ESM (e.g., using `.mjs` extension or `\"type\": \"module\"` in `package.json`).","message":"Snowpack is an ESM-first tool. While it can process CommonJS dependencies, custom build scripts and programmatic API usage should adhere to ES Module syntax. Using `require()` for Snowpack's own API will lead to errors in most modern Node.js environments.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"For production, use a Snowpack bundler plugin (e.g., `@snowpack/plugin-webpack` or `@snowpack/plugin-rollup`) or pipe Snowpack's output to your preferred bundler for final optimization and bundling. This adds an extra step to the build process.","message":"By default, Snowpack's `build` command generates an unbundled output optimized for modern browsers with native ESM. For traditional bundled and optimized production deployments (e.g., for older browser support or single-file delivery), it explicitly recommends integrating a separate bundler like Webpack or Rollup via plugins.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Pin your Node.js version to one known to be compatible with Snowpack (e.g., Node.js 16.x or 18.x). Consider migrating to an actively maintained tool for long-term project viability.","message":"The Node.js `engines` field specifies `>=10.19.0`. As Snowpack is unmaintained, it may not be compatible with newer Node.js versions, potentially leading to unexpected errors or installation failures with future Node.js releases.","severity":"gotcha","affected_versions":">=3.8.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Replace `require()` calls with `import` statements. Ensure your configuration and source files are treated as ES Modules (e.g., by using `.mjs` extension for config, or `\"type\": \"module\"` in `package.json`).","cause":"Attempting to use CommonJS `require()` syntax within an ES Module context, which Snowpack typically operates in.","error":"ReferenceError: require is not defined in ES module scope"},{"fix":"Run `npm install snowpack` or `yarn add snowpack` in your project directory. If using global installation for CLI, ensure it's in your PATH or link it locally.","cause":"Snowpack is not installed or not found in the project's `node_modules`. This can happen if `npm install` was not run, or if it's installed globally but not linked correctly.","error":"Error: Cannot find module 'snowpack'"},{"fix":"Change the `port` option in your `snowpack.config.mjs` (e.g., `devOptions: { port: 3000 }`) or specify it via CLI (`snowpack dev --port 3000`).","cause":"Another process is already using the default development server port (8080) that Snowpack tries to bind to.","error":"Port 8080 is already in use"}],"ecosystem":"npm"}