Critical dependency: the request of a dependency is an expression

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.

[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.

[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.