Upgrading to Vite 4.4.0 broke vite-imagetools

[Robert Boes]

I tried upgrading from Vite 4.3.9 to 4.4.0, but this causes every import in vite-imagetools to be externalized and then causes import errors, here's the full log:

npm run build

> build
> vite build

vite v4.4.0 building for production...
[plugin:vite:resolve] Module "node:path" has been externalized for browser compatibility, imported by "/[PATH_TO_PROJECT]/node_modules/vite-imagetools/dist/index.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "crypto" has been externalized for browser compatibility, imported by "/[PATH_TO_PROJECT]/node_modules/imagetools-core/dist/index.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "path" has been externalized for browser compatibility, imported by "/[PATH_TO_PROJECT]/node_modules/@rollup/pluginutils/dist/es/index.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "util" has been externalized for browser compatibility, imported by "/[PATH_TO_PROJECT]/node_modules/sharp/lib/constructor.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "stream" has been externalized for browser compatibility, imported by "/[PATH_TO_PROJECT]/node_modules/sharp/lib/constructor.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "path" has been externalized for browser compatibility, imported by "/[PATH_TO_PROJECT]/node_modules/sharp/lib/output.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "fs" has been externalized for browser compatibility, imported by "/[PATH_TO_PROJECT]/node_modules/sharp/lib/utility.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "path" has been externalized for browser compatibility, imported by "/[PATH_TO_PROJECT]/node_modules/sharp/lib/utility.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "events" has been externalized for browser compatibility, imported by "/[PATH_TO_PROJECT]/node_modules/sharp/lib/utility.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "path" has been externalized for browser compatibility, imported by "/[PATH_TO_PROJECT]/node_modules/picomatch/lib/picomatch.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "fs" has been externalized for browser compatibility, imported by "/[PATH_TO_PROJECT]/node_modules/sharp/lib/libvips.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "os" has been externalized for browser compatibility, imported by "/[PATH_TO_PROJECT]/node_modules/sharp/lib/libvips.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "path" has been externalized for browser compatibility, imported by "/[PATH_TO_PROJECT]/node_modules/sharp/lib/libvips.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "child_process" has been externalized for browser compatibility, imported by "/[PATH_TO_PROJECT]/node_modules/sharp/lib/libvips.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "child_process" has been externalized for browser compatibility, imported by "/[PATH_TO_PROJECT]/node_modules/detect-libc/lib/detect-libc.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "path" has been externalized for browser compatibility, imported by "/[PATH_TO_PROJECT]/node_modules/picomatch/lib/utils.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "path" has been externalized for browser compatibility, imported by "/[PATH_TO_PROJECT]/node_modules/picomatch/lib/constants.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
✓ 297 modules transformed.
✓ built in 23.16s
"createHash" is not exported by "__vite-browser-external", imported by "node_modules/imagetools-core/dist/index.js".
file: /[PATH_TO_PROJECT]/node_modules/imagetools-core/dist/index.js:2:9
1: import sharp from 'sharp';
2: import { createHash } from 'crypto';
            ^
3:
4: const METADATA = Symbol('image metadata');
error during build:
RollupError: "createHash" is not exported by "__vite-browser-external", imported by "node_modules/imagetools-core/dist/index.js".
    at error (file:///[PATH_TO_PROJECT]/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)
    at Module.error (file:///[PATH_TO_PROJECT]/node_modules/rollup/dist/es/shared/node-entry.js:13572:16)
    at Module.traceVariable (file:///[PATH_TO_PROJECT]/node_modules/rollup/dist/es/shared/node-entry.js:13997:29)
    at ModuleScope.findVariable (file:///[PATH_TO_PROJECT]/node_modules/rollup/dist/es/shared/node-entry.js:12515:39)
    at FunctionScope.findVariable (file:///[PATH_TO_PROJECT]/node_modules/rollup/dist/es/shared/node-entry.js:7073:38)
    at ChildScope.findVariable (file:///[PATH_TO_PROJECT]/node_modules/rollup/dist/es/shared/node-entry.js:7073:38)
    at Identifier.bind (file:///[PATH_TO_PROJECT]/node_modules/rollup/dist/es/shared/node-entry.js:8235:40)
    at CallExpression.bind (file:///[PATH_TO_PROJECT]/node_modules/rollup/dist/es/shared/node-entry.js:5841:23)
    at CallExpression.bind (file:///[PATH_TO_PROJECT]/node_modules/rollup/dist/es/shared/node-entry.js:9801:15)
    at MemberExpression.bind (file:///[PATH_TO_PROJECT]/node_modules/rollup/dist/es/shared/node-entry.js:5841:23)

If there's any other info I can provide to investigate / solve this issue I'd be happy to help! :)

[Ben McCann]

I can't reproduce this issue and it doesn't appear to be related to vite-imagetools at all. If there is an issue here, it probably should be filed in the Vite repo. Can you share a way to reproduce this?

[Robert Boes]

Sorry for the late reply, but here are the steps to reproduce:

• Create a new project using npm init vue@latest
• I enabled TS, Vue Router and Vitest
• Install vite-imagetools and add it to your vite.config.ts
• Load some images using glob in src/main.ts, I used this:

const files = import.meta.glob<Picture>('../photos/*.jpg', {
    eager: true,
    query: {
        format: 'avif;webp;jpeg',
        w: '250;500;700;900;1200',
        as: 'picture',
        quality: 80,
    },
})

• It'll now complain about ESM, but adding "type": "module", to package.json solves this issue and generates the errors mentioned above

[Kirill Stryaponov]

I can confirm that project still exists

[Ben McCann]

I think there's something wrong with your project setup or Vite. It sounds like it's trying to compile vite-imagetools into part of the browser build, which it shouldn't be doing as it's only needed as part of the build system. It sounds unlikely to be an issue in vite-imagetools.

[Kirill Stryaponov]

I found the problem causing this error in my project. I removed this import from the component and everything builds fine now:

import { type Picture } from 'imagetools-core'