#SVG assets not being built

21 messages · Page 1 of 1 (latest)

slate tapirBOT
#

Hi @leaden sentinel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the extracts provided, it seems like you're encountering a common issue where Astro's build process is unable to locate a file or directory. This error typically occurs when the build process attempts to access a file that doesn't exist in the specified location.

In your case, the error message indicates that Astro's build process is unable to find the file TLC_Logo.1a5076c8.svg at the path /Users/manzark/Developer/DEV-065_New_Website_Astro3.0/target/_astro/.

Here are a few things you could check:

  1. File Existence: Ensure that the file TLC_Logo.1a5076c8.svg actually exists in the directory /Users/manzark/Developer/DEV-065_New_Website_Astro3.0/target/_astro/.

  2. Correct Path: Check if the path specified in your code is correct. If your project structure has changed, you might need to update the paths in your code.

  3. Case Sensitivity: File paths are case-sensitive. Ensure that the case of the file and directory names in your code matches the actual case in your file system.

  4. Build Process: If you're using any custom build processes or scripts, ensure they are correctly configured and not causing the issue.

Unfortunately, without more specific information or code extracts related to your issue, it's difficult to provide a more precise solution. If the issue persists, consider creating an issue on the Astro GitHub page (https://github.com/withastro/astro/issues) for more targeted assistance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@leaden sentinel kapa.ai is still learning and improving, please let us know how it did by reacting below

leaden sentinel
#

@slate tapir This was not helpful – the file in question is supposed to be created during the build process, why is it not?

slate tapirBOT
#

Let me check the knowledge base for you. One moment! :books:

#

I'm sorry for the confusion. Based on the information provided in the extracts, it seems like there might be an issue with how Astro handles file paths during the build process.

