crossorigin-webpack-plugin

1.0.0 verified Sat Apr 25 auth: no javascript

Webpack plugin to add `crossorigin` attribute to script tags generated by html-webpack-plugin. Supports webpack v2–v5 and html-webpack-plugin v2–v5. Zero-config, defaults to `anonymous`. Lightweight alternative to manually editing templates or using HtmlWebpackPlugin hooks. Stable release 1.0.0 with no further updates since 2018.

Common errors

error TypeError: CrossoriginWebpackPlugin is not a constructor ↓

cause Using ES6 import instead of CommonJS require.

fix

Replace 'import CrossoriginWebpackPlugin from ...' with 'const CrossoriginWebpackPlugin = require('crossorigin-webpack-plugin');'

error Error: Plugin could not find any script tags to process. Ensure HtmlWebpackPlugin is placed before this plugin. ↓

cause CrossoriginWebpackPlugin placed before HtmlWebpackPlugin in plugins array.

fix

Reorder plugins: place HtmlWebpackPlugin before CrossoriginWebpackPlugin.

error Module not found: Error: Can't resolve 'crossorigin-webpack-plugin' ↓

cause Package not installed or missing from package.json.

fix

Run 'npm install --save-dev crossorigin-webpack-plugin' or 'yarn add -D crossorigin-webpack-plugin'.

error Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. ↓

cause Using plugin in webpack config without required html-webpack-plugin.

fix

Install and add HtmlWebpackPlugin to plugins array before CrossoriginWebpackPlugin.

Warnings

gotcha Plugin must be placed after HtmlWebpackPlugin in the plugins array; otherwise it won't find script tags to modify. ↓

fix Ensure HtmlWebpackPlugin instance comes before CrossoriginWebpackPlugin in the plugins array.

deprecated Option 'crossorigin' is misspelled as 'crossorigin' (correct spelling: crossorigin). Using 'crossorigin' will be ignored silently in future versions. ↓

fix Use 'crossorigin' (lowercase) as the property name.

gotcha Plugin does not support ES module imports; importing with ES6 'import' will fail. ↓

fix Use CommonJS require: const CrossoriginWebpackPlugin = require('crossorigin-webpack-plugin');

gotcha This plugin works only with html-webpack-plugin v2/v3/v4/v5; newer versions may break compatibility. ↓

fix Check version compatibility with your html-webpack-plugin; pin to known working versions.

gotcha Plugin only adds attribute to <script> tags; does not affect <link> tags for preloads or other elements. ↓

fix For other elements, manually modify template or use HtmlWebpackPlugin hooks.

Install

npm install crossorigin-webpack-plugin

yarn add crossorigin-webpack-plugin

pnpm add crossorigin-webpack-plugin

Imports

CrossoriginWebpackPlugin

wrong

import CrossoriginWebpackPlugin from 'crossorigin-webpack-plugin'

correct

const CrossoriginWebpackPlugin = require('crossorigin-webpack-plugin')

Package does not ship ESM; CommonJS require is required.

CrossoriginWebpackPlugin

wrong

new CrossoriginWebpackPlugin({ crossorigin: 'use-credentials' })

correct

new CrossoriginWebpackPlugin()

Option key is 'crossorigin', not 'credentials'.

CrossoriginWebpackPlugin

wrong

plugins: [new CrossoriginWebpackPlugin(), new HtmlWebpackPlugin()]

correct

plugins: [new HtmlWebpackPlugin(), new CrossoriginWebpackPlugin()]

Must be placed after HtmlWebpackPlugin in plugins array.

Quickstart

Adds crossorigin='anonymous' to all script tags in HTML output via html-webpack-plugin. Requires CommonJS require, plugin order matters.

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CrossoriginWebpackPlugin = require('crossorigin-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: { path: __dirname + '/dist', filename: 'bundle.js' },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new CrossoriginWebpackPlugin(), // defaults to anonymous
    // or with custom: new CrossoriginWebpackPlugin({ crossorigin: 'use-credentials' })
  ]
};