`The requested module 'webpack-subresource-integrity' is a CommonJS module`

[marekdedic]

Hi, I'm trying to switch a project to "type": "module", so I converted my webpack.config.js to include the following import:

import { SubresourceIntegrityPlugin } from "webpack-subresource-integrity";

However, I am getting the following error:

[webpack-cli] Failed to load '/home/user/project/webpack.config.js' config
[webpack-cli] file:///home/user/project/webpack.config.js:6
import { SubresourceIntegrityPlugin } from "webpack-subresource-integrity";
         ^^^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'SubresourceIntegrityPlugin' not found. The requested module 'webpack-subresource-integrity' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'webpack-subresource-integrity';
const { SubresourceIntegrityPlugin } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:134:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:217:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
    at async WebpackCLI.tryRequireThenImport (/home/user/project/node_modules/webpack-cli/lib/webpack-cli.js:232:34)
    at async loadConfigByPath (/home/user/project/node_modules/webpack-cli/lib/webpack-cli.js:1406:27)
    at async WebpackCLI.loadConfig (/home/user/project/node_modules/webpack-cli/lib/webpack-cli.js:1515:38)
    at async WebpackCLI.createCompiler (/home/user/project/node_modules/webpack-cli/lib/webpack-cli.js:1781:22)
    at async WebpackCLI.runWebpack (/home/user/project/node_modules/webpack-cli/lib/webpack-cli.js:1877:20)
    at async Command.<anonymous> (/home/user/project/node_modules/webpack-cli/lib/webpack-cli.js:944:21)
    at async Command.parseAsync (/home/user/project/node_modules/webpack-cli/node_modules/commander/lib/command.js:935:5)

See marekdedic/prosemirror-remark-example#3

Any ideas?

[marekdedic]

Btw, if I do

import pkg from 'webpack-subresource-integrity';
const { SubresourceIntegrityPlugin } = pkg;

I get

(node:2428476) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
[webpack-cli] Failed to load '/home/user/project/webpack.config.js' config
[webpack-cli] /home/user/project/node_modules/webpack-subresource-integrity/dist/mjs/index.js:7
import { createHash } from "crypto";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:128:18)
    at wrapSafe (node:internal/modules/cjs/loader:1280:20)
    at Module._compile (node:internal/modules/cjs/loader:1332:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at cjsLoader (node:internal/modules/esm/translators:366:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:315:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)

[marekdedic]

I was able to fix the issue by editing webpack-subresource-integrity in my node_modules in the following ways:

1. Add "type": "module" to package.json
2. Go through all the .js files in dist/mjs and add .js to all relative imports, so change e.g.

   import { createDAGfromGraph } from "./scc";
   

   to

   import { createDAGfromGraph } from "./scc.js";
   

3. Replace in file dist/mjs/manifest.js the line

   import { RuntimeModule, Template } from "webpack";
   

   with

   import pkg from 'webpack';
   const { RuntimeModule, Template } = pkg;
   

I don't know if 1 breaks anything for legacy CJS users, I think 3 is because webpack isn't ESM (yet) and I have no idea why 2 helps.

[pgnd]

@marekdedic i'm seeing the same. (1) wasn't sufficient, here -- same error. did this go anywhere? or still unresolved? if so, i'll give (2),(3) a try.

[marekdedic]

Hi, I have to do all 3 things to fix it. No updates since this was posted :(

[pgnd]

Hi, I have to do all 3 things to fix it. No updates since this was posted :(

fwiw, there's an alternative manifest + SRI solution that seems to work in my esm webpack config, replacing

import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
import SubresourceIntegrityPlugin from 'webpack-subresource-integrity';

with

import WebpackAssetsManifest from 'webpack-assets-manifest';

from

https://github.com/webdeveric/webpack-assets-manifest

( i'm a bit surprised that asset-manifest + SRI are still not native to webpack ... )