Module parse failed: Cannot use keyword 'await' outside an async function (8:0)

[lueans]

error in ./node_modules/curlconverter/util.js

Module parse failed: Cannot use keyword 'await' outside an async function (8: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
|
| // Top-level await is not available in Safari until 15 (TP)

await Parser.init()
| const Bash = await Parser.Language.load('./tree-sitter-bash.wasm')
| const parser = new Parser()

@ ./node_modules/curlconverter/generators/ansible.js 1:0-34 20:18-39
@ ./node_modules/curlconverter/index.js
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/general_tools/curl_tools/index.vue?vue&type=script&lang=js&
@ ./src/views/general_tools/curl_tools/index.vue?vue&type=script&lang=js&
@ ./src/views/general_tools/curl_tools/index.vue
@ ./src/views sync ^./.*$
@ ./src/store/modules/permission.js
@ ./src/store/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://172.17.12.166:80&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

[verhovsky]

Your best bet is to downgrade to before v4.0.0

    "curlconverter": "^3.21.0",

But also, can you tell me which version of Node.js you're using (node --version) and post some steps for me to reproduce how you're using curlconverter and where you're getting that error (the browser?)?

@NickCarneiro when you get a chance, can you make the 4.0.0 alpha not the latest release https://medium.com/@mbostock/prereleases-and-npm-e778fc5e2420 (I did this)

[lueans]

node --version
v12.16.3

[verhovsky]

The new curlconverter 4 pre-release supports Node 12 once again, so this shouldn't be an issue anymore.

[soham-sagade]

Hi I am facing this issue for node version 14.18.0 in a react project, any possible resolution?

[verhovsky]

If you're using Webpack to build your project, please take a look at how we use Webpack to build the curlconverter.com website. For this error, you have to add this to your webpack.config.js file

  experiments: {
    topLevelAwait: true
  },

https://github.com/curlconverter/curlconverter.github.io/blob/be82cb8335d5241aca8b7a6a0cdb2e7905435abd/webpack.config.js#L110-L112

[soham-sagade]

I don't see a webpack.config.js file in my project, should I create one?

[verhovsky]

How are you running your project?

[soham-sagade]

I am using this script to run my project: react-scripts start

[verhovsky]

@soham-sagade you're using create-react-app, which manages your Webpack config for you. There is no good way to ask create-react-app to tell Webpack to enable top-level await, you have to eject from create-react-app and start managing your Webpack config yourself (which is not recommended) and then add that experiments: {topLevelAwait: true} line. See this StackOverflow question for details if you want to do this: https://stackoverflow.com/questions/68443510/how-to-support-top-level-awaits-in-typescript

[amorin-gladia]

Same issue here using Node 18.9.0 with Vite.
I tried to use vite-plugin-top-level-await but it creates others issues.
Please, could you remove top level await from curlconverter ?

[verhovsky]

@amorin-gladia for Vite you can do this

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

but I think this requires Vite 3 because it has Webpack 5.

I don’t want to remove it because then all the functions would have to be async, except the Node version of the library doesn’t need the await, so then all of those would have to not be async, we would need two different functions. We could split the library into two curlconverter and curlconverter-web packages but I don’t want to do that either. I expected Webpack to release version 6 with top level await enabled already.