Vite Plugin Blocklet

0.14.6 verified Mon Apr 27 auth: no javascript

A Vite library plugin that enhances development of ArcBlock blocklets. Current stable version is 0.14.6. It integrates with Vite 5+ and provides utilities like createBlockletPlugin for Vite config and setupClient for backend Express apps. Key differentiators: it bridges Vite development with ArcBlock's blocklet framework, supports both front-end and back-end projects, and offers flexible configuration via vite.config.js. Release cadence is not documented but appears active. Requires Node.js >=20.

Common errors

error TypeError: createBlockletPlugin is not a function ↓

cause Incorrect import: using default import instead of named import.

fix

Change to: import { createBlockletPlugin } from 'vite-plugin-blocklet';

error ERR_REQUIRE_ESM: require() of ES Module ↓

cause Trying to require an ES module in a CommonJS context. The package may be ESM-only in newer versions.

fix

Use dynamic import() or switch to ESM? For now, use named exports with require? Actually, the package appears to support both, but ensure your script is CommonJS (no type:module).

error Error: Cannot find module 'vite' ↓

cause Vite peer dependency not installed.

fix

Run: npm install vite@^5

Warnings

breaking Requires Node.js >=20.0.0 ↓

fix Update Node.js to version 20 or higher.

breaking Peer dependency Vite >=5 ↓

fix Ensure your project uses Vite 5 or higher.

gotcha No default export; only named exports available ↓

fix Use named imports like createBlockletPlugin or setupClient.

deprecated Usage without nodePolyfills may cause errors in browser environment ↓

fix Add vite-plugin-node-polyfills with protocolImports:true as shown in examples.

Install

npm install vite-plugin-blocklet

yarn add vite-plugin-blocklet

pnpm add vite-plugin-blocklet

Imports

createBlockletPlugin
wrong
```
const createBlockletPlugin = require('vite-plugin-blocklet')
```
correct
```
import { createBlockletPlugin } from 'vite-plugin-blocklet'
```
For Vite config files (ESM context), use import. CommonJS require works in Node.js scripts outside Vite.
setupClient
wrong
```
import { setupClient } from 'vite-plugin-blocklet'
```
correct
```
const { setupClient } = require('vite-plugin-blocklet')
```
For backend scripts (CommonJS), use require. ESM import may work in Node.js with type:module, but examples use CommonJS.
default export
wrong
```
const plugin = require('vite-plugin-blocklet')
```
correct
```
import plugin from 'vite-plugin-blocklet'
```
The package does not export a default; named exports only. Using default import will result in undefined.

Quickstart

Shows how to set up a basic Vite project with React and the blocklet plugin using createBlockletPlugin.

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { createBlockletPlugin } from 'vite-plugin-blocklet';

export default defineConfig(async () => {
  return {
    plugins: [react(), createBlockletPlugin()],
  };
});