TypeError: Class extends value undefined is not a constructor or null

[RyFive85]

When I add the following to my webpack.config.js:

const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity');

I get the following stack trace when trying to build.

TypeError: Class extends value undefined is not a constructor or null at Object. (%path%\node_modules\webpack-subresource-integrity\index.js:38:49) at Module._compile (%path%\node_modules\v8-compile-cache\v8-compile-cache.js:192:30) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (%path%\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at Object. (%path%\webpack.config.js:14:40) at Module._compile (%path%\node_modules\v8-compile-cache\v8-compile-cache.js:192:30) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (%path%\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at WEBPACK_OPTIONS (%path%\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13) at requireConfig (%path%\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6) at %path%\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17 at Array.forEach () at module.exports (%path%\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15) at %path%\node_modules\webpack-cli\bin\cli.js:71:45 at Object.parse (%path%\node_modules\webpack-cli\node_modules\yargs\yargs.js:576:18) at %path%\node_modules\webpack-cli\bin\cli.js:49:8 at Object. (%path%\node_modules\webpack-cli\bin\cli.js:366:3) at Module._compile (node:internal/modules/cjs/loader:1103:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object. (%path%\node_modules\webpack\bin\webpack.js:156:2) Process terminated with code 1.

[RyFive85]

I get the same when adding

const SriPlugin = require('webpack-subresource-integrity');

[jscheid]

Are you using a Webpack <5? https://github.com/waysact/webpack-subresource-integrity/issues/174

[RyFive85]

@jscheid I'm using 4.46.0, so that's when I tried const SriPlugin = require('webpack-subresource-integrity'); and still couldn't get it to work.

[jscheid]

Version 5 of this plugin requires Webpack 5. You either need to upgrade Webpack or use version 1.x of this plugin.

[RyFive85]

@jscheid thanks, that was the issue. I did notice that constraint and did adhere to the syntax shown on the 1.x branch, and I could've sworn that I reverted the version of webpack-subresource-integrity, but I might've forgotten to install it.

Now I'm able to get it to build, but the integrity attribute is being set for all of the external assets. The only asset that is being injected with an integrity attribute is the one in my Scripts folder. I am using HtmlWebpackPlugin with the inject attribute set to true, and the documentation says that should automatically inject the integrity attributes.

const SriPlugin = require("webpack-subresource-integrity");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const plugins =
    process.env.NODE_ENV === "production"
        ? [
            new CleanWebpackPlugin(),
            new WebpackNotifierPlugin(),
            new MomentLocalesPlugin({
                localesToKeep: momentLocales
            }),
            new SriPlugin({
                hashFuncNames: ['sha256', 'sha384'],
                enabled: true,
            })
        ]
        : [
            new BundleAnalyzerPlugin(),
            new CleanWebpackPlugin(),
            new WebpackNotifierPlugin(),
            new BrowserSyncPlugin(),
            new MomentLocalesPlugin({
                localesToKeep: momentLocales
            }),
            new SriPlugin({
            hashFuncNames: ['sha256', 'sha384'],
            enabled: true,
        })
        ];

return {
        devtool: "inline-source-map",
        performance: {
            hints: process.env.NODE_ENV === "production" ? "warning" : false
        },
        entry: {
            app: [
                "core-js/stable",
                "regenerator-runtime/runtime",
                "core-js/modules/es.promise",
                "core-js/modules/es.array.iterator",
                "whatwg-fetch",
                "./ClientApp/app.tsx"
            ]
        },
        output: {
            filename: "[name].[contentHash].bundle.js",
            path: path.resolve(__dirname, "Scripts/dist"),
            publicPath: "/Scripts/dist/",
            crossOriginLoading: "anonymous"
        },

plugins: plugins.concat([
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, "./index.template.html"),
                filename: path.resolve(__dirname, "./index.html"),
                templateParameters: {
                    production: process.env.NODE_ENV === "production"
                },
                minify: {
                    collapseWhitespace: false,
                    preserveLineBreaks: true,
                },
                inject:true
            }),

But I'm getting scripts like this generated:

<script type="text/javascript" src="https://unpkg.com/react@17.0.2/umd/react.development.js" integrity="null" crossorigin="anonymous"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment-with-locales.min.js" integrity="null" crossorigin="anonymous"> <script type="text/javascript" src="/Scripts/dist/app.20fd3b36d9a9c98a4a84.bundle.js" integrity="sha256-cq9IC2w67XmIJijADEBd2hzYE6/B6j+AzIth6p6y7Ww= sha384-sukqar5A0ye8lGyX3p7kUz+WasOzkat97W8Lsx+b8sXq649yz7Ok6ShMd5n1IAgG" crossorigin="anonymous"></script>

[jscheid]

Sorry, we don't support external scripts at the moment. The primary use case is for bundling your dependencies from npm. See #167.