Use JavaScript SDK in Vue project

Question

I'm trying to use the ConvertAPI JavaScript SDK in a Vue project. First, I used npm to install it:

npm install --save convertapi-js

Then, I tried to import and invoke it like so:

<script>
import ConvertApi from 'convertapi-js'
export default {
    created() {
        console.log(ConvertApi.auth({secret: 'secret'})
    }
}
</script>

However, when I try to use it I get this error:

Error in created hook: "TypeError: convertapi_js__WEBPACK_IMPORTED_MODULE_1___default.a.auth is not a function"

Do I need to import it in a different way? Here's the structure of the node_module:

convertapi-js
│   README.md
│   package.json   
│   LICENSE
│
└───lib
│   │   convertapi.d.ts
│   │   convertapi.d.ts.map
│   │   convertapi.js
│   │   convertapi.js.map
│   │   
└───src
    │   convertapi.ts
    │   file-param.ts
    │   ...

tony19 · Accepted Answer · 2020-12-29 01:43:16Z

The convertapi-js output doesn't have any exports. It simply sets a global named ConvertApi, as it's intended to be imported from <script> (e.g., before your app's <script>).

If you want to use the NPM installed version instead, you can use Webpack's exports-loader to export the ConvertApi global, so that your Vue code can import it:

Install exports-loader with:
```
npm i -D exports-loader
```

Either specify the loader inline:

import { ConvertApi } from 'exports-loader?type=commonjs&exports=ConvertApi!convertapi-js'

Or configure Webpack to automatically use exports-loader for convertapi-js:

// vue.config.js
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: require.resolve('convertapi-js'),
          loader: 'exports-loader',
          options: {
            type: 'commonjs',
            exports: 'ConvertApi',
          },
        },
      ],
    }
  }
}

Then, use a named import in your Vue code:

import { ConvertApi } from 'convertapi-js'

Collectives™ on Stack Overflow

Use JavaScript SDK in Vue project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related