Moment Timezone Data Webpack Plugin

Common errors

• TypeError: MomentTimezoneDataPlugin is not a constructor

  cause The `new` keyword was omitted when instantiating the plugin in the webpack configuration.
  fix Change `plugins: [MomentTimezoneDataPlugin({...})]` to `plugins: [new MomentTimezoneDataPlugin({...})]`.

• Module not found: Error: Can't resolve 'moment-timezone' in...

  cause The `moment-timezone` package is not installed or not resolvable by webpack.
  fix Install `moment-timezone` using `npm install moment-timezone` or `yarn add moment-timezone`.

• ERROR in [MomentTimezoneDataPlugin] Error: The timezone data for '...' is not available in the specified range...

  cause Your application is attempting to use a timezone or date range that was stripped by the plugin configuration.
  fix Adjust the plugin options (`startYear`, `endYear`, `matchZones`, `matchCountries`) to include the necessary timezone data. Thoroughly test all time-related functionalities.

• Webpack compilation error: Cannot read properties of undefined (reading 'compilation')

  cause Often indicates an incompatibility between the plugin and the installed `webpack` version, or an issue with the webpack configuration itself where the plugin is not correctly initialized.
  fix Verify that your `webpack` version (`4.x.x` or `5.x.x`) is compatible with the plugin version. Ensure `webpack` and `moment-timezone-data-webpack-plugin` are correctly installed and configured in your `package.json` and `webpack.config.js`.

Warnings

• gotcha Over-aggressive data stripping can lead to runtime errors where `moment-timezone` reports missing data for dates or zones your application unexpectedly needs. Always thoroughly test your application after configuring this plugin.
  Fix: Carefully define `startYear`, `endYear`, `matchZones`, and `matchCountries` options. Consider a wider range or more zones if unsure, and use a staging environment for testing.
• breaking As of v1.5.1, the plugin no longer officially tests against NodeJS 8 or 10. While no explicit code changes were made to break compatibility, usage on these End-of-Life Node.js versions is not guaranteed and unsupported.
  Fix: Upgrade your build environment to a supported Node.js version (e.g., Node.js 16 or newer) to ensure compatibility and receive official support.
• gotcha Incorrectly installing `moment-timezone` or `webpack` as non-peer dependencies, or incompatible versions, can cause build failures. The plugin relies on specific `webpack` APIs and `moment-timezone`'s internal structure.
  Fix: Ensure `moment-timezone` (`>=0.1.0`) and `webpack` (`4.x.x` or `5.x.x`) are installed as peer dependencies or compatible versions in your project.
• gotcha The plugin requires `new` keyword when instantiating in `webpack.config.js`. Forgetting it will result in an error indicating the plugin is not a constructor.
  Fix: Always instantiate the plugin with `new MomentTimezoneDataPlugin({...})` in your webpack configuration file.

Install

• npm install moment-timezone-data-webpack-plugin npm
• yarn add moment-timezone-data-webpack-plugin yarn
• pnpm add moment-timezone-data-webpack-plugin pnpm

Imports

• default
  wrong:

  import MomentTimezoneDataPlugin from 'moment-timezone-data-webpack-plugin';

  correct:

  const MomentTimezoneDataPlugin = require('moment-timezone-data-webpack-plugin');

  For `webpack.config.js` using CommonJS, the plugin is a default export requiring direct assignment.
• default
  wrong:

  const MomentTimezoneDataPlugin = require('moment-timezone-data-webpack-plugin');

  correct:

  import MomentTimezoneDataPlugin from 'moment-timezone-data-webpack-plugin';

  For `webpack.config.mjs` or `webpack.config.ts` (with appropriate `module` resolution), the plugin is the default export.
• MomentTimezoneDataPlugin
  wrong:

  plugins: [MomentTimezoneDataPlugin({ /* options */ })]

  correct:

  plugins: [new MomentTimezoneDataPlugin({ /* options */ })]

  Regardless of import style, the plugin must be instantiated with the `new` keyword within the `plugins` array of your webpack configuration.

Quickstart

This Webpack configuration demonstrates how to integrate `moment-timezone-data-webpack-plugin` to filter timezone data. It sets a date range (2020-2030), includes zones starting with 'Europe/', and all zones for Australia, significantly reducing the bundled `moment-timezone` data size.

import path from 'path';
import { Configuration } from 'webpack';
import MomentTimezoneDataPlugin from 'moment-timezone-data-webpack-plugin';

const config: Configuration = {
  mode: 'production',
  entry: './src/index.ts', // Assuming a simple entry point
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  plugins: [
    // This example limits timezone data to specific years and only for zones matching 'Europe/'
    // and also includes all zones for 'AU' (Australia).
    // It's crucial to ensure these settings cover all needed timezones for your application.
    new MomentTimezoneDataPlugin({
      startYear: 2020,
      endYear: 2030,
      matchZones: /Europe\//, // Only include zones matching 'Europe/'
      matchCountries: ['AU'], // Include all zones for Australia
      cacheDir: path.resolve(__dirname, '.moment-timezone-cache') // Optional: custom cache directory
    }),
    // Optionally, if also stripping locales
    // new MomentLocalesWebpackPlugin({
    //   localesToKeep: ['en', 'es'],
    // }),
  ],
};

export default config;