Cannot find package 'object-hash'

[djmtype]

Astro build leads to object-hash error with Astro 2.0.0-beta.1

Cannot find package 'object-hash' imported from /Volumes/Evo/Sites/astro-content/dist/entry.mjs
  Did you mean to import [email protected]/node_modules/object-hash/index.js?

Therefore, I tried installing object-hash as a separate package, but then I ended up with a different error in regards to unmet peer dependencies which made more sense since Astro 2 beta is quite new.

Regardless, if I downgrade to Astro 1.9.x, my project does compile.

[guttenbergovitz]

i mean :: seens it is still happening, but after manually installing missing deps it all seems fine.

[beeb]

This is still happening with Astro 2.0.4

[RafidMuhymin]

@djmtype @guttenbergovitz @beeb could you please share more info about your system and versions of astro-imagetools and astro? I just tested both on Windows and Ubuntu with [email protected] and [email protected] but I am not getting any build related issue.

[beeb]

could you please share more info about your system and versions

Latest versions of both as of two days ago, please note I'm using pnpm@latest if that makes a difference.

[RafidMuhymin]

I am also using pnpm@latest and I have tested with the latest yarn and npm too. Could you please try upgrading to [email protected] if it fixes the issue?

[djmtype]

@RafidMuhymin Still getting object hash error too.
Astro 2.0.5
astro-imagetools 0.7.6
pnpm 7.25.1
node v16.19.0
MacOS 13.1

[djmtype]

@RafidMuhymin I decided to start a blank Astro project, making sure there wasn't a conflict with this library.
Although, I don't get the object-hash error, whenever I build I get something like:

 error   ENOENT: no such file or directory, open '/Volumes/Evo/Sites/astro-imagetools-test/dist/_astro/[email protected]'

Here's my Picture component. The image resides in /public/images/:

<Picture
src="/images/placeholder-about.jpg"
alt="poster"
width="1200"
height="600"
	/>

Note: It doesn't matter if I place and reference an image from the /src directory instead, I get a similar error.

[beeb]

On another astro project I tried to add the astro-imagetools dependency and I can't reproduce the problem there.

But on my first repository, I still have the Cannot find package 'object-hash' error even with astro 2.0.5.

[djmtype]

@RafidMuhymin Here's my blank Astro project with astro-imagetools: https://github.com/djmtype/astro-imagetools-test

[xav-ie]

Just wanted to add here that @djmtype 's project is exhibiting the exact issues I had. I cloned it and downloaded all the modules it was complaining it was missing with pnpm add -D ...:

• "@astropub/codecs"
• "file-type"
• "find-cache-dir"
• "object-hash"
• "potrace"

Until it stopped complaining about not finding things... I ran pnpm build and then ran into (shell output):

 building client
Completed in 29ms.


 generating static routes
▶ src/pages/index.astro
Responsive Image sets generated for Picture at /src/images/placeholder-about.jpg in 4585.597000002861ms
  └─ /index.html (+4.59s)
Completed in 6.28s.

 error   ENOENT: no such file or directory, open '/Users/xavierruiz/Projects/astro-imagetools-test/dist/_astro/[email protected]'
Error: ENOENT: no such file or directory, open '/Users/xavierruiz/Projects/astro-imagetools-test/dist/_astro/[email protected]'
 ELIFECYCLE  Command failed with exit code 1.

And there is not even a /Users/xavierruiz/Projects/astro-imagetools-test/dist/_astro directory. I was thinking maybe it had to do with the image being from the /src directory but, no, moving the image to /public and updating the <Picture/> element accordingly gives the same error. Hopefully someone might see what is happening here with this error? I have a hunch it has something to do with a folder pointed wrong somehow and it is not finding stuff properly.

Using a Mac, pnpm version 7.27.0. Astro 2.0.5

[xav-ie]

In trying to diagnose this, I discovered there is a plugin/hooks/config.js file that has all but one of the modules I had to install ("sharp") listed in external SSR dependencies list, so maybe the issue has something to do with that file?

But I was able to come up with a workaround!!!! (I did have to install all those packages mentioned earlier (#149 (comment)) in addition to this workaround).

By default Vite puts all assets in an "assets" folder (https://vitejs.dev/config/build-options.html#build-assetsdir) but for Astro it puts them in "_astro"... (https://docs.astro.build/en/reference/configuration-reference/#buildassets).
To be honest, I am not sure about how it all works, I just know that they are connected.

So I added some logging and here was the original problem output of pnpm build using @djmtype 's repo:

saving asset...
/Users/xavierruiz/Projects/astro-imagetools-test/dist/assets does not exist, creating now...
^^^ previous two lines x15
/Users/xavierruiz/Projects/astro-imagetools-test/dist/assets created successfully!
^^^ previous line x15 total
 error   ENOENT: no such file or directory, open '/Users/xavierruiz/Projects/astro-imagetools-test/dist/_astro/[email protected]'
Error: ENOENT: no such file or directory, open '/Users/xavierruiz/Projects/astro-imagetools-test/dist/_astro/[email protected]'
 ELIFECYCLE  Command failed with exit code 1.
 

Please note the dissonance between this library creating a dist/assets folder but then turning around and trying to save the many photos generated in the dist/_astro folder.

So, we can workaround this by simply changing our configuration and explicitly telling Vite and Astro to match up their assets folder, please! Below is my astro.config.mjs:

import { defineConfig } from 'astro/config';
import { astroImageTools } from "astro-imagetools";
// https://astro.build/config
export default defineConfig({
	integrations: [astroImageTools],
	build: {
		assets: "assets"
	},
	vite: {
		build: {
		 // assetsDir: "poop" // if you uncomment this line, you have to make astro assets also "poop"
		}
	}
});

What this does, is tell Astro to use /assets instead of /_astro for assets, matching Vite's expectation.
Here is the shell output now:

saving asset...
/Users/xavierruiz/Projects/astro-imagetools-test/dist/assets does not exist, creating now...
^^^ previous two lines x15
/Users/xavierruiz/Projects/astro-imagetools-test/dist/assets created successfully!
^^^ previous line x15 total
saved asset! => /assets/[email protected]
saved asset! => /assets/[email protected]
saved asset! => /assets/[email protected]
saved asset! => /assets/[email protected]
saved asset! => /assets/[email protected]
saved asset! => /assets/[email protected]
saved asset! => /assets/[email protected]
saved asset! => /assets/[email protected]
saved asset! => /assets/[email protected]
saved asset! => /assets/[email protected]
saved asset! => /assets/[email protected]
saved asset! => /assets/[email protected]
saved asset! => /assets/[email protected]
saved asset! => /assets/[email protected]
saved asset! => /assets/[email protected]
11:03:18 PM [build] 1 page(s) built in 7.17s
11:03:18 PM [build] Complete!

Note how we are still creating an dist/assets folder, but thanks to that change we are actually saving them in the assets folder and not _astro folder. As mentioned in the comment of the config, you can also change the assets folder for Vite, but Astro will still try to save the images in the _astro folder, so you may as well just change one of them to be correct.

This astro.config.mjs also works:

import { defineConfig } from 'astro/config';
import { astroImageTools } from "astro-imagetools";
// https://astro.build/config
export default defineConfig({
	integrations: [astroImageTools],
	build: {
		// assets: "poop" // same stuff as before but flipped
	},
	vite: {
		build: {
			 assetsDir: "_astro"
		}
	}
});

but now you get this output:

saving asset...
/Users/xavierruiz/Projects/astro-imagetools-test/dist/_astro does not exist, creating now...
^^^ previous two lines x15 total
/Users/xavierruiz/Projects/astro-imagetools-test/dist/_astro created successfully!
^^^ previous line x15 total
saved asset! => /_astro/[email protected]
saved asset! => /_astro/[email protected]
saved asset! => /_astro/[email protected]
saved asset! => /_astro/[email protected]
saved asset! => /_astro/[email protected]
saved asset! => /_astro/[email protected]
saved asset! => /_astro/[email protected]
saved asset! => /_astro/[email protected]
saved asset! => /_astro/[email protected]
saved asset! => /_astro/[email protected]
saved asset! => /_astro/[email protected]
saved asset! => /_astro/[email protected]
saved asset! => /_astro/[email protected]
saved asset! => /_astro/[email protected]
saved asset! => /_astro/[email protected]
11:25:01 PM [build] 1 page(s) built in 6.82s
11:25:01 PM [build] Complete!

In this config, we know that Astro is going to try and save the images in _astro for some reason and Vite is going to try to make an assets folder, so we tell Vite to instead make a dist/_astro folder instead. Maybe this might be important for some people to keep the _astro folder? idk...

Whew... I am happy I forced it to work. This was my first time messing with code in node_modules. Hopefully, someone more knowledgeable than me about how asset directories between Vite and Astro works can figure out why this dissonance is happening.

[djmtype]

@xav-ie Much appreciated. It all builds now.
It's just an unfortunate side effect every time Astro updates it has always ended up breaking this awesome library. Thanks for going down this rabbit hole. Hopefully Astro Imagetools will be fixed one day so we don't have to install all of its same required packages into our own project.

[djmtype]

@xav-ie After updating to Astro 2.0.17 and Astro Imagetools 0.8.1 it looks like the issue is might just be pnpm related.

Using npm instead, all builds properly even without adding all those dependencies and having to add vite: { build: { assetsDir: "_astro"} } to the Astro config file.

I created a march-update branch which uses npm.
https://github.com/djmtype/astro-imagetools-test/tree/march-update

[djmtype]

@xav-ie I really don't know much about pnpm, but adding a .npmrc file with shamefully-hoist=true to the root of the project seems to have magically cleared up any remaining issues. Both build and preview work without a problem.

I've updated my march-update branch to reflect this; now using pnpm.

I also wanted to confirm my personal Astro project builds without any issue as well.

[xav-ie]

Omg what a simple fix to switch to npm. Thank you so much. I tried the hoisting with minimal effort and it did not work with pnpm but ran into some other wierd issue I don't feel like figuring out. Switching to npm solved everything and I am going to stop spending anymore time on this lol. Have a nice day.

[spokospace]

Hello, what is the best practice for using astro-imagetools witn pnpm? I tried with shamefully-hoist=true but it didn't help.

error Cannot find package 'object-hash' imported from C:\www\2023\test\dist\chunks\pages\_slug__d8e98270.mjs Did you mean to import [email protected]/node_modules/object-hash/index.js? Error: Cannot find package 'object-hash' imported from C:\www\2023\test\dist\chunks\pages\_slug__d8e98270.mjs

dev mode works fine, but with the build there is a issue.

i tried with adding additional vite configs to astro.config.mjs but it allso doesn't work.

I removed node_modules and installed all using: pnpm install --shamefully-hoist --> now it works.

[lukethacoder]

pnpm install --shamefully-hoist seen to do the trick... but I felt so shameful doing this.