globalize-webpack-plugin

3.0.0 verified Sat Apr 25 auth: no javascript

Webpack plugin for Globalize.js that handles CLDR data loading, formatter precompilation, and locale chunk splitting. Current stable version is 3.0.0, compatible with Webpack 4 and Globalize ^1.3.0. Key differentiator: optimizes Globalize performance by precompiling formatters at build time for production, while allowing dynamic CLDR loading during development for faster HMR. Requires splitting code into vendor, globalize-compiled, and application chunks. Supports multiple locales and output customization.

Common errors

error Module not found: Can't resolve 'cldr-data' in ... ↓

cause Missing dependency 'cldr-data'.

fix

Install cldr-data as a dev dependency: npm install cldr-data --save-dev.

error Globalize is not defined ↓

cause Globalize not included in the bundle or not loaded before plugin invocation.

fix

Ensure globalize is included in a vendor chunk and imported in your entry file.

error Invalid configuration. 'GlobalizePlugin' is not a valid plugin. ↓

cause Typo or incorrect instantiation in webpack config.

fix

Check that the plugin is properly required and instantiated: new GlobalizePlugin({ ... }).

error globalize-compiled-en.[hash].js chunk not emitted ↓

cause SupportedLocales not matching any locale in CLDR data or messages.

fix

Verify that the locales listed in supportedLocales exist in your CLDR data and message files.

Warnings

breaking Webpack 4 required from v3.0.0; earlier Webpack versions are not supported. ↓

fix Upgrade to webpack 4 or use globalize-webpack-plugin v2.x for webpack 3, v1.x for webpack 2, v0.x for webpack 1.

breaking Node.js <4.3.0 dropped in v1.0.0. ↓

fix Upgrade Node.js to >=4.3.0.

deprecated Support for webpack 1 ended with v0.x releases. ↓

fix Migrate to webpack 2+ and use corresponding plugin version.

gotcha Must split code into at least three chunks: vendor, globalize-compiled, and application (production only). ↓

fix Configure entry points to separate vendor libraries (including 'globalize') from application code; plugin will generate globalize-compiled chunks.

gotcha Plugin does not work with create-react-app's ModuleScopePlugin without workaround (known issue). ↓

fix Upgrade to v1.0.1 or later, which includes a fix for compatibility with ModuleScopePlugin.

gotcha Development mode (production: false) does not precompile formatters; CLDR data must be available at runtime. ↓

fix Ensure CLDR data is loaded in development or use production mode for precompilation.

Install

npm install globalize-webpack-plugin

yarn add globalize-webpack-plugin

pnpm add globalize-webpack-plugin

Imports

GlobalizePlugin

wrong

import GlobalizePlugin from 'globalize-webpack-plugin';

correct

const GlobalizePlugin = require('globalize-webpack-plugin');

Plugin is CJS; ESM import will fail unless using a CJS interop loader.

n/a

wrong

Using the plugin without providing required options (production, supportedLocales).

correct

In webpack.config.js: plugins: [new GlobalizePlugin({ ... })]

Must be instantiated with options; see README for full option list.

n/a

wrong

Bundling everything together without chunking; plugin expects at least three chunks.

correct

Include 'globalize' in vendor chunk and 'globalize-compiled-*' as separate chunks.

Restriction: split code into vendor, globalize-compiled, and app chunks.

Quickstart

Example webpack configuration using GlobalizePlugin with production/development mode, English and Spanish locales, and custom output filenames.

const path = require('path');
const webpack = require('webpack');
const GlobalizePlugin = require('globalize-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new GlobalizePlugin({
      production: process.env.NODE_ENV === 'production',
      developmentLocale: 'en',
      supportedLocales: ['en', 'es'],
      messages: 'messages/[locale].json',
      output: 'globalize-compiled-[locale].[hash].js'
    })
  ]
};