Consider replacing import.meta.env rather than assigning it

[Rich-Harris]

Currently, if a module references import.meta.env, the env value is imported and then assigned to import.meta. This...

console.log(`SSR? ${import.meta.env.SSR}`);

...becomes this:

import __SNOWPACK_ENV__ from '../__snowpack__/env.js';
import.meta.env = __SNOWPACK_ENV__;

console.log(`SSR? ${import.meta.env.SSR}`);

But import.meta doesn't translate easily to other tooling. If you manually bundle the code through Rollup, for example, import.meta is treated as a special construct (which it must if import.meta.url is to survive the bundling step, etc), and import.meta.env becomes undefined.

Even if we stay within Snowpack, using import.meta like this is suboptimal. Using the experimental optimize option, we end up with this:

var o={MODE:"production",NODE_ENV:"production",SSR:!1},_={};_.env=o;console.log(`SSR? ${_.env.SSR}`);

With @snowpack/plugin-webpack, we get this:

(window.webpackJsonp = window.webpackJsonp || []).push([
  [0],
  [
    function (n, o, i) {
      "use strict";
      i.r(o);
      var e = { MODE: "production", NODE_ENV: "production", SSR: !1 };
      function t(n) {
        const o = i.p;
        let e = "";
        return (
          (!o || o.indexOf("://") < 0) &&
            (e += window.location.protocol + "//" + window.location.host),
          (e += o || "/"),
          e + n
        );
      }
      (({ url: t("/index.js"), env: e }.env = e),
        console.log(`SSR? ${{ url: t("/index.js"), env: e }.env.SSR}`));
    },
  ],
  [[0, 1]],
]);

I couldn't get snowpack-plugin-rollup-bundle to work at all

If Snowpack instead translated that code to the following...

import * as import_meta_env from '../__snowpack__/env.js';
console.log(`SSR? ${import_meta_env.SSR}`);

...and the env.js file was written thusly (instead of default-exporting an object)...

export const MODE = "production";
export const NODE_ENV = "production";
export const SSR = false;

...then we'd see these results with optimize and @snowpack/plugin-webpack:

var o=!1;console.log(`SSR? ${o}`);

(window.webpackJsonp = window.webpackJsonp || []).push([
  [0],
  [
    function (o, n, s) {
      "use strict";
      s.r(n);
      console.log("SSR? false");
    },
  ],
  [[0, 1]],
]);

This isn't just more compact and less brittle, the code will also execute faster, which could matter if you were checking import.meta.env.blah in a hot code path.

There are edge case bugs here — console.log(import.meta) wouldn't work the same way, for example. But I think that's just a question of documentation, and that the current issues around portability are more severe in any case.

[FredKSchott]

There's a nice middle ground here as well, where we do this this find-replace rewrite as a first-pass and then only include the import.meta.env assignment if we still detect any bare import.meta references.

// input: console.log(`SSR? ${import.meta.env.SSR}`);
import * as __SNOWPACK_ENV__ from '../__snowpack__/env.js';
console.log(`SSR? ${__SNOWPACK_ENV__.SSR}`);

// input: console.log(`SSR? ${import.meta.env}`);
import * as __SNOWPACK_ENV__ from '../__snowpack__/env.js';
console.log(`SSR? ${__SNOWPACK_ENV__}`);

// input: console.log(`SSR? ${import.meta}`);
import * as __SNOWPACK_ENV__ from '../__snowpack__/env.js';
import.meta.env = __SNOWPACK_ENV__;
console.log(`SSR? ${import.meta}`);

[Rich-Harris]

That's clever! I like it

[FredKSchott]

PR: #2013

[B-3PO]

I would like to not that adding the imports offsets the line numbers in errors. So i can no longer use the line number in the browser to look at the code line in my editor.