Compiler error when referencing import.meta.url in svelte scripts

[jacobdeichert]

Describe the bug

When trying to reference import.meta.url in a svelte script, a compiler error is thrown.

import.meta.url allows es modules to figure out what their filename/url is.

Logs

To Reproduce

Copy/paste this into the REPL and view the console log error.

<script>
    console.log(import.meta.url);
</script>

Expected behavior

Compilation should leave import.meta.* alone :)

Severity

This is blocking a proof of concept i'm developing for a svelte static site generator that eliminates static trees and only hydrates trees marked as dynamic (partial hydration).

[Conduitry]

As far as I can tell import.meta is still stage 3 and isn't an official part of javascript. We're not currently using any other Acorn plugins to allow parsing of non-accepted features. Is it worth adding one for this?

[jacobdeichert]

Ahh that makes sense... i noticed it was only stage 3.

Probably not worth it. I have a few alternative ideas i can try that don't require import.meta.url.

Feel free to close!

[jacobdeichert]

This is blocking a proof of concept i'm developing for a svelte static site generator that eliminates static trees and only hydrates trees marked as dynamic (partial hydration).

I just got my proof of concept working, so I'll define my use case a bit further here.

Since I filed this issue, I tried hard coding the filename just to make my poc work. This is the api that I could expose for the first version of my ssg.

<script>
    import { hydratable } from '/HydratableTree';
</script>

<!-- typing the path and filename is tedious and error prone -->
<div use:hydratable={['/components/this-components-filename.js', $$props]}>
    some component
</div>

However, if import.meta.url was not causing a compile error, the user would be able to do this instead:

<script>
    import { hydratable } from '/HydratableTree';
</script>

<div use:hydratable={[import.meta.url, $$props]}>
    some component
</div>

Anyway, I might need to explore writing a babel plugin if import.meta.url can't be fixed in svelte right now.

If you'd like me to look into a fix for allowing import.meta.url, I could do that. I understand it's on acorn's side, so I'm not sure how easy it is to fix this.

[jacobdeichert]

I figured out a hacky alternative to import.meta.url which works for my use case. Using an Error's stack trace to find the esm file's url 😅.

Since i'm using this inside headless chrome and not in production, my solution is good enough for me and you can feel free to close this issue.

[dishuostec]

Acorn was supported import.meta on 7.2.0, and snowpack use import.meta.env to store environment variables.

[FredKSchott]

In case anyone else gets here from Snowpack, you can work around this limitation by importing your env variables directly from URL (instead of via the import.meta.env shortcut):

import ENV from '/__snowpack__/env.js';
console.log(ENV);

[Conduitry]

This is supported now in 3.24.0.