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

Answer 1

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> (eg, 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:

1. Install exports-loader with:

    npm i -D exports-loader

2. 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'