Git Product home page Git Product logo

Comments (16)

RafidMuhymin avatar RafidMuhymin commented on August 22, 2024

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

from astro-imagetools.

RafidMuhymin avatar RafidMuhymin commented on August 22, 2024

@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?

from astro-imagetools.

seb-celinedesign avatar seb-celinedesign commented on August 22, 2024

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

from astro-imagetools.

RafidMuhymin avatar RafidMuhymin commented on August 22, 2024

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

from astro-imagetools.

seb-celinedesign avatar seb-celinedesign commented on August 22, 2024

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.

from astro-imagetools.

RafidMuhymin avatar RafidMuhymin commented on August 22, 2024

Can you share the code?

from astro-imagetools.

RafidMuhymin avatar RafidMuhymin commented on August 22, 2024

@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?

from astro-imagetools.

seb-celinedesign avatar seb-celinedesign commented on August 22, 2024

@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],
      },
    ]}
  />

from astro-imagetools.

RafidMuhymin avatar RafidMuhymin commented on August 22, 2024

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

from astro-imagetools.

RafidMuhymin avatar RafidMuhymin commented on August 22, 2024

@seb-celinedesign Can you check if upgrading to [email protected] solves this problem?

from astro-imagetools.

seb-celinedesign avatar seb-celinedesign commented on August 22, 2024

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.

from astro-imagetools.

RafidMuhymin avatar RafidMuhymin commented on August 22, 2024

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

from astro-imagetools.

seb-celinedesign avatar seb-celinedesign commented on August 22, 2024

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

Lastest 0.2.7

from astro-imagetools.

RafidMuhymin avatar RafidMuhymin commented on August 22, 2024

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

from astro-imagetools.

seb-celinedesign avatar seb-celinedesign commented on August 22, 2024

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

from astro-imagetools.

seb-celinedesign avatar seb-celinedesign commented on August 22, 2024

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

from astro-imagetools.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.