Unable to initialize WebflowClient()

App Developers Developer APIs
1

Hi,

I am trying to test a Notion2Webflow Application to speed up our internal process in the company, but I am unable to initialize the Webflow Client and I truly don’t understand why.

I have a webflow.ts file with the following code:

import { Webflow } from 'webflow-api';
import dotenv from 'dotenv';
import path from 'path';
import { Level } from 'level';

dotenv.config();

const dbPath = path.resolve(__dirname, 'data');
const data = new Level(dbPath);

async function getToken() {
    try {
        const token = await data.get('token');
        return token;
    } catch (error) {
        console.error('Error retrieving token:', error);
        throw error;
    }
}

async function initializeWebflowClient() {
    const token = await getToken();
    return new Webflow({ token: token });
}

export async function fetchWebflowCollectionSchema() {
    try {
        const api = await initializeWebflowClient();
        const collectionId = process.env.WEBFLOW_COLLECTION_ID;
        const collection = await api.collections({ collectionId });
        console.log('Fetched Webflow collection schema:', collection);
        return collection;
    } catch (error) {
        console.error('Error fetching Webflow collection schema:', error);
        throw error;
    }
}

export async function updateWebflowCMS(data: any) {
    try {
        const api = await initializeWebflowClient();
        const collectionId = process.env.WEBFLOW_COLLECTION_ID;

        const newItem = {
            'fields': {
                'name': data.title,
                'slug': data.title.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g, ''),
                '_archived': false,
                '_draft': true,
                'blog-content-rich-text': data.body,
                'meta-description': data.metaDescription,
                'short-description': data.shortDescription,
                'featured-sentence': data.featuredSentence
            }
        };

        const response = await api.createItem({
            collectionId: collectionId,
            fields: newItem.fields
        });

        console.log('Created new CMS item:', response);
    } catch (error) {
        console.error('Error updating Webflow CMS:', error);
        throw error;
    }
}

In my .env file I have the variables saved:

CHATGPT_API_KEY= my_chatgpt_api_key
NOTION_API_KEY= my_notion_api_key
NOTION_DATABASE_ID= my_notion_database_id
WEBFLOW_API_KEY= your_webflow_api_key
WEBFLOW_COLLECTION_ID= my_webflow_collection_id
SERVER_HOST=https://x-x-x-x-x.ngrok-free.app
PORT=3000

Inside the webflow.ts file I am getting this error:

async function initializeWebflowClient() {
    const token = await getToken();
    return new Webflow({ token: token });
}

(the word Webflow is red underlined with the following error msg →
This expression is not constructable.
Type ‘typeof import(“/Users/diebrudie/code/diebrudie/webflow-content-automation/node_modules/webflow-api/api/index”)’ has no construct signatures.ts(2351)
import Webflow
)

Obviously when I run my application, I get the same error in the terminal:

index.ts:859
return new TSError(diagnosticText, diagnosticCodes, diagnostics);
^
TSError: ⨯ Unable to compile TypeScript:
webflow.ts:23:16 - error TS2351: This expression is not constructable.
Type ‘typeof import(“/Users/project_parent_folder/node_modules/webflow-api/api/index”)’ has no construct signatures.

23 return new Webflow({ token: token });

**Any idea of how to fix this? **
I can provide any other information if needed.

Thank you in advance!!

2

What version of the webflow-api package are you using?

Starting in v2 of the package, you’ll want to:

import {WebflowClient} from "webflow-api";

rather than import {Webflow}. More on the migration note here.