Babel Plugin for Wallace

0.17.1 verified Sat Apr 25 auth: no javascript

This package provides the necessary Babel plugin for the Wallace framework (version 0.17.1, actively developed). It transforms JSX and other syntax to enable features like server-side rendering and component hydration within Wallace applications. Unlike generic Babel presets, this plugin is tailored specifically for Wallace's runtime, handling Wallace-specific directives and optimizations. It ships with TypeScript definitions and is typically used alongside the core `wallace` package. The plugin follows the release cadence of the main Wallace framework, with frequent updates to match new features.

Common errors

error Error: Cannot find module 'babel-plugin-wallace' ↓

cause The package is not installed or not in node_modules.

fix

Run npm install babel-plugin-wallace --save-dev.

error TypeError: wallace is not a function ↓

cause Wrong import style: using default import when package exports a named function.

fix

Change to import { wallacePlugin } from 'babel-plugin-wallace' or use require('babel-plugin-wallace').default.

error Error: Babel 7.0.0 is required but you have 6.26.3 ↓

cause Incompatible Babel version.

fix

Upgrade to Babel 7: npm install @babel/core --save-dev and update config to use @babel/ prefix.

error SyntaxError: Unexpected token (1:1) with JSX ↓

cause Missing Babel preset for JSX (used by default in create-react-app).

fix

Add '@babel/preset-react' to presets and ensure this plugin runs after.

Warnings

breaking Version 0.15.0 changed the plugin export from default to named export. ↓

fix Update import from 'import wallace from ...' to 'import { wallacePlugin } from ...' or adjust require accordingly.

deprecated The `sourceMap` option is deprecated in favor of Babel's built-in source map support. ↓

fix Remove `sourceMap` option and rely on Babel's `sourceMaps: true` in config.

gotcha Requires Babel 7 or higher. Using with Babel 6 will fail silently or throw errors. ↓

fix Ensure @babel/core version is >=7.0.0.

gotcha The plugin does not support TypeScript JSX (TSX) natively; you need to combine with @babel/preset-typescript. ↓

fix Add '@babel/preset-typescript' before this plugin in the plugins array.

Install

npm install babel-plugin-wallace

yarn add babel-plugin-wallace

pnpm add babel-plugin-wallace

Imports

default

wrong

const wallace = require('babel-plugin-wallace')

correct

import wallace from 'babel-plugin-wallace'

ESM import is preferred. The default export is a Babel plugin function.

PluginConfig

wrong

const { PluginConfig } = require('babel-plugin-wallace')

correct

import type { PluginConfig } from 'babel-plugin-wallace'

PluginConfig is a TypeScript type, not a runtime value. Use type import.

createWallacePlugin

wrong

import createWallacePlugin from 'babel-plugin-wallace'

correct

import { createWallacePlugin } from 'babel-plugin-wallace'

Export is named, not default.

babelPluginWallace

wrong

import babelPluginWallace from 'babel-plugin-wallace'

correct

import { babelPluginWallace } from 'babel-plugin-wallace'

Named export. Double-check exact name; this may have been renamed.

Quickstart

Shows how to configure the Wallace Babel plugin in babel.config.js and use it programmatically with @babel/core to transform JSX.

// babel.config.js
import wallacePlugin from 'babel-plugin-wallace';

export default {
  plugins: [
    [wallacePlugin, {
      // Options such as 'sourceMap' or 'target'
      sourceMap: true,
      target: 'server' // or 'client'
    }]
  ]
};

// In a script:
import { transformSync } from '@babel/core';
const code = `<div>Hello</div>`;
const result = transformSync(code, {
  plugins: [['babel-plugin-wallace', { target: 'client' }]]
});
console.log(result.code);