snapsvg-cjs

0.0.6 verified Sat Apr 25 auth: no javascript

snapsvg-cjs is a CommonJS wrapper for SnapSVG (version 0.0.6), enabling seamless use with Webpack without import-loader configuration. It repackages the original AMD-formatted SnapSVG library into CommonJS format. The package has a peer dependency on eve (~0.5.1). It is a thin wrapper with slow updates; consider @snapsvg/core for modern ESM support.

Common errors

error Module not found: Can't resolve 'snapsvg-cjs' ↓

cause Package not installed or missing in node_modules.

fix

npm install snapsvg-cjs eve@~0.5.1

error Uncaught TypeError: Snap is not a constructor ↓

cause Named import instead of default import.

fix

Use: import Snap from 'snapsvg-cjs'

error Error: Cannot find module 'eve' ↓

cause Missing peer dependency eve.

fix

npm install eve@~0.5.1

Warnings

gotcha Default export only; named import { Snap } will be undefined. ↓

fix Use default import: import Snap from 'snapsvg-cjs'

deprecated Package is unmaintained; consider @snapsvg/core for updates. ↓

fix Migrate to @snapsvg/core (ESM) or snapsvg-client (CJS)

gotcha Peer dependency eve@~0.5.1 must be installed manually. ↓

fix Run: npm install eve@~0.5.1

Install

npm install snapsvg-cjs

yarn add snapsvg-cjs

pnpm add snapsvg-cjs

Imports

Snap

wrong

const Snap = require('snapsvg-cjs')

correct

import Snap from 'snapsvg-cjs'

ESM import is common; CJS require also works.

default
wrong
```
import { Snap } from 'snapsvg-cjs'
```
correct
```
import Snap from 'snapsvg-cjs'
```
Default export only; named export 'Snap' does not exist.
snap.svg (full path)
wrong
```
import Snap from 'snapsvg-cjs/dist/snap.svg'
```
correct
```
import Snap from 'snapsvg-cjs'
```
Direct path to the bundled file is unnecessary; package entry point handles it.

Quickstart

Initializes SnapSVG, draws a circle, and animates its radius.

import Snap from 'snapsvg-cjs';

// Create an SVG element
const s = Snap(800, 600);
document.body.appendChild(s.node);

// Draw a circle
const circle = s.circle(150, 150, 100);
circle.attr({
  fill: '#f06',
  stroke: '#000',
  strokeWidth: 5
});

// Animate
circle.animate({ r: 50 }, 1000);

// Access the SVG node
console.log(s.node);