build error when importing .svg file using assets and import.meta.url

[lschierer]

bundling static assets...
bundling API routes...
Error: ENOENT: no such file or directory, open '/assets/TKRTipsLogo.svg'
    at async open (node:internal/fs/promises:638:25)
    at async Object.readFile (node:internal/fs/promises:1238:14)
    at async Object.transform (file:///Users/lschiere/src/schierer/EvonyTKRTips/node_modules/.pnpm/@[email protected]/node_modules/@greenwood/cli/src/config/rollup.config.js:308:31)
    at async transform (/Users/lschiere/src/schierer/EvonyTKRTips/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:20664:16)
    at async ModuleLoader.addModuleSource (/Users/lschiere/src/schierer/EvonyTKRTips/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:20877:36) {
  errno: -2,
  code: 'PLUGIN_ERROR',
  syscall: 'open',
  path: '/assets/TKRTipsLogo.svg',
  pluginCode: 'ENOENT',
  plugin: 'greenwood-import-meta-url',
  hook: 'transform',
  id: '/Users/lschiere/src/schierer/EvonyTKRTips/packages/greenwood/src/components/TopHeader.ts'
}
 ELIFECYCLE  Command failed with exit code 1.
lschiere@80a997121f31:~/src/schierer/EvonyTKRTips/packages/greenwood$ ls src/assets/TKRTipsLogo.svg
src/assets/TKRTipsLogo.svg
lschiere@80a997121f31:~/src/schierer/EvonyTKRTips/packages/greenwood$ ls -l src/assets/TKRTipsLogo.svg 
-rw-r--r--  1 lschiere  staff  21357 Feb  7 16:23 src/assets/TKRTipsLogo.svg
lschiere@80a997121f31:~/src/schierer/EvonyTKRTips/packages/greenwood$ ls -l public/
total 8
-rw-r--r--  1 lschiere  staff   21 Feb  7 16:29 1107222808.css
drwxr-xr-x  3 lschiere  staff   96 Feb  7 16:29 api
drwxr-xr-x  5 lschiere  staff  160 Feb  7 16:29 styles
lschiere@80a997121f31:~/src/schierer/EvonyTKRTips/packages/greenwood$ 

the page in question has

export default class TopHeader extends HTMLElement {
  private logo = new URL("/assets/TKRTipsLogo.svg", import.meta.url);
  connectedCallback() {
    let route = "";
    for (const attr of this.attributes) {
      if (!attr.name.localeCompare("route")) {
        route = attr.value;
      }
    }
    this.innerHTML = `
      <div class="header ">
        <div class="title-wrapper ">
          <a href='/' class="spectrum-Link spectrum-Link--quiet spectrum-Link--secondary">
            <img src="${this.logo.pathname.replace(window.location.pathname, "/")}" alt="Evony TKR Tips" class="logo micro-5-regular"/>
 .....

(there's obviously more, but trying to include just the relevant bit). Pages using this component work fine in dev mode, this only happens with build.

[lschierer]

config file:

import { greenwoodPluginTypeScript } from "@greenwood/plugin-typescript";
import { greenwoodPluginPostCss } from "@greenwood/plugin-postcss";
import { greenwoodPluginGoogleAnalytics } from "@greenwood/plugin-google-analytics";

//begin work around for https://github.com/TanStack/table/pull/5373
import { ResourceInterface } from "@greenwood/cli/src/lib/resource-interface.js";

class ProcessEnvReplaceResource extends ResourceInterface {
  constructor(compilation) {
    super();

    this.compilation = compilation;
  }

  async shouldIntercept(url) {
    // your custom condition goes here
    return url.pathname.includes("tanstack");
  }

  async intercept(url, request, response) {
    const body = await response.text();
    const env =
      process.env.__GWD_COMMAND__ === "develop" ? "development" : "production";
    const contents = body.replace(/process.env.NODE_ENV/g, `"${env}"`);

    return new Response(contents, {
      headers: new Headers({
        "Content-Type": "text/javascript",
      }),
    });
  }
}

//end workaround

export default {
  activeContent: true,
  isolation: true,
  optimization: "default",
  prerender: false,
  staticRouter: false,
  markdown: {
    plugins: ["rehype-autolink-headings", "remark-gfm", "remark-rehype"],
    settings: {
      commonmark: true,
    },
  },
  plugins: [
    {
      //include the workaround from above.
      type: "resource",
      name: "process-env-replace",
      provider: (compilation) => new ProcessEnvReplaceResource(compilation),
    },
    greenwoodPluginTypeScript({
      extendConfig: true,
    }),
    greenwoodPluginPostCss({
      extendConfig: false,
    }),
    greenwoodPluginGoogleAnalytics({
      analyticsId: "G-98HFQWP71B",
    }),
  ],
};

[thescientist13]

Ok, so I think this repro branch (with fix) is what what you're seeing and if so, I think i can provide some thoughts on the behavior you're showing here.

One thing to keep in mind when using the base option of new URL is to be sure to understand the importance between the distinction between a URL with and without a leading . when providing the first param of url; ./ or ../, vs just using /.

It might not be a big deal in the context of only running in the UI where ultimately resolving to / will work as a general catch all (assuming you're not using any sort of base path configuration), which would explain why development was working OK.

On the server side / for bundling through, the difference would actually be important as in your example, leading with the / produces two very different results. This is important as Greenwood will bundle these usages for you.

# forward slash
# new URL('/assets/greenwood-logo.png', import.meta.url)
URL {
  href: 'file:///assets/greenwood-logo.png',
  origin: 'null',
  protocol: 'file:',
  username: '',
  password: '',
  host: '',
  hostname: '',
  port: '',
  pathname: '/assets/greenwood-logo.png',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
}

# leading . 
# new URL('../../assets/greenwood-logo.png', import.meta.url)
 
URL {
  href: 'file:///Users/owenbuckley/Workspace/project-evergreen/greenwood-getting-started/src/assets/greenwood-logo.png',
  origin: 'null',
  protocol: 'file:',
  username: '',
  password: '',
  host: '',
  hostname: '',
  port: '',
  pathname: '/Users/owenbuckley/Workspace/project-evergreen/greenwood-getting-started/src/assets/greenwood-logo.png',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
}

TL;DR
In almost all cases when dealing with asset references like this, you'll want to start with . for maximum portability, and is how we demonstrate this usage in the docs, but acknowledge that we could improve / unify this overall DX though.

For now, this should work for you:

private logo = new URL("../path/to/assets/TKRTipsLogo.svg", import.meta.url);

---

That said, I am observing an issue in my repro branch that while things worked as expected with bundling and correctly inlined into the <img> tag with the expected path

The image isn't loading in the browser and VSCode indicates the file may be corrupted?

Interestingly, the source file is 7KB but the bundled output file is 12KB? 🤔

[thescientist13]

OK, think I found the issue regarding the corrupted image output. Opened up an issue for it and should be able to get this out in a patch release (v0.31.1) in the next few days.

[thescientist13]

Oh, found another bit of a bug adjacent to this - #1410

[thescientist13]

OK, PRs are up for both 👍

• bug/issue 1409 do not force encoding when bundling / emitting static asset contents #1411
• bug/issue 1410 handle static asset bundling of multiple usages of new URL and import.meta.url in the same file #1412

Will get these out in a release in a few days (along with issues identified in #1405)

[lschierer]

Oh. I see. I conflated two examples from https://greenwoodjs.dev/docs/resources/assets/ The one from https://greenwoodjs.dev/docs/resources/assets/#directory and the one from https://greenwoodjs.dev/docs/resources/assets/#url and tried to do the import.meta for the "place files anywhere" with a "file placed in assets."

[lschierer]

okay, so

 private logo = new URL("/assets/TKRTipsLogo.svg", window.URL.toString());
 ...
 <img src="${this.logo}" ...

works great. I am not sure I 100% followed the explanation, but it was enough to point me where I needed. Thanks :-)

I tried the branch you pointed at, it works with both build and dev? but you said it has a fix in it?

[thescientist13]

Yeah, /assets directory is basically just a $ cp -r ./src/assets /public/assets completely unprocessed. The callout for using new URL is that it will do bundling, so it will generate a unique filename, like Greenwood does for your JavaScript and CSS files.

For production builds, Greenwood will generate a unique filename for the asset as well, e.g. logo-83bc009f.svg.

(In most frameworks, this may be called the public/ directory, which I have been thinking of renaming it to)

---

private logo = new URL("/assets/TKRTipsLogo.svg", window.URL.toString());
...
<img src="${this.logo}" ...

hmm, yeah this looks a little clunky to me but if it works, it works. 👍

But at this point, you would probably just be better off embedding the path right into the HTML and cut-out all the new URL ceremony IMO

<img src="/assets/TKRTipsLogo.svg">

I am not sure I 100% followed the explanation

Sorry, maybe it got lost in the text / screenshots, but if wanting to use new URL here, I recommending doing it this way with the ../ instead of the /, to actually get the value of the filename hashing / bundling

For now, this should work for you:

private logo = new URL("../path/to/assets/TKRTipsLogo.svg", import.meta.url);

---

I tried the branch you pointed at, it works with both build and dev? but you said it has a fix in it?

Depends on which part of our discussion you're referring to, but if it's for the build issue you reported here, it's just because I used ../../ instead of /

If it's in regards to the corrupted image issue I reported, the second bug I observed is contributing to false positive, in that the first image path is not being bundled and doesn't have the hash segment in its file name, it's still just the original name, and only the NodeJS logo filename path is getting the hashed filename segment.

[thescientist13]

Thanks again for reporting.

The issue we uncovered here with static asset bundling should be all set now in the most recent release of Greenwood - v0.31.1