8.1.3 - Issue with running program when zx is webpacked due to deno.js

[td-krzysiek]

Hello,

I noticed an issue with zx version 8.1.3 and newer, where zx does not work well with Webpack. The problem occurs when the program tries to load deno.js, which does not exist after bundling the application. 8.1.2 seems to work fine, although reference to node_modules/zx/build/deno.js is the output file since 8.1.0.

node:internal/modules/cjs/loader:1249
  const err = new Error(message);
              ^

Error: Cannot find module './index.cjs'
Require stack:
- /Users/krzysiek/Documents/work/dev/td1023/gnss/node_modules/zx/build/deno.js
    at Function._resolveFilename (node:internal/modules/cjs/loader:1249:15)
    at Function._load (node:internal/modules/cjs/loader:1075:27)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:218:24)
    at Module.require (node:internal/modules/cjs/loader:1340:12)
    at require (node:internal/modules/helpers:141:16)
    at 13103 (/usr/jrd/gnss/vendor.js:1:1658751)
    at u (/usr/jrd/gnss/reset.js:1:6143)
    at /usr/jrd/gnss/reset.js:1:3399
    at u.a (/usr/jrd/gnss/reset.js:1:6736) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/krzysiek/Documents/work/dev/td1023/gnss/node_modules/zx/build/deno.js'
  ]
}

Node.js v22.11.0

tsconfig:

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "target": "ES2023",
    "lib": ["ES2023"],
    "outDir": "./build",
    "baseUrl": ".",
  }
}

[antongolub]

@td-krzysiek,

Provide a full reproducible example / repo ref plz.

[td-krzysiek]

Sure, the readme explains the steps to reproduce this problem:

example-issue.tar.gz

[antongolub]

This is definitely not zx or deno issue. I'm afraid webpack does not build the module tree properly, when ESM module uses the require API. But you can point the bundler to the cjs entry by hand:

resolve: {
    // Add '.ts' as a resolvable extension.
    extensions: ['.ts', '.js'],
    symlinks: false,
    alias: {
      "zx/build/index.js": "./node_modules/zx/build/index.cjs"
    }
    // plugins: [new TsconfigPathsPlugin({ extensions: ['.ts', '.js'] })],
  },

[td-krzysiek]

Thanks, I’ll apply this for the time being. What is the reason for using require instead of regular imports here? When I replace require with import, everything starts to work correctly, at least in the Node.js environment and in my simple example:

main.mjs

import { $ } from 'zx';
$.verbose = true;
await $`echo "Hello, world!"`;

[td-krzysiek]

The alias below woks for me:

{
  resolve: {
    extensions: ['.ts', '.js'],
    symlinks: false,
    alias: {
      "zx": path.resolve(__dirname, 'node_modules/zx/build/index.cjs'),
    },
  },
}

[antongolub]

When I replace require with import

This is a limitation of our bundler plugin for now: require(ref) or await import(ref). I'll add a re-export feature.

[antongolub]

@td-krzysiek,

Try v8.2.3-dev.b15179f and allow cjs here

resolve: {
    // Add '.ts' as a resolvable extension.
    extensions: ['.ts', '.js', ".cjs"],

[td-krzysiek]

@antongolub Thanks, I confirm that it bundles all files now (lines comes from resolve plugin):

plugin:

{
  apply(resolver: Resolver) {
    resolver.getHook('before-resolve')
      .tapAsync('AddonPlugin', (request, _resolveContext, callback) => {
        console.log(request.path, request.request);
        callback();
      });
  }
}

I can still see full deno.js file path in my output, however this doesn't cause any problem now since require isn't used any longer: