@astro/image errors "require is not defined" in local development

[joe-bell]

What version of astro are you using?

1.1.2

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

pnpm

What operating system are you using?

Mac

Describe the Bug

Hey friends! Appreciate the work you're doing at Astro – I've been having a blast using it for the last few days

I've been recently building an Astro example for plaiceholder, but stumbled across an issue when trying to use @astro/image:
joe-bell/plaiceholder#218

When visiting any of these newly added pages locally in astro dev, I see:

 error   require is not defined
ReferenceError: require is not defined
    at /.../plaiceholder/node_modules/.pnpm/[email protected]/node_modules/tiny-glob/index.js:1:25
    at instantiateModule (file:///.../plaiceholder/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:50548:15)

This issue only seems to happen within my local environment, not in Vercel.

Some other details that might help to diagnose:

• Node version: 16.15.1
• .npmrc contents (I don't want to hoist all within my monorepo)

  public-hoist-pattern[]='astro'
  public-hoist-pattern[]='@astrojs/*'
  

I'd love to have this example as a "gold standard" Astro site, so I'd really appreciate any help to investigate :pra

Link to Minimal Reproducible Example

joe-bell/plaiceholder#218

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

Thanks! I'll take a look at this.

[matthewp]

@tony-sull, setting image-size and tiny-glob to external fixes this problem. Should the integration be configuring this?

[matthewp]

@joe-bell in the meantime you can set these as external in your own config which seemed to resolve it in my testing:

export default defineConfig({
  vite: {
    ssr: {
      external: ['image-size', 'tiny-glob']
    }
  }
});

[joe-bell]

@matthewp that works a charm in the meantime, thank you!

Note: I did also have to install image-size and tiny-glob as devDependencies for this to work

[matthewp]

Ah, yes, anything that is external needs to be hoisted. I don't know if your monorepo setup allows hoisted all of that example project or not, if so that would avoid needing to individually hoist external packages.

[matthewp]

Can confirm that this is because of hoisting. Due to how Vite works when compiling code, it winds up import()ing it for you. Which means it has to be a dependency of the thing doing the import, or a parent. Hoisting works around this issue.

Other Vite-based frameworks have the same problem, see for example: nuxt/vite#91

So closing as there's not really anything we can do here until the underlying problem is resolved in Vite.

[joe-bell]

Thanks @matthewp!

[Adam-Collier]

Just ran into this problem myself! Any chance we could get a note added to the documentation about this? Save people having to search the issues