import.meta

I recently found out about the import.meta syntax while working on Sanity that uses Vite.

The import.meta is an object that is bundled with the JavaScript Modules. It contains information about the module and is extensible.

The following is an example of using the query parameters with the import syntax.


_10
<script type="module">
_10
import "./index.mjs?someParams=foo";
_10
</script>

The index.mjs module is able to read the parameters someParams using the import.meta syntax


_10
new URL(import.meta.url).searchParams.get("someParams"); // foo

This is something new to me in which it cannot be done when using process.env

TypeScript

We are able to create the typing through env.d.ts in the root of the project


_10
// env.d.ts
_10
interface ImportMetaEnv {
_10
SOME_ENV_VARIABLE: string;
_10
}
_10
_10
interface ImportMeta {
_10
readonly env: ImportMetaEnv;
_10
}

Uses

This is normally used in the browser.