version 4.4.1 not compiling

[jakewhiteley]

Description Upgrading to 4.4.1 causes all builds to fail due to the following:

[webpack-cli] Error: ENOENT: no such file or directory, open 'C:\wamp64\www\_unseen\frontend-boilerplate\test\dist\images\svgsprite.svg'
    at Object.openSync (node:fs:585:3)
    at Object.readFileSync (node:fs:453:35)
    at File.read (C:\wamp64\www\_unseen\frontend-boilerplate\node_modules\laravel-mix\src\File.js:227:19)
    at File.version (C:\wamp64\www\_unseen\frontend-boilerplate\node_modules\laravel-mix\src\File.js:234:25)
    at Manifest.hash (C:\wamp64\www\_unseen\frontend-boilerplate\node_modules\laravel-mix\src\Manifest.js:61:74)
    at C:\wamp64\www\_unseen\frontend-boilerplate\node_modules\laravel-mix\src\webpackPlugins\CustomTasksPlugin.js:118:31
    at Collection.each (C:\wamp64\www\_unseen\frontend-boilerplate\node_modules\collect.js\dist\methods\each.js:18:14)
    at CustomTasksPlugin.applyVersioning (C:\wamp64\www\_unseen\frontend-boilerplate\node_modules\laravel-mix\src\webpackPlugins\CustomTasksPlugin.js:117:42)
    at C:\wamp64\www\_unseen\frontend-boilerplate\node_modules\laravel-mix\src\webpackPlugins\CustomTasksPlugin.js:23:22 {
  errno: -4058,
  syscall: 'open',
  code: 'ENOENT',
  path: 'C:\\wamp64\\www\\_unseen\\frontend-boilerplate\\test\\dist\\images\\svgsprite.svg'
}

Rolling back to 4.4.0 compiles correctly.

Webpack config

new SVGSpritemapPlugin(src('svg-sprite/*.svg'), {
    output: {
        filename: 'images/svgsprite.svg',
        chunk: { keep: true },
        svgo: {
            plugins: [
                {
                    name: 'addClassesToSVGElement',
                    params: {
                        className: 'svg-sprite'
                    }
                }
            ]
        }
    },
    sprite: { prefix: false }
})

System information

 System:
    OS: Windows 10 10.0.22000
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700KF
    Memory: 43.30 GB / 63.86 GB
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    @ashthornton/asscroll: ^2.0.7 => 2.0.7
    @babel/eslint-parser: ^7.18.2 => 7.18.2
    @babel/preset-env: ^7.18.2 => 7.18.2
    @unseenco/e: ^2.2.2 => 2.2.2
    @unseenco/taxi: ^0.6.0 => 0.6.0
    browser-sync: ^2.27.10 => 2.27.10
    browser-sync-webpack-plugin: ^2.3.0 => 2.3.0
    core-js: ^3.23.2 => 3.23.2
    eslint: ^8.18.0 => 8.18.0
    eslint-config-standard: ^17.0.0 => 17.0.0
    eslint-plugin-import: ^2.26.0 => 2.26.0
    eslint-plugin-node: ^11.1.0 => 11.1.0
    eslint-plugin-promise: ^6.0.0 => 6.0.0
    eslint-webpack-plugin: ^3.1.1 => 3.1.1
    glslify: ^7.1.1 => 7.1.1
    glslify-loader: ^2.0.0 => 2.0.0
    gsap: ^3.10.4 => 3.10.4
    laravel-mix: ^6.0.43 => 6.0.43
    laravel-mix-polyfill: ^3.0.1 => 3.0.1
    laravel-mix-purgecss: ^6.0.0 => 6.0.0
    postcss: ^8.4.14 => 8.4.14
    purgecss-with-wordpress: ^4.1.0 => 4.1.0
    raw-loader: ^4.0.2 => 4.0.2
    resolve-url-loader: ^5.0.0 => 5.0.0
    sass: ^1.52.3 => 1.52.3
    sass-loader: ^12.6.0 => 12.6.0
    stylelint: ^14.9.1 => 14.9.1
    stylelint-config-sass-guidelines: ^9.0.1 => 9.0.1
    stylelint-webpack-plugin: ^3.3.0 => 3.3.0
    svg-spritemap-webpack-plugin: 4.4.1 => 4.4.1

Additional context

[cascornelissen]

Are you able to provide a minimal reproduction repository so that I can debug this a bit?

[jakewhiteley]

@cascornelissen https://github.com/jakewhiteley/spritemap-minimal

Run npm i and npm start to see.

As mentioned above, rolling svg-spritemap-webpack-plugin back to 4.4.0 builds successfully, but 4.4.1 fails.

