sveltejs / sveltejs/kit

Option to disable the @sveltejs/package warning about `import.meta.env` in the code

Open
#11,414 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

pkg:svelte-package
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the problem

I'm using Vite + Svelte + @sveltejs/package to package Svelte components for my Svelte apps. One of the components needs to access window and therefore needs to check !import.meta.env.SSR to verify it is running on browser.

I'm not using SvelteKit because I don't need SSR.

The problem is, each time @sveltejs/package packages the component, it shows the warning:
Avoid usage of `import.meta.env` in your code. It requires a bundler to work. Consider using packages like `esm-env` instead which provide cross-bundler-compatible environment variables.

Even though I'm actually using Vite as the bundler, and my Svelte apps are also using Vite. i.e. I would always use Vite for Svelte projects.

I noticed the warning was introduced in https://github.com/sveltejs/kit/pull/8922.

Describe the proposed solution

Allow disabling the warning by adding comment above the line that uses import.meta.env.SSR.

For example,

// @sveltejs/package-disable-warning
const isBrowser = !import.meta.env.SSR;
Alternatives considered

Before I realized I don't need SSR and SvelteKit, the component library actually used SvelteKit and $app/environment to check if it is running on browser. But I noticed the packaged component kept $app/environment and therefore would limit my app that uses the component to also use SvelteKit.

I have also tried using Vite's build command with its library mode but failed to figure out how to build Svelte components. I would be pleased if anyone could enlighten me to build Svelte component without @sveltejs/package.

Importance

nice to have

Additional Information

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Search the @sveltejs/package warning implementation, starting from the warning text about import.meta.env and the linked SvelteKit pull request. Reproduce packaging a component that uses import.meta.env.SSR, then determine how an opt-out comment could be recognized; done means the warning can be disabled for that usage without suppressing unrelated warnings.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, vite
Domain
build-system
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.