Critical dependency: the request of a dependency is an expression

[idonava]

Hello, I'm getting this warning when using curlconverter dependency. Any idea how to solve it?

Compiled with warnings.
./node_modules/curlconverter/node_modules/yargs/lib/parser.js
Critical dependency: the request of a dependency is an expression

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

[NickCarneiro]

I think I need to update the yargs package dependency inside curlconverter.

In the meantime you can suppress the warning in webpack config: https://github.com/ivan-aksamentov/reactlandia-bolerplate-lite/issues/5#issuecomment-413306341

[idonava]

Thanks, @NickCarneiro! Unformantly It's too risky to add this package to my project with this warning.

I cloned the project, tried to upgrade yargs to the latest version, but the tests didn't pass because some new characters are added to the actual response (%22, %27, \', ...)

for example (python) post with urlencoded data: red - expected green - actual

[NickCarneiro]

Here is the yargs patch on my fork. https://github.com/yargs/yargs/compare/master...NickCarneiro:master

[idonava]

I make some changes in curlconverter and yargs-parser (split from yargs to another package). All the tests are passed now, but I couldn't compile the updated cuelconverter and didn't check it in my project. https://github.com/idonava/curlconverter https://github.com/idonava/yargs-parser

[NickCarneiro]

Great work. I've published a new version (3.13.0) that references your fork of yargs-parser. Does this fix the warning for you?

[idonava]

Unformentualy not, I'm getting an new error and when I trying to fix it by install @babel/plugin-syntax-import-meta, another issue occurs. Did you test it live? I this it's better revert to 3.12.0

./node_modules/curlconverter/node_modules/yargs/lib/platform-shims/esm.mjs
SyntaxError: /Users/idonava/test/node_modules/curlconverter/node_modules/yargs/lib/platform-shims/esm.mjs: Support for the experimental syntax 'importMeta' isn't currently enabled (18:43):

  16 | const REQUIRE_DIRECTORY_ERROR = 'loading a directory of commands is not supported yet for ESM'
  17 | 
> 18 | const mainFilename = fileURLToPath(import.meta.url).split('node_modules')[0]
     |                                           ^
  19 | const __dirname = fileURLToPath(import.meta.url)
  20 | 
  21 | export default {

Add @babel/plugin-syntax-import-meta (https://git.io/vbKK6) to the 'plugins' section of your Babel config to enable parsing.

[NickCarneiro]

Here is what I'm seeing from a clean install in a fresh directory.

goldengate:curlpackage nick$ node --version
v12.13.1
goldengate:development nick$ mkdir curlpackage
goldengate:development nick$ cd curlpackage/
goldengate:curlpackage nick$ npm install curlconverter
+ curlconverter@3.13.0
added 55 packages from 43 contributors in 65.192s
node convert.js (the example from the readme)
[output here]

[sPaCeMoNk3yIam]

@NickCarneiro Same issue:

ERROR in ./node_modules/curlconverter/node_modules/yargs/lib/platform-shims/esm.mjs 28:39
Module parse failed: Unexpected token (28:39)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| var REQUIRE_ERROR = 'require is not supported by ESM';
| var REQUIRE_DIRECTORY_ERROR = 'loading a directory of commands is not supported yet for ESM';
> var mainFilename = fileURLToPath(import.meta.url).split('node_modules')[0];
| 
| var __dirname = fileURLToPath(import.meta.url);

[sPaCeMoNk3yIam]

@NickCarneiro this is actually not resolved. Did you find the time to have a look into it and have an update for us?

[verhovsky]

@sPaCeMoNk3yIam we just released 3.20.0 which fixed some issues with installing. Can you please check that this issue is still happening?

If this is still a problem, please post the exact commands that I need to run to get this error, similar to how Nick posted the exact commands he ran in https://github.com/curlconverter/curlconverter/issues/249#issuecomment-751538239 to show you that he is able to install it without any errors.

[lueans]

version: 3.21.0 node -version 14.17.6

Failed to compile.

./node_modules/@curlconverter/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)

[verhovsky]

How are you compiling your code?

[lueans]

This is a Vue project【@vue/cli 4.5.10】 vue -V @vue/cli 4.5.10

node -v v14.17.6

curlconverter【3.21.0】

1、vue create demo 2、 npm install --save curlconverter 3、npm run dev

[verhovsky]

After running these commands:

npm install -g @vue/cli
cd /tmp
vue create demo
cd demo
npm install --save curlconverter@3.21.0
npm install --save assert
npm install --save util
npm install --save path-browserify
npm install --save url

Then making this my vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    resolve: {
      fallback: {
        "util": require.resolve("util/"),
        "assert": require.resolve("assert/"),
        "path": require.resolve("path-browserify"),
        "url": require.resolve("url/"),
        "fs": false
      }
    }
  }
})