Let me know if I can help!

[cascornelissen]

@jakewhiteley, thanks. I'm not familiar with Laravel Mix but I checked out your repository and ran npm start which resulted in a Compiled successfully message. I noticed the version pinned in package.json was 4.4.0 so I updated that to 4.4.1 but I'm still getting Compiled successfully, same story when running npm run build. Are you positive this does not work on your system?

If it does indeed fail on your end, could you try installing the commits one-by-one directly from GitHub to try and pinpoint what change exactly is causing this issue on your end? You can install a specific commit by running:

npm install github:cascornelissen/svg-spritemap-webpack-plugin#4ece0f7

Since one of the differences between our systems would be the OS as you're on Windows, this might be caused by the update of the glob dependency to v8 which made some changes with regards to path separators on Windows.

[jakewhiteley]

Installing https://github.com/cascornelissen/svg-spritemap-webpack-plugin/commit/5e73ae55f0f6bc29ccee279f54d312a60561514b works as expected.

Installing https://github.com/cascornelissen/svg-spritemap-webpack-plugin/commit/4ece0f75b093b4e66c31b38079d248b97976b8f7 produces a No source files match the patterns: 'C:\wamp64\www\_unseen\spritemap-minimal\resources\assets\svg-sprite\*.svg' warning and outputs no spritesheet, although the build completes.

Installing https://github.com/cascornelissen/svg-spritemap-webpack-plugin/commit/9beca44e2427fe5fe0e2317a47cad9f114ece386, https://github.com/cascornelissen/svg-spritemap-webpack-plugin/commit/055d34846d2ccdf8b8423301580ee124cc8b01f4 have the same result as https://github.com/cascornelissen/svg-spritemap-webpack-plugin/commit/4ece0f75b093b4e66c31b38079d248b97976b8f7

Installing https://github.com/cascornelissen/svg-spritemap-webpack-plugin/commit/b4fba191969923427736418aaa10d94e7d03f608 produces my Error: ENOENT: no such file or directory, open 'C:\wamp64\www\_unseen\spritemap-minimal\public\images\svgsprite.svg' error.

Apart from the node version (I am on 16.14.0) you are definitely correct in assuming it is a windows pathing bug - it always is!

[cascornelissen]

I'm running node 16.15.0 at the moment so I don't think that's the difference either 🤔

196 was just created which might be related, I've pushed a fix for that in cda8566. Could you try it out on your end by installing directly from master by running the following command again?

The other thought I had is that this is somehow a timing issue (maybe due to Laravel Mix), I've combined the optimizeAssets and processAssets (with stage PROCESS_ASSETS_STAGE_OPTIMIZE) hooks together in 65a3176 as they likely happen at roughly the same time. Previously the optimizeAssets hook generated the asset and processAssets added the file to the chunk and now the file is first created and then added to the chunk in processAssets.

[jakewhiteley]

https://github.com/cascornelissen/svg-spritemap-webpack-plugin/commit/cda85660dfc310303573729138857b8320e2c74d did not fix the issue - same no such file... error 😢

[jakewhiteley]

@cascornelissen I am getting closer.

I tried https://github.com/cascornelissen/svg-spritemap-webpack-plugin/commit/65a31766a57ef2f6ef3d282e0b3e1a127a127247 and it works but fails as no sprites are found.

The issue is due to glob being incomaptable with backslashes in paths .

I added pattern = pattern.replace(/\\/g, '/') to line 371 of index.js (just for testing) and it seems to compile correctly. This was something you fixed previously by removing the normalize call to patterns you were doing in your options-formatter.

Due to my specific setup in my webpack.mix.config I was reintroducing the issue as I pass my paths through path.resolve(__dirname, ...).

By using https://github.com/cascornelissen/svg-spritemap-webpack-plugin/commit/65a31766a57ef2f6ef3d282e0b3e1a127a127247 and by forcing my paths to be resolved with UNIX style seperators instead of windows ones, it all seems to compile correctly!

When might https://github.com/cascornelissen/svg-spritemap-webpack-plugin/commit/65a31766a57ef2f6ef3d282e0b3e1a127a127247 be pushed to 4.4.2?

[cascornelissen]

@jakewhiteley, the missing puzzle piece seems to be that you were reintroducing them by using path.resolve indeed.

Just to double-check, master works for you now with the mentioned changes to your local setup? If so, I'll publish a release later today ✌🏼

[jakewhiteley]

@cascornelissen all good :)

[cascornelissen]

Great, I've just published 4.4.2 to npm. Thanks for testing/investigating! ❤️