Build fails when using vite-imagetools plugin due to assets already existing in build/client

[ivosabev]

I get the following error when building Remix.

Error: [remix] dest already exists.
    at /Users/xxx/site/node_modules/fs-extra/lib/move/move.js:51:31
    at /Users/xxx/site/node_modules/universalify/index.js:22:54 {
  code: 'PLUGIN_ERROR',
  plugin: 'remix',
  hook: 'writeBundle'
}
ERROR: "build-remix" exited with 1.

It seems that there is a build step where build/server/assets are moved over to build/client/assets, but the images already exist there and the build fails due to the way fs-extra/lib/move/move.js behaves.

// fs-extra/lib/move/move.js
function doRename (src, dest, overwrite, isChangingCase, cb) {
  if (isChangingCase) return rename(src, dest, overwrite, cb)
  if (overwrite) {
    return remove(dest, err => {
      if (err) return cb(err)
      return rename(src, dest, overwrite, cb)
    })
  }
  pathExists(dest, (err, destExists) => {
    if (err) return cb(err)
    if (destExists) return cb(new Error('dest already exists.')) // the cause of the error
    return rename(src, dest, overwrite, cb)
  })
}

I am using vite-imagetools which causes the assets to already exist in build/client/assets.

When calling directly vite build everything works. So to me it seems that Remix should do a better job at moving the files from build/server/assets to build/client/assets and not fail.

[justb3a]

I can verify the bug 😇 same on my side. As soon as I include the same image twice, remix build is failing.

x Build failed in 270ms
Error: [remix] dest already exists.
    at /Users/…/node_modules/fs-extra/lib/move/move.js:51:31
    at /Users/…/node_modules/universalify/index.js:21:38 {
  code: 'PLUGIN_ERROR',
  plugin: 'remix',
  hook: 'writeBundle'
}

remix packages @2.9.2 vite @5.2.11 vite-imagetools @7.0.2

The issues are the following:

1. import statements where I specify multiple sizes
2. when I import the same image more than once in different files / components

import picture from '~/assets/images/example.png?w=300;600;1200'

OR

// file / comp A
import picture from '~/assets/images/example.png?w=300'

// file / comp B
import picture from '~/assets/images/example.png?w=300'

[alexandercarls]

I can confirm that this bug was introduced in Remix version 2.9.2 likely with https://github.com/remix-run/remix/pull/9305

Here is the working reproduction https://github.com/alexandercarls/repro-imagetools with pinned version of 2.9.1 where npm run build is working as expected. If you upgrade the dependency to 2.9.2 it no longer works.

[justb3a]

Any news on this topic? We're still not able to update remix :/

[alexanderhorner]

Have the same issue currently.

[mikericher]

Adding { eager: true } to the import.meta.glob removed the error for me. Never investigated beyond that.

[markdalgleish]

Fixed by https://github.com/remix-run/remix/pull/9901. Once this is out in a nightly release, feel free to give it a try and report back.