Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bundling images with the same file name but with different paths causes an error #3156

Open
aarbi opened this issue Nov 9, 2021 · 4 comments · May be fixed by #3157
Open

Bundling images with the same file name but with different paths causes an error #3156

aarbi opened this issue Nov 9, 2021 · 4 comments · May be fixed by #3157

Comments

@aarbi
Copy link
Contributor

aarbi commented Nov 9, 2021

  • Laravel Mix Version: 6.0.0
  • Node Version: 14.17.0
  • NPM Version: 6.14.13
  • OS: MacOs Catalina

Description:

When in the project we have multiple images that have the same filename, importing them into the project will cause an issue when bundling the project. Webpack is unable to overwrite the previously copied file to the public/images (or the dist folder) because it already exists from the first import.

@aarbi
Copy link
Contributor Author

aarbi commented Nov 9, 2021

CRA bundles images with a hash by default

@aarbi aarbi linked a pull request Nov 9, 2021 that will close this issue
@aarbi
Copy link
Contributor Author

aarbi commented Nov 9, 2021

The error thrown while building:

Compiling Mix
Error: Prevent writing to file that only differs in casing or query string from already written file.
This will lead to a race-condition and corrupted files on case-insensitive file systems.

@aarbi
Copy link
Contributor Author

aarbi commented Nov 17, 2021

a workaround:

  mix.override((webpackConfig) => {
    webpackConfig.module.rules.find(
      (r) => r.test.source == /(\.(png|jpe?g|gif|webp|avif)$|^((?!font).)*\.svg$)/.source,
    ).use[0].options.name = (path) => {
      if (!/node_modules|bower_components/.test(path)) {
        return 'images/[name].[hash:8].[ext]?[hash:8]';
      }

      return (
        'images/vendor/' +
        path
          .replace(/\\/g, '/')
          .replace(/((.*(node_modules|bower_components))|images|image|img|assets)\//g, '') +
        '?[hash]'
      );
    };
  })

@thecrypticace if we're good with this workaround for now I will close this issue with it related PR

@jakewhiteley
Copy link

This still an issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants