Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jakedeichert opened this issue Feb 6, 2020 · 4 comments
Closed

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

jakedeichert opened this issue Feb 6, 2020 · 4 comments
Labels

Comments

@jakedeichert
Copy link

@jakedeichert jakedeichert commented Feb 6, 2020

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

Screen Shot 2020-02-05 at 8 31 06 PM

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

This comment has been minimized.

Copy link
Member

@Conduitry Conduitry commented Feb 6, 2020

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?

@Conduitry Conduitry added proposal and removed enhancement labels Feb 6, 2020
@jakedeichert

This comment has been minimized.

Copy link
Author

@jakedeichert jakedeichert commented Feb 6, 2020

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!

@jakedeichert

This comment has been minimized.

Copy link
Author

@jakedeichert jakedeichert commented Feb 6, 2020

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.

@jakedeichert

This comment has been minimized.

Copy link
Author

@jakedeichert jakedeichert commented Feb 7, 2020

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.

@Conduitry Conduitry closed this Feb 7, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.