loading a directory of commands is not supported yet for ESM

[lueans]

ERROR Failed to compile with 1 error 8:36:56 PM

error in ./node_modules/@curlconverter/yargs/lib/platform-shims/esm.mjs

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)

node -v 14

[verhovsky]

I really want to fix this, so can you please provide more information? Which version of curlconverter are you using (grep curlconverter package.json)? What does your webpack.config.js and index.js look like? This error happens when you run webpack, right?

[verhovsky]

Closing as dupe of #249

[www-j99]

did you solve the problem, I meet the same and didn't solved

[verhovsky]

@www-j99 can you please post step-by-step instructions with code and which version of node and operating system you're using that I can follow to experience this issue?

[yuanchenhuan]

1、type 'npm install curlconverter --save' in the terminal of WebStorm for 'Vue2' frontend project
2、import curlconverter from 'curlconverter'
3、compile

[SoLoHiC]

Same problem encountered here. I'm trying use this lib's APIs in our vue project which running in browser.
using "curlconverter": 3.21.0", plus, "@curlconverter/yargs": "0.0.2" as dependency.

After doing some search, i tried the solution using "@open-wc/webpack-import-meta-loader" from vuejs forum. By configuring vue.config.js file with code below, I managed to avoid the "compilation failure" mentioned in this issue:

         module: {
            rules:[
                {
                    test: /\.mjs$/,
                    include: /node_modules/,
                    loader: require.resolve('@open-wc/webpack-import-meta-loader'),
                    type: "javascript/auto",
                },
            ]
        },

but unfortunately, another runtime error pops:

esm.mjs:36:1, which leading me to the compiled code:

this is as far as i get, not sure if it would help.

and contextual dependency:
vue: 2.6.10

full dependency section in package.json ( which basically follows project template, clone this template project locally and add curlconverter as its dependency may helps reproducing this problem:

{
  "name": "qm-plus-vue-page",
  "version": "0.1.0",
  "private": true,
  "scripts": {...},
  "dependencies": {
    "@moefe/vue-aplayer": "^2.0.0-beta.5",
    "axios": "^0.19.0",
    "clipboard": "^2.0.6",
    "core-js": "^2.6.5",
    "echarts": "^4.7.0",
    "el-table-infinite-scroll": "^1.0.10",
    "element-ui": "^2.12.0",
    "file-saver": "^2.0.5",
    "generate-schema": "^2.6.0",
    "har-to-k6": "^0.13.1",
    "mavon-editor": "^2.7.7",
    "path": "^0.12.7",
    "qs": "^6.8.0",
    "quill": "^1.3.7",
    "screenfull": "^5.0.2",
    "spark-md5": "^3.0.1",
    "svg-sprite-loader": "^5.0.0",
    "timeline-vuejs": "1.1.1",
    "tinymce": "^5.4.1",
    "video.js": "^7.6.0",
    "vue": "^2.6.10",
    "vue-particle-line": "^0.1.4",
    "vue-router": "^3.1.3",
    "vue2-ace-editor": "^0.0.15",
    "vuedraggable": "^2.24.0",
    "vuescroll": "^4.14.4",
    "vuex": "^3.1.1",
    "vuex-persist": "^2.1.0",
    "xlsx": "^0.16.9",
    "@babel/core": "^7.5.5",
    "@babel/types": "^7.5.5",
    "curlconverter": "^3.21.0",
    "@curlconverter/yargs": "^0.0.2",
    "@open-wc/webpack-import-meta-loader": "^0.4.7"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "sass": "^1.32.8",
    "sass-loader": "^8.0.0",
    "script-ext-html-webpack-plugin": "^2.1.4",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

[verhovsky]

@SoLoHiC thanks for the info. Out of curiosity, can you try npm install curlconverter@next? You'll need to serve the .wasm file from node_modules for it to work, you can see how we do it with webpack in the website's repo: https://github.com/curlconverter/curlconverter.github.io

[verhovsky]

I reproduced this with 4.4.1 on node: 'v18.12.1', npm: '8.19.2' on macOS 13.1 like this:

git clone [email protected]:PanJiaChen/vue-admin-template.git curlconverter-315
cd curlconverter-315/
echo 'import * as cc from "curlconverter"' >> src/main.js
npm install curlconverter --save
npm run dev

I got this error:

 ERROR  Failed to compile with 1 error                                                                                                                       10:04:37 p.m.

 error  in ./node_modules/curlconverter/dist/src/bash-parser-web.js

Module parse failed: Cannot use keyword 'await' outside an async function (4:0)
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
| // NOTE: Top-level await is not available in Safari until Safari 15
| // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#browser_compatibility
> await Parser.init();
| const Bash = await Parser.Language.load("/tree-sitter-bash.wasm");
| const parser = new Parser();

 @ ./node_modules/curlconverter/dist/src/util.js 2:0-38 982:16-22
 @ ./node_modules/curlconverter/dist/src/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.2:9528&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

curlconverter uses top level await. You need to have experiments: { topLevelAwait: true }, in your webpack config (see curlconverter.com's webpack config), which you could do in vue.config.js like this

  configureWebpack: {
    experiments: {
      topLevelAwait: true
    },
  },

but experiments: requires Webpack 5 and that repo is using Webpack 4.

I tried running vue upgrade in that repo to get it to install the version 5 of the Vue cli tools which use Webpack 5, but I got this error:

Upgrading @vue/cli-plugin-babel from 4.4.4 to 5.0.8
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @vue/[email protected]
npm ERR! Found: @vue/[email protected]
npm ERR! node_modules/@vue/cli-service
npm ERR!   peer @vue/cli-service@"^3.0.0 || ^4.0.0 || ^5.0.0-0" from @vue/[email protected]
npm ERR!   node_modules/@vue/cli-plugin-router
npm ERR!     @vue/cli-plugin-router@"^5.0.8" from @vue/[email protected]
npm ERR!   peer @vue/cli-service@"^3.0.0 || ^4.0.0 || ^5.0.0-0" from @vue/[email protected]
npm ERR!   node_modules/@vue/cli-plugin-vuex
npm ERR!     @vue/cli-plugin-vuex@"^5.0.8" from @vue/[email protected]
npm ERR!   2 more (the root project, @vue/cli-plugin-babel)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/[email protected]
npm ERR! node_modules/@vue/cli-plugin-eslint
npm ERR!   dev @vue/cli-plugin-eslint@"4.4.4" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @vue/[email protected]
npm ERR! node_modules/@vue/cli-service
npm ERR!   peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/[email protected]
npm ERR!   node_modules/@vue/cli-plugin-eslint
npm ERR!     dev @vue/cli-plugin-eslint@"4.4.4" from the root project