Can not use with external scripts in webpack 5

[Katochimoto]

"webpack": "5.51.1"
"webpack-subresource-integrity": "5.0.0"

Webpack config

externalsType: 'script',
externals: {
    three: [
      'https://unpkg.com/three@0.132.0/build/three.min.js',
      'THREE',
    ],
},

Error
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'undefined')

https://disk.yandex.ru/d/jkJgW-Q0zLSg4Q

[jscheid]

Interesting. What do you expect to happen instead? I'm asking because without supplying the integrity hash in some way via config, you're probably better off disabling this plugin anyway.

That said at the very least we should be printing a better error message in this case.

[jscheid]

If you do want to use SRI, the best workaround is probably to use an explicit <script> tag with integrity like in the example at the top of https://webpack.js.org/configuration/externals/#externals

[Katochimoto]

At least report the error as a warning without interrupting the build process.
Or it might be worth providing the ability to add your own hashes by names.

new SubresourceIntegrityPlugin({
  hashFuncNames: ['sha256', 'sha384', 'sha512'],
  externals: {
    three: 'sha256-r5u4pYJrMfo.... sha384-r5u4pYJrMfo....'
  },
}),

[themgoncalves]

@jscheid the same issue happens for the following scenario, where I inject an external script:

    new HtmlWebpackTagsPlugin({
      append: false,
      usePublicPath: false,
      scripts: [
        {
          path: `https://www.googletagmanager.com/gtag/js?id=ID`,
          attributes: { async: true, integrity: false },
        },
      ],
    }),

Where it outputs

ERROR in   Error: ENOENT: no such file or directory, open '/Users/<username>/<application-name>/https:/www.googletagmanager.com/gtag/js?id=foo'

  - plugin.js:199 Plugin.processTag
    [<application-name>]/[webpack-subresource-integrity]/plugin.js:199:78

  - plugin.js:229
    [<application-name>]/[webpack-subresource-integrity]/plugin.js:229:40

  - Array.forEach

  - plugin.js:229 Plugin.handleHwpBodyTags
    [<application-name>]/[webpack-subresource-integrity]/plugin.js:229:18

  - index.js:94
    [<application-name>]/[webpack-subresource-integrity]/index.js:94:28


  - index.js:572 onAlterAssetTagGroups
    [<application-name>]/[html-webpack-tags-plugin]/index.js:572:9

[lucasrainett]

I was getting this message

Error parsing 'integrity' attribute ('undefined'). The hash algorithm must be one of 'sha256', 'sha384', or 'sha512', followed by a '-' character.

this will inject the scripts without the integrity attribute.

__webpack_require__.sriHashes[undefined] = "";

[juanhuang99]

@jscheid the same issue happens for the following scenario, where I inject an external script:

    new HtmlWebpackTagsPlugin({
      append: false,
      usePublicPath: false,
      scripts: [
        {
          path: `https://www.googletagmanager.com/gtag/js?id=ID`,
          attributes: { async: true, integrity: false },
        },
      ],
    }),

Where it outputs

ERROR in   Error: ENOENT: no such file or directory, open '/Users/<username>/<application-name>/https:/www.googletagmanager.com/gtag/js?id=foo'

  - plugin.js:199 Plugin.processTag
    [<application-name>]/[webpack-subresource-integrity]/plugin.js:199:78

  - plugin.js:229
    [<application-name>]/[webpack-subresource-integrity]/plugin.js:229:40

  - Array.forEach

  - plugin.js:229 Plugin.handleHwpBodyTags
    [<application-name>]/[webpack-subresource-integrity]/plugin.js:229:18

  - index.js:94
    [<application-name>]/[webpack-subresource-integrity]/index.js:94:28


  - index.js:572 onAlterAssetTagGroups
    [<application-name>]/[html-webpack-tags-plugin]/index.js:572:9

@themgoncalves I had the same problem. Did you solve it?