HookWebpackError: ENOENT: no such file or directory, scandir

[jeetparikh]

Description After update to angular v12, get the error HookWebpackError: ENOENT: no such file or directory, scandir

Expected behavior The plugin should be generating an output file in the build dist directory as it did with the previous version of angular v11.

Actual behavior

[error] HookWebpackError: ENOENT: no such file or directory, scandir
    at makeWebpackError (~/scheduler/node_modules/webpack/lib/HookWebpackError.js:49:9)
    at ~/scheduler/node_modules/webpack/lib/Compilation.js:2496:12
    at eval (eval at create (~/scheduler/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:29:1)
    at fn (~/scheduler/node_modules/webpack/lib/Compilation.js:427:17)
    at _next6 (eval at create (~/scheduler/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:26:1)
    at eval (eval at create (~/scheduler/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:44:1)
    at fn (~/scheduler/node_modules/webpack/lib/Compilation.js:439:9)
    at _next5 (eval at create (~/scheduler/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:39:1)
    at eval (eval at create (~/scheduler/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:58:1)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
-- inner error --
Error: ENOENT: no such file or directory, scandir
    at Object.readdirSync (fs.js:955:3)
    at CacheBackend.provideSync (~/scheduler/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:233:32)
    at WebpackFileSystem.listPaths (~/scheduler/node_modules/license-webpack-plugin/dist/WebpackFileSystem.js:78:24)
    at LicenseTextReader.readLicense (~/scheduler/node_modules/license-webpack-plugin/dist/LicenseTextReader.js:37:54)
    at PluginChunkReadHandler.processModule (~/scheduler/node_modules/license-webpack-plugin/dist/PluginChunkReadHandler.js:46:62)
    at ~/scheduler/node_modules/license-webpack-plugin/dist/PluginChunkReadHandler.js:22:23
    at WebpackModuleFileIterator.internalCallback (~/scheduler/node_modules/license-webpack-plugin/dist/WebpackModuleFileIterator.js:25:13)
    at WebpackModuleFileIterator.iterateFiles (~/scheduler/node_modules/license-webpack-plugin/dist/WebpackModuleFileIterator.js:10:9)
    at ~/scheduler/node_modules/license-webpack-plugin/dist/PluginChunkReadHandler.js:20:32
    at WebpackChunkModuleIterator.iterateModules (~/scheduler/node_modules/license-webpack-plugin/dist/WebpackChunkModuleIterator.js:42:21)
    at PluginChunkReadHandler.processChunk (~/scheduler/node_modules/license-webpack-plugin/dist/PluginChunkReadHandler.js:19:29)
    at _loop_1 (~/scheduler/node_modules/license-webpack-plugin/dist/WebpackCompilerHandler.js:92:37)
    at WebpackCompilerHandler.iterateChunks (~/scheduler/node_modules/license-webpack-plugin/dist/WebpackCompilerHandler.js:127:17)
    at ~/scheduler/node_modules/license-webpack-plugin/dist/WebpackCompilerHandler.js:43:31
    at fn (~/scheduler/node_modules/webpack/lib/Compilation.js:425:10)
    at _next6 (eval at create (~/scheduler/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:26:1)

System information Angular v12 Node 12.x

Additional context With Angular v11 CLI, our project uses the custom webpack angular builders to provide additional customisation to the webpack build where we use the svg spritemap plugin. Below is the config we use for the plugin which worked fine. Earlier we were using the version 3.x and it produces the same issue with Angular v12 so I tried updating to the latest version 4.0.2 but the issue is still present.

 new SVGSpritemapPlugin(helpers.root('src/assets/icons/**/*.svg'), {
            output: {
                filename: 'assets/svg/oss-icons-def.svg',
                chunk: {
                    keep: true,
                },
                svgo: false,
            },
            sprite: {
                prefix: 'icon-',
            },
        })

When I remove this plugin setup from my custom webpack config, the angular build works fine but when I add this plugin I get the error mentioned above.

Any help would be appreciated thanks.

[cascornelissen]

Interesting, the stack trace does not include any references to this plugin. I also haven't worked with Angular in years so if you can provide a simplified, minimal repository to reproduce the issue that I can clone and use to debug that'd help immensely.

[jeetparikh]

hey @cascornelissen thanks for getting back. I will try and see if I can create a repo with minimal extraction - just a bit tricky since it would need a lot of extraction and ensure a minimal version. Do you see anything obvious in the config that could be wrong? or anything that could be breaking? Just a hunch or anything I could try? Thanks

[cascornelissen]

I'm not seeing anything obvious. Especially if it was working with Angular 11 and stopped working when updating to Angular 12 I definitely need some reproduction repository if nothing was changed on the plugin's side 😄

If you want you can try debugging a bit by making changes to the files in node_modules/svg-spritemap-webpack-plugin/ (most likely lib/index.js) within your project. The plugin itself doesn't use do much with reading/writing files but two things you could try are 1) adding loggin for each call to a fs.* function and 2) commenting out parts of updateDependencies() as that's where files/directories are marked as dependencies for the compiler.

[jeetparikh]

hey @cascornelissen thank you for getting back. I will give it a try and let you know how I go. thanks

[jeetparikh]

hey @cascornelissen I was a very weird issue where during minification a 'extractLicenses' option is creating this.. Disabling the option and the build works perfectly fine. But it only seems to do it with this plugin in place but I don't think there is any issue with this plugin. It was just my method of isolation causing me to point to this plugin. Thank you for being responsive. I will close this issue. Thanks

[cascornelissen]

Thanks for reporting back! Good to hear there's a fix/workaround for the issue you were experiencing.

For context: it sounds like either one (or multiple) of your source sprite SVGs contain license information or you're using the svg4everybody option which injects an additional package which likely has some licensing information inside.

[SlavikUst]

Hello, @cascornelissen , the same issue for me but in my case workaround doesn't help. Now I also use Angular 12 with custom-webpack-pugin, so after updating angular and webpack see this error. I've tried different configurations of your plugin without success. Also, I've tried to use only one simple SVG for bundle - doesn't work also. Any ideas what I can try? Unfortenly it's not an option to create a demo repo for you. Thanks.

Error Code - Same Plugin Config - Same

Packages:

"svg-spritemap-webpack-plugin": "4.3.3",
"webpack": "5.61.0",
"@angular-builders/custom-webpack": "12.1.2",
"@angular/core": "12.2.12",

[cascornelissen]

Hi @SlavikUst, without a reproduction repository or at least a stacktrace it would just be a guessing game for me so unless you're able to provide additional details I'm afraid you're on your own.