Vite not running on codeBuild, keeps saying cannot import SVG – Amazon Web Sevices

Things get confusing because paths act differently between dev and build (prod). I created a very simple example sandbox to help visual things using the Vite starter app. I would also recommend reading the Static Asset Handling. Also incredibly useful are the Vite Build Options which let you change where files are output.

Ideally, you want to use import reactSVG from './assets/react.svg' at the top of your component, then reference that src in the render using src={reactSVG). Both dev and build will be happy with that.

Or you should use an absolute path like /assets/react.svg, removing the . in front.

Besides the sandbox above, I wrote detailed notes on what’s happening inline above each image to help the understanding.

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          {/**
           * In dev, /vite.svg defaults to the "/public/vite.svg"
           * In build/prod, /vite.svg defaults to "/dist/vite.svg"
           * Use absolute paths or imports (below) when possible.
           */}
          <img
            src="/vite.svg"
            className="logo"
            alt="Vite logo"
            width="25"
            height="25"
          />
        </a>
        <a href="https://reactjs.org" target="_blank">
          {/**
           * Due to import magic, this works in both dev / build (prod)
           * Use imports or absolute paths when possible.
           */}
          <img
            src={reactLogo}
            className="logo react"
            alt="React logo"
            width="25"
            height="25"
          />
        </a>
        {/**
         * Here is where things go wrong with the default configuration:
         *
         * Example --- src="./assets/react.svg" won't work by default. Why?
         * In development, "./" equates to your project root, "/"
         *
         * In a basic Vite project, root contains "src", "public", and "dist", if you ran the `npm run build` command.
         * As you can see, there is no "assets" folder in project root. It's only contained
         * within "src" or the "dist" folder. This is where things get interesting:
         *
         * When you "build" your app, Vite appends unique strings at the end of your compiled .js
         * files in order to avoid cache side-effects on new deployments in the front-end.
         *
         * So in the built app folder ("dist"), your assets will look something like this:
         *
         * /dist/assets/react-35ef61ed.svg
         * /dist/assets/index-d526a0c5.css
         * /dist/assets/index-07a082e1.js
         *
         * As you can see, there is no "/assets/react.svg". It does not exist in the build,
         * which is why it's recommended that you import images at the top of your component
         * for local assets. You can use remote assets as inline string paths. ("https://...")
         */}
        <a href="https://vitejs.dev" target="_blank">
          <img
            src="./assets/react.svg"
            className="logo"
            alt="Never be visible"
            width="25"
            height="25"
            style={{ border: "1px red solid" }}
          />
        </a>
        {/* only works in dev, non-build */}
        <a href="https://vitejs.dev" target="_blank">
          <img
            src="/src/assets/react.svg"
            className="logo"
            alt="Visible in dev"
            width="25"
            height="25"
            style={{ border: "1px solid green" }}
          />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </div>
  );
}

export default App;