Astro 0.23 with experimental-static-build flag issue

[seb-celinedesign]

with astro 0.23 and experimental-static-build flag, issue with image component, in astro build :

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'dist/chunks/imagetools.js' imported from dist/chunks/Image.327f9ced.mjs

[RafidMuhymin]

The <Image /> component still doesn't work in static build

[RafidMuhymin]

@seb-celinedesign v0.1.1 was just released that adds support for building in the static build. Can you check if it's working now?

[seb-celinedesign]

Maybe an edge case due to a misconfiguration in one of my component call, but i now get this error with latest astro-imagetools 0.1.3 and Astro 0.23.7 :

/node_modules/astro-imagetools/src/component/utils/getConfigOptions.js:31
      : imagesizes(requiredBreakpoints);
        ^

TypeError: imagesizes is not a function
    at Module.getConfigOptions [as default] (/node_modules/astro-imagetools/src/component/utils/getConfigOptions.js:31:9)
    at eval (/node_modules/astro-imagetools/src/component/utils/getArtDirectedImages.js:50:64)
    at async Promise.all (index 0)
    at async Module.getArtDirectedImages [as default] (/node_modules/astro-imagetools/src/component/utils/getArtDirectedImages.js:24:18)
    at async Promise.all (index 1)
    at async Module.__vite_ssr_exports__.default (/node_modules/astro-imagetools/src/component/utils/getImage.js:44:42)
    at async Module.renderImage [as default] (/node_modules/astro-imagetools/src/component/utils/renderImage.js:42:28)
    at async eval (/node_modules/astro-imagetools/src/component/Image.astro:18:34)
    at async renderToString (/node_modules/astro/dist/runtime/server/index.js?v=c9ea2e62:332:21)
    at async Module.renderComponent (/node_modules/astro/dist/runtime/server/index.js?v=c9ea2e62:130:20)

Node.js v17.6.0

[RafidMuhymin]

Can you try clearing the node_modules folder and then reinstalling the dependencies. It's an old error that was fixed in v0.0.19

[seb-celinedesign]

Can you try clearing the node_modules folder and then reinstalling the dependencies. It's an old error that was fixed in v0.0.19

I already tried that but got the same error.

[RafidMuhymin]

Can you share the code?

[RafidMuhymin]

@seb-celinedesign I noticed this issue when the artDirectives prop was passed. I have released a fix for this issue. Can you check if upgrading to v0.1.6 solves this problem?

[seb-celinedesign]

@RafidMuhymin Works in dev mode now.
But when I run astro build I've now this error :

 Error rendering: [Error: Could not load /src/images/image.jpg?format=avif&w=375;750;828&class=astro-YKH54IT4&aspect=0.75: Input file is missing] {
  code: 'PLUGIN_ERROR',
  plugin: 'vite-plugin-astro-imagetools',
  hook: 'load'
}

with

"astro": "^0.23.7",
"astro-imagetools": "^0.1.6"

(/src/images/image.jpgis a valid path)

Component call is :

<Image
    src={src}
    alt={alt}
    width={1920}
    breakpoints={[1280, 1366, 1920]}
    artDirectives={[
      {
        media: "(max-width: 767px)",
        src: src,
        width: 3,
        height: 4,
        breakpoints: [375, 375 * 2, 414 * 2],
      },
    ]}
  />

[RafidMuhymin]

@seb-celinedesign I'm unable to reproduce the issue with the code you provided above. Can you share a reproduction?

[RafidMuhymin]

@seb-celinedesign Can you check if upgrading to astro-imagetools@0.2.4 solves this problem?

[seb-celinedesign]

Ok found the issue. It's about image path.
If I remove the leading slash then in astro dev, I've this error :
error: Cannot find module 'src/images/equipe/newpool.jpg?format=avif&w=341;682;800;1242&position=top&class=astro-HADYBIEX&aspect=0.751101321585903' imported from 'node_modules/astro-imagetools/src/component/utils/getSrcset.js'
But Works fine in astro build

If I add the leading slash then in astro build, I've the error in my previous comment.

[RafidMuhymin]

What version of astro-imagetools are you using @seb-celinedesign ??

[seb-celinedesign]

What version of astro-imagetools are you using @seb-celinedesign ??

Lastest 0.2.7

[RafidMuhymin]

Can you check if upgrading to v0.2.10 solves this issue?

[seb-celinedesign]

Can you check if upgrading to v0.2.10 solves this issue?

astro dev and build broken 😩

Tried with astro 0.24.3 and astro-imagetools 0.2.10

> astro build

/dist/chunks/Image.3286bf33.mjs:8
import { fileTypeFromBuffer } from 'file-type';
         ^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'fileTypeFromBuffer' not found. The requested module 'file-type' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'file-type';
const { fileTypeFromBuffer } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:127:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:193:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:341:24)
    at async generatePage (file:///node_modules/astro/dist/core/build/static-build.js:239:24)
    at async generatePages (file:///node_modules/astro/dist/core/build/static-build.js:225:7)
    at async staticBuild (file:///node_modules/astro/dist/core/build/static-build.js:115:5)
    at async AstroBuilder.build (file:///node_modules/astro/dist/core/build/index.js:74:7)
    at async build (file:///node_modules/astro/dist/core/build/index.js:19:3)
    at async cli (file:///node_modules/astro/dist/cli/index.js:127:9)

astro dev

  🚀  astro  v0.24.3 started in 134ms
  
  ┃ Local    http://10.0.1.2:3000/
  ┃ Network  http://10.0.1.2:3000/
  
13:10:41 [serve] 500    /
13:10:41 [error] Error: Input file is missing

node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[Error: Input file is missing]

Node.js v17.6.0

[seb-celinedesign]

Problem solved, that was an image path problem. Paths need a trailing slash. As the documentation's said…