then running

npm run serve

I also see this warning:

 WARNING  Compiled with 2 warnings                                                 5:24:40 a.m.

 warning  in ./node_modules/@curlconverter/yargs-parser/build/index.cjs

Critical dependency: the request of a dependency is an expression

 warning  in ./node_modules/@curlconverter/yargs/build/index.cjs

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

When I open the site in my browser though, I see this error in the console:

Uncaught ReferenceError: process is not defined
    at eval (index.cjs?35d5:1020:1)
    at ./node_modules/@curlconverter/yargs-parser/build/index.cjs (chunk-vendors.js:2592:1)
    at __webpack_require__ (app.js:369:33)
    at fn (app.js:615:21)
    at eval (index.cjs?20f1:1:1)
    at ./node_modules/@curlconverter/yargs/build/index.cjs (chunk-vendors.js:2603:1)
    at __webpack_require__ (app.js:369:33)
    at fn (app.js:615:21)
    at eval (index.cjs?10e2:5:1)
    at ./node_modules/@curlconverter/yargs/index.cjs (chunk-vendors.js:2614:1)

Looking at the code it's trying to access process somewhere, which should be a Node only variable, it doesn't exist in the browser.

I tried doing npm install --save process and changing vue.config.js to

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack');

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        process: 'process/browser',
      })
    ],
    resolve: {
      fallback: {
        "util": require.resolve("util/"),
        "assert": require.resolve("assert/"),
        "path": require.resolve("path-browserify"),
        "url": require.resolve("url/"),
        "fs": false
      }
    }
  }
})

and got this error

Uncaught TypeError: Cannot read properties of undefined (reading 'columns')
    at eval (index.cjs?20f1:formatted:2625:59474)
    at ./node_modules/@curlconverter/yargs/build/index.cjs (chunk-vendors.js:2613:1)
    at __webpack_require__ (app.js:369:33)
    at fn (app.js:615:21)
    at eval (index.cjs?10e2:5:1)
    at ./node_modules/@curlconverter/yargs/index.cjs (chunk-vendors.js:2624:1)
    at __webpack_require__ (app.js:369:33)
    at fn (app.js:615:21)
    at eval (util.js?9b03:2:1)
    at ./node_modules/curlconverter/util.js (chunk-vendors.js:382:1)

which looks like it might be doing process.stdout.columns somewhere. I also tried setting process to null like this

    plugins: [
      new webpack.DefinePlugin({
        'process': null,
      })
    ],

and it errored somewhere else, so this is a dead end.

I came across https://github.com/yargs/yargs/blob/main/docs/browser.md which suggests that if you want to use yargs in the browser, you have to import a different thing than if you import it from node. So it looks like curlconverter 3 has been un-runnable in the browser since whichever version upgraded yargs to this version that doesn't work in the browser. I assume this used to work.

curlconverter 4 doesn't use yargs anymore. You have to copy files from the node_modules/ folder to get it to work, you can see how we do that with webpack for the production website here: https://github.com/curlconverter/curlconverter.github.io/blob/d98b376dd538e8af54934461447099534f27db24/webpack.config.js#L53-L54

We could do something similar to what we do with curlconverter 4, where we have 2 different files for loading the node or the web version of the bash parser here

https://github.com/curlconverter/curlconverter/blob/85403b76642e7b55f03b6c13aa49c7ef126ec29d/src/bash-parser.ts

https://github.com/curlconverter/curlconverter/blob/85403b76642e7b55f03b6c13aa49c7ef126ec29d/src/bash-parser-web.ts

and then use browser: in package.json to overwrite one with the other:

https://github.com/curlconverter/curlconverter/blob/85403b76642e7b55f03b6c13aa49c7ef126ec29d/package.json#L80

if that's possible. Then we'd have to release a 3.22.0.

Fortunately, I got curlconverter 4 working with Vue, I had to do this in my vue.config.js

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack');
const CopyPlugin = require("copy-webpack-plugin")

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    experiments: {
      topLevelAwait: true
    },
    plugins: [
      new CopyPlugin({
        patterns: [
          {from: 'node_modules/web-tree-sitter/tree-sitter.wasm', to: 'js'},
          'node_modules/curlconverter/dist/tree-sitter-bash.wasm'
        ]
      })
    ],
    resolve: {
      fallback: {
        // I don't know which (if any) of these are necessary
        "util": require.resolve("util/"),
        "assert": require.resolve("assert/"),
        "path": require.resolve("path-browserify"),
        "url": require.resolve("url/"),
        "fs": false
      }
    }
  }
})

and then I was able to

import {toPython} from 'curlconverter'
console.log(toPython('curl aoeu'))

in App.vue.