Parcel support for import.meta

[KaliedaRik]

❔ Question

Are there any plans for Parcel to support the import.meta Javascript object in the near future?
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta

🔦 Context

I have a requirement to use Javascript's import.meta in my module code, which I then use to build a url string to download and start a web worker. My code is entirely ES6 modular.

💻 Code Sample

const buildFilterWorker = function () {

let path = import.meta.url.slice(0, -('factory/filter.js'.length))
let filterUrl = `${path}worker/filter.js`;
return new Worker(filterUrl);

};

Running Parcel leads to the following build error:

$ parcel index.html
Server running at http://localhost:1234
🚨 factory/filter.js:191:19: Support for the experimental syntax 'importMeta' isn't currently enabled (191:20):
189 | const buildFilterWorker = function () {
190 |

191 | let path = import.meta.url.slice(0, -('factory/filter.js'.length))
| ^

🌍 Your Environment

Software	Version(s)
Parcel	1.12.3
Node	12.6.0
npm/Yarn	npm 6.9.0
Operating System	MacOSX

[mischnic]

Support for the experimental syntax 'importMeta' isn't currently enabled

This isn't an error from Parcel but from babel. It seems like you have an older version of @babel/parser installed.

But I don't think it would work after it parsed successfully.

Related: webpack/webpack#6719
babel/proposals#10

[KaliedaRik]

Many thanks for the speedy response and update.

I've been searching through the documentation, and the issues, and it appears that Parcel will run all code through Babel - Issue 1207 says this is a feature, not a bug (#1207).

As I'm not looking for my code to run through Babel - the library I'm building won't be supporting IE/Edge - I'm happy to let this issue be closed as "will not fix" - unless this is something you want to include in Parcel at some point in the future.

[mischnic]

it appears that Parcel will run all code through Babel

Yes.

unless this is something you want to include in Parcel at some point in the future.

Yes. import.meta is a stage 3 proposal and likely to become part of the standard.
Though I'm not quite sure (yet) whether this will require some explicit handling by Parcel or if the Babel behaviour will change.

[mischnic]

The only standardized property on import.meta so far is url (essentially __filename in the browser). Do we want to replace that with some path related to the current asset's path at bundle time? What would be the URL's protocol?

---

The spec specifically left import.meta extensible (e.g. for polyfills), so anything other then import.meta.url should be left untouched.
Whether the url property is looked up might not always be statically determinable, in these cases this is needed:

const $29abfa2312$importMeta = {...import.meta, url: "......"};

---

Browsers that don't support import.meta throw an error at parse time, so with an older browserslist, import.meta cannot be emitted. We should replace import.meta.url with a polyfill in that case
The same goes for outputFormat !== "esmodule"

---

I propose we add import.meta.hot as a replacement for module.hot.

https://github.com/tc39/proposal-import-meta

[jkrems]

I propose we add import.meta.hot as a replacement for module.hot.

I was about to open issue asking for that. Right now it doesn't seem possible to write a valid ES module that also supports hot reload (because it needs to reference a "file-scoped" module).

[jkrems]

Cross-posting from the webpack issue: I think import.meta.hot has one unfortunate downside - it will always be stuck as something that can't run as-is in an actual JavaScript engine like the browser. I was playing around with ways to make it work with an API that is also valid JavaScript and ended up with this: https://github.com/jkrems/embracejs/blob/7232ca46ea7d436707da35a7f2c1837020d60e3d/examples/hot-reload/static/model.mjs. In theory there could be an npm package with the hot API which parcel and other bundlers could use. The code would also work as-is (without a bundler) and could even support hot reloading given some additional setup.

[devongovett]

Yeah, the problem is, that doesn't truly replace the module, it can only replace what the module exports, and it cannot support default exports since they are not live bindings. We'd really need something more dynamic to truly support HMR with ES modules I think... 🤔

[jkrems]

I would expect that parcel and webpack would generally compile it away and not leave those references in the output chunks. I think live bindings of default should also work as long as a let/var is exported as default..?

[mischnic]

https://github.com/snowpackjs/esm-hmr

[mischnic]

Vite does use import.meta.env instead of process.env