bundle with esbuild fails because yargs/yargs does not have file extension

[cspotcode]

Possible duplicate of #1929 but I'm not sure because that ticket is too vague.

esbuild determines content types based on file extension. esbuild docs

But yargs/yargs does not have a file extension.

This raises an error:

$ echo 'import createYargs from "yargs/yargs";' | yarn esbuild --bundle --loader=js
 > <stdin>:1:24: error: Do not know how to load path: node_modules/yargs/yargs
    1 │ import createYargs from "yargs/yargs";
      ╵                         ~~~~~~~~~~~~~

1 error

[bcoe]

Keeping this file without an extension is a hack necessary to prevent yargs from treating the file as ESM, since for the benefit of TypeScript, the package.json is of type, module.

This can be fixed as soon as TypeScript supports a .mjs extension.

[cspotcode]

We can probably devise a solution all the same, such as moving that file into ./yargs/index.js with a nested package.json.

[cspotcode]

for the benefit of TypeScript, the package.json is of type, module.

Do you have a link to the issues or PRs where this decision was discussed?

[bcoe]

Do you have a link to the issues or PRs where this decision was discussed?

@cspotcode no, this design grew organically while trying to support both CJS and ESM in the same module.

The approach is discussed, without much detail, here.

Open to other approaches as long as all existing tests continue working, and we verify functionality on all supported Node runtimes.

[bbeesley]

you can work around this if you're compiling with babel by having one config for the mjs and one for the cjs and using something like:

  const plugins = [
    ['babel-plugin-add-import-extension', { extension: 'mjs', replace: true }],
  ];

Understand you can't really do that with typescript at the moment, but a workaround like that, while still using tsc with --emitDeclarationsOnly would solve the problem.

[yoursunny]

This is becoming a fatal error with Node 17.x where the top-level project is Node.js ESM (not TypeScript).

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension "" for /home/ubuntu/app/node_modules/.pnpm/yargs@17.3.1/node_modules/yargs/yargs
    at new NodeError (node:internal/errors:371:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:84:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:99:38)
    at defaultLoad (node:internal/modules/esm/load:21:14)
    at ESMLoader.load (node:internal/modules/esm/loader:359:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:280:58)
    at new ModuleJob (node:internal/modules/esm/module_job:66:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:297:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:261:34)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:81:21)
 ```

[bcoe]

In the next major I'll look at dropping the yargs/yargs hack.

[Creative-Difficulty]

Do you have a link to the issues or PRs where this decision was discussed?

@cspotcode no, this design grew organically while trying to support both CJS and ESM in the same module.

The approach is discussed, without much detail, here.

Open to other approaches as long as all existing tests continue working, and we verify functionality on all supported Node runtimes.

For me This worked!

[hongaar]

This should be fixed with #2151 (note this fix is only available from NPM after #2185 is merged & released)

[JuanCruzTrinidad]

Hello!
I am here to share my solution.
You can get around this error by using the following esbuild plugin: esbuild-plugin-alias
With the plugin, you can alias some file call, like this:

[bcoe]

I believe there are a couple workaround in this thread now, also @hongaar's update was merged and released.

[LuisAzeved]

I'm using puppeteer and I have this error:

ERROR: Do not know how to load path: ../../node_modules/@puppeteer/browsers/node_modules/yargs/yargs

It fails on this line:

const yargs_1 = __importDefault(require("yargs/yargs"));

Any idea on how to fix this?

Some relevant files:

tsconfig.json

  {
  "extends": "../../tsconfig.base.json",
  "compilerOptions":  { 
     
    "jsx": "react-jsx",
    /* Language and Environment */
    "target": "ES2015",
    "lib": [
      "es6",
      "DOM"
    ],

    /* Modules */
    "module": "commonjs" /* Specify what module code is generated. */,
    "resolveJsonModule": true /* Enable importing .json files */,

    /* Module Resolution */
    "baseUrl": "." /* This must be specified if "paths" is. */,

    /* JavaScript Support */
    "allowJs": true /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */,
    "sourceMap": true /* Enables the generation of sourcemap files */,

    /* Emit */
    "declaration": true,
    "downlevelIteration": true,
    "outDir": "dist" /* Specify an output folder for all emitted files. */,

    /* Interop Constraints */
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

    /* Type Checking */
    "strict": true /* Enable all strict type-checking options. */,
    "noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied `any` type.. */,
    "noEmitOnError": true,
    /* Completeness */
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  },
  "include": [
    "./config/**/*",
    "serverless.ts",
    "./src/**/*",
    "./lib/**/*",
    "./middleware/**/*",
    "./__tests__/**/*",
    "res/**/*",
    "**/*.tsx",
    "**/*"
  ]
}

[shadowspawn]

You have a different problem @LuisAzeved than this issue is about. Would you please open a new issue, and include how you are including yargs in your code. (The example line you gave is useful but looks like it is from the transpiled code.)

Also asked on Stack Overflow with some additional context: https://stackoverflow.com/questions/77635667/cannot-use-puppeteer-because-it-fails-loading-yargs-yargs-dependency

[chrisowebb]

@LuisAzeved did you manage to fix your issue?