In one of the GitHub issues (https://github.com/withastro/astro/issues/1188), it was mentioned that relative paths in Markdown files can cause build errors. The compiler might be resolving the relative path incorrectly.

In another GitHub issue (https://github.com/withastro/astro/issues/380), a user reported that HTML files were not being generated when a leading slash was missing in the CSS path.

While these issues are not exactly the same as yours, they suggest that Astro's build process might have some issues with handling file paths.

Unfortunately, without more specific information related to your issue, it's difficult to provide a more precise solution. If the issue persists, I recommend creating an issue on the Astro GitHub page (https://github.com/withastro/astro/issues) for more targeted assistance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@leaden sentinel kapa.ai is still learning and improving, please let us know how it did by reacting below

leaden sentinel
#

What specific information do you need to make a more informed response? @slate tapir

slate tapirBOT
#

Let me check the knowledge base for you. One moment! :books:

#

To provide a more informed response, it would be helpful to have the following information:

  1. Astro Configuration: The configuration of Astro in your project can affect how the build process works. Please provide your astro.config.mjs file if you have one.

  2. File Reference: How is the SVG file being referenced in your code? Please provide the code snippet where the SVG file is being used.

  3. Build Command: What command are you using to build your Astro project? If you're using a custom command, please provide it.

  4. Project Structure: A brief overview of your project structure might help identify if there are any issues with the file paths.

  5. Error Reproduction Steps: Detailed steps to reproduce the error would be very helpful. This includes the actions you take leading up to the error, and any specific conditions that must be met for the error to occur.

  6. Environment: Information about your development environment could also be useful. This includes your operating system, Node.js version, and package manager version.

With this information, we can better understand the context of your issue and provide a more accurate solution.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@leaden sentinel kapa.ai is still learning and improving, please let us know how it did by reacting below

leaden sentinel
#

Providing all that was asked for:
1.

import { defineConfig, squooshImageService } from 'astro/config';
import tailwind from '@astrojs/tailwind';
import compress from 'astro-compress';
import sitemap from '@astrojs/sitemap';
import robotsTxt from 'astro-robots-txt';
import mdx from '@astrojs/mdx';
import solidJs from '@astrojs/solid-js';
import icon from 'astro-icon';

// https://astro.build/config
export default defineConfig({
  prefetch: true,
  experimental: {
    i18n: {
      defaultLocale: 'en',
      locales: ['en', 'pl'],
    },
    contentCollectionCache: true,
  },
  srcDir: './src',
  publicDir: './public',
  outDir: './target',
  // TODO Place your site URL here
  // site: "https://adam-adams.com",
  compressHTML: false,
  integrations: [
    tailwind(),
    compress(),
    sitemap(),
    robotsTxt(),
    mdx(),
    solidJs(),
    icon({
      iconDir: 'src/assets/icons',
      include: {
        bi: ['music-note-beamed'],
        fad: ['*'],
        'icon-park-outline': ['*'],
        mdi: ['*'], // Loads entire Material Design Icon set
      },
    }),
  ],
  vite: {
    build: {
      sourcemap: true,
    },
  },
  image: {
    service: squooshImageService(),
  },
});

  1. The file is referenced as placement.data.channel_logo in the code:
    <Image src={placement.data.channel_logo} />. The example SVG channel_logo is: channel_logo: ../../assets/logos/Logo_M6_2020.svg

  2. yarn run build

  3. I have lots of entries in /src/content/placement/ where the SVGs are referenced. The SVGs are in /src/assets/logos/. The build is generated in /target/

  4. It is literally build command, and then when the other visual assets are generated, I am getting the error.

  5. macOS 12.7.1, Node 21.3.0, Yarn 4.0.2
    @slate tapir

slate tapirBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Thank you for providing the additional information. It seems like the issue might be related to how Astro handles relative paths during the build process.

In your case, the SVG file is being referenced with a relative path in your content files: channel_logo: ../../assets/logos/Logo_M6_2020.svg. This might be causing issues during the build process, as Astro might be resolving this path incorrectly.

Here are a few things you could try:

  1. Absolute Paths: Try changing the relative paths to absolute paths. For example, if your public directory is at the root of your project, you could reference the SVG file like this: channel_logo: /assets/logos/Logo_M6_2020.svg.

  2. Move SVGs to Public Directory: If the SVG files are not already in the public directory, try moving them there. Files in the public directory can be referenced directly in your code.

  3. Check SVG Files: Ensure that the SVG files are not corrupted and can be opened correctly. A corrupted SVG file could cause the build process to fail.

If none of these solutions work, this might be a bug with Astro. In that case, I recommend creating an issue on the Astro GitHub page (https://github.com/withastro/astro/issues) with the details you've provided here. The Astro team or community might be able to provide a more specific solution or fix.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@leaden sentinel kapa.ai is still learning and improving, please let us know how it did by reacting below

leaden sentinel
#

But I read in official Astro documentation that I need to reference the images in content collections relatively @slate tapir

slate tapirBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Yes, you're correct. According to the Astro documentation (https://docs.astro.build/en/guides/assets/#update-content-collections-schemas), images in content collections should be referenced relatively. This is especially important when using the image() helper in content collections, as it allows Astro to correctly resolve and optimize your images.

However, it seems like there might be an issue with how Astro is handling these relative paths during the build process. This is suggested by a GitHub issue (https://github.com/withastro/astro/issues/7199) where a contributor mentioned that to use relative images, you need to use the image() helper in content collections.

If you're already using the image() helper and still encountering the issue, it might be a bug with Astro. In this case, I recommend creating an issue on the Astro GitHub page (https://github.com/withastro/astro/issues) with the details you've provided here. The Astro team or community might be able to provide a more specific solution or fix.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@leaden sentinel kapa.ai is still learning and improving, please let us know how it did by reacting below

leaden sentinel
#

I am already using the image() Zod component in my TypeScript Collection definition @slate tapir

slate tapirBOT
#

Let me check the knowledge base for you. One moment! :books: