ESM target file support

[RyanClementsHax]

Feature Proposal

Feature Use Case

After careful searching of the web, it seems that val-loader does not support target files expressed as esm. What do you think about adding this ability? In short, it would allow us to express target files as such:

export default (options, loaderContext) => {
  return { code: "module.exports = 42;" };
};

Right now it fails with the following error Unable to execute "<the file name>": SyntaxError: Unexpected token 'export'

I tried to find if any related work has been done on this before submitting this request and the closest seems to be this issue #13 for reference

Please paste the results of npx webpack-cli info here, and mention other relevant information

System:
OS: Linux 4.19 Ubuntu 20.04.1 LTS (Focal Fossa)
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 1.49 GB / 7.72 GB
Binaries:
Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
Yarn: 3.1.0 - ~/.nvm/versions/node/v16.13.0/bin/yarn
npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
Packages:
css-loader: ^6.5.0 => 6.5.0
postcss-loader: ^6.1.1 => 6.2.0
sass-loader: ^12.3.0 => 12.3.0
style-loader: ^3.3.1 => 3.3.1
val-loader: ^4.0.0 => 4.0.0
webpack: ^5.60.0 => 5.60.0

[alexander-akait]

Because it is not supported by Node.js https://nodejs.org/api/vm.html#class-vmmodule, experimental

[alexander-akait]

Shorty - we don't have ability to evaluate ESM on Node.js side right now

[RyanClementsHax]

Ah thanks! I wasn't aware esm in node was experimental. My bad.

[alexander-akait]

We can keep this open until it was will be stable

[grewem-elm]

It is Stable now -> https://nodejs.org/api/esm.html

[alexander-akait]

Great, it is not very priority right now, if anyone wants to send a PR - welcome

[dreyks]

i think we still need to wait till vm.Module becomes stable because that's what we need to execute an ES module in webpack's context

[alexander-akait]

I am fine to accept pr

[hmidmrii]

can't we just use esm for evaluating that?
or maybe better we can use tsx to support TypeScript as well, and both support complex CJS and ESM imports which makes it even better

[hmidmrii]

or we can add a loader to bundle the file into CJS, which works as of now

[hmidmrii]

or use bun as a runtime when executing the webpack command

[dreyks]

unfortunately esm package doesn't work with newer Node versions and seems to be abandoned :(

[alexander-akait]

@dreyks What do you mean?

[dreyks]

@alexander-akait the package that @hmidmrii suggested we use — esm https://github.com/standard-things/esm — is archived and is not compatible with Node 22 standard-things/esm#931

[alexander-akait]

To be honest, the implementation of this does not seem difficult - vm.Module

[hmidmrii]

Oh I didn't know that Thanks @dreyks,
but can we still use tsx? I'm not sure if there is an API to it or it's only works in cli

[dreyks]

As Alexander mentioned this should be done using a node-native (although still experimental) virtual module execution mechanism