yargs: Webpack building broken

Upgraded from 15.4.1 to 16.0.3 and now all my scripts built with webpack now fail with the error.

Everything seems to compile, but when i run the resulted js file, I get

TypeError: y18n is not a function

https://github.com/yargs/yargs/blob/eb2b29d34f1a41e0fd6c4e841960e5bfc329dc3c/lib/platform-shims/cjs.ts#L40

If i modify the exported code to use y18n.y18n( then it works… also I needed to change all shim$1.Parser to shim$1.Parser.default

simple webpack.config.js // works in 15.4.1

var path = require('path');

module.exports = async (env, argv) => {
  let config = {
    mode: "development",
    entry: {
      "test": "./index.js",
    },
    output: {
      path: path.resolve(__dirname, "dist")
    },
    target: 'node',
    devtool: "source-map-inline",
  };
  return config;
}

index.js

var yargs = require('yargs');

console.log(yargs.argv);

webpack@4.44.1 with yargs@15.4.1 works

$ node dist/test.js
{ _: [], '$0': 'dist/test.js' }

webpack@4.44.1 with yargs@16.0.3 compiles but fails to run

$ node dist/test.js
dist/test.js:5012
    y18n: y18n({
          ^

TypeError: y18n is not a function
    at Object.<anonymous> (dist/test.js:5012:11)
    at Object../node_modules/yargs/build/index.cjs (dist/test.js:5045:30)
    at __webpack_require__ (dist/test.js:20:30)
    at Object../node_modules/yargs/index.cjs (dist/test.js:5061:32)
    at __webpack_require__ (dist/test.js:20:30)
    at Object../index.js (dist/test.js:96:13)
    at __webpack_require__ (dist/test.js:20:30)
    at dist/test.js:84:18
    at Object.<anonymous> (dist/test.js:87:10)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)

Note: I was able to get it to work via some strange settings

var path = require('path');

module.exports = async (env, argv) => {
  let config = {
    mode: "development",
    entry: {
      "test": "./index.js",
    },
    output: {
      path: path.resolve(__dirname, "dist")
    },
    target: 'node',
    devtool: "source-map-inline",
    externals: {
      'y18n': 'commonjs2 y18n',
      'yargs-parser': 'commonjs2 yargs-parser',
    },
  };
  return config;
}

I had to explicitly tell webpack to import y18n and yargs-parser via commonjs2 methods.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 1
  • Comments: 18 (11 by maintainers)

Commits related to this issue

Most upvoted comments

found a quick fix, could break some builds…

webpack.config.js

  resolve: {
    mainFields: [ 'main' ]
  }

This will force all modules to use the main or in yargs case, the commonjs build, instead of the module ones.

I’m not using a browser as you can see with my configuration. “target: ‘node’”. I generally use webpack to compile a typescript app to a single standalone app (.js file) so that i can run it on a machine that has node but can’t install anything from a repository.

webpack will pull in the node_modules (except for binary specific, which i don’t use)

I just created a simple (non typescript) example that also failed.

https://github.com/yargs/yargs/pull/1759 <-- the main issue should be fixed.

when running webpack

ERROR in /u/projects/repos/yargs/lib/platform-shims/esm.mjs 18:41
Module parse failed: Unexpected token (18:41)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const REQUIRE_DIRECTORY_ERROR = 'loading a directory of commands is not supported yet for ESM'
|
> const mainFilename = fileURLToPath(import.meta.url).split('node_modules')[0]
| const __dirname = fileURLToPath(import.meta.url)
|
 @ /u/projects/repos/yargs/index.mjs 4:0-58 7:28-43
 @ ./index.js

which at least LOOKS correct as its now loading the index.mjs now

@dl748 @ Michael-Tajmajer-Bentley I suggest opening an issue on Webpack too, and I’ll happily take a patch to our docs.

My reasoning being that ESM should certainly be easily Webpacked, and I’m surprised that Webpack isn’t properly consuming ESM modules.

I also use webpack on my nodeJs services. It keeps the clutter down and allows for quickly updating containers while troubleshooting issues inside of clusters.