Typescript / Jest Compatibility Issues

[tbell511]

Hello!

We recently started using this package and it's been great.

However, my team noticed that using the package causes Jest to break 😬

We tried importing via const Webflow = require("webflow-api"); and import Webflow from "webflow-api"; but the issue happens for both.

First time we've ever seen Jest freak out about something like this.

Versions

webflow-api version 1.2.2 typescript version 4.4.4 node version 16.14.0

[tbell511]

Tried adding

transformIgnorePatterns: ["/webflow-api/"]

to our Jest config but no luck

[johnagan]

oh interesting... your test seems to be failing on an axios import, rather than webflow. Could that be a factor? Maybe you're pulling an ES5 axios module rather than CJS?

[tbell511]

Added those settings and problem persists 🤔

Also, deleted the entire node_modules folder, ran yarn again, but same error.

[tbell511]

That does seem to be likely.

However, not sure how I adjust the axios import within the webflow package.

[johnagan]

does your root package use axios?

[tbell511]

yes it does.

We're importing it via import axios from "axios";

[johnagan]

I'll need to see your whole jest config unfortunately. feels like you're mixing ES5 with CJS which is the core problem - not webflow specific. Hard to say for sure though

[tbell511]

  "jest": {
    "preset": "ts-jest",
    "roots": [
      "tests"
    ],
    "testEnvironment": "node",
    "testPathIgnorePatterns": [
      "tests/utils"
    ],
    "moduleFileExtensions": [
      "js",
      "ts"
    ],
    "testTimeout": 20000,
    "setupFiles": [
      "dotenv/config"
    ],
    "moduleNameMapper": {
      "jose/jwt/verify": "<rootDir>/node_modules/jose/dist/node/cjs/jwt/verify",
      "jose/key/import": "<rootDir>/node_modules/jose/dist/node/cjs/key/import",
      "jose/jwe/compact/encrypt": "<rootDir>/node_modules/jose/dist/node/cjs/jwe/compact/encrypt",
      "jose/jwe/compact/decrypt": "<rootDir>/node_modules/jose/dist/node/cjs/jwe/compact/decrypt"
    },
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/"
    ],
    "transform": {
      "^.+\\.graphql$": "graphql-import-node/jest",
      "^.+\\.ts?$": "ts-jest"
    },
    "clearMocks": true
  }

[johnagan]

can you share your tsconfig too please?

[tbell511]

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": false,
    "preserveConstEnums": true,
    "inlineSourceMap": true,
    "outDir": "build",
    "target": "es5",
    "lib": ["es2020", "dom"],
    "strict": false,
    "moduleResolution": "Node",
    "downlevelIteration": true,
    "rootDir": "./",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "baseUrl": ".",
    "allowJs": false,
    "resolveJsonModule": true,
    "declaration": true,
    "paths": {
      "jose/*": ["node_modules/jose/dist/node/esm/*"]
    },
    "types": ["express", "node", "jest", "graphql-import-node"]
  },
  "include": ["src", "utils", "tests", "db"],
  "exclude": ["node_modules", "src/types/generated/types.ts"]
}

[johnagan]

I'm not sure tbh. I'd try import Webflow from "webflow-api"; and removing the transformIgnorePatterns.

Looking at your stacktrace, webflow imports axios with CJS like this:

const axios_1 = __importDefault(require("axios"));

the following line from Axios is an ES5 import

import axios from './lib/axios.js';

It feels like something in your compile chain is expecting imports to be in CJS and then when it hits axios it fails. I would think that's something in your TypeScript settings, but nothing is jumping out at me.

[tbell511]

Made the changes but still no luck 😭

[tbell511]

I also have a webpack config, not sure if that's related.

[tbell511]

ah yeah I guess webpack doesn't matter here.

[johnagan]

if you have some way to give me a repo to reproduce it, I can try to find the problem. I'm not sure how to diagnose outside of that though 😕

[tbell511]

Is a screen share an option? 😄

[johnagan]

I could possibly next week

[tbell511]

I may have fixed the issue.

Added this to our jest config

    "moduleNameMapper": {
      ...
      "axios": "<rootDir>/node_modules/axios/dist/axios.js"
    },

We're no longer getting the error and jest is successfully running 🎉 Still trying to see if there are other unintended side effects of the above change tho.

Found this for inspiration (https://stackoverflow.com/questions/73958968/cannot-use-import-statement-outside-a-module-with-axios)

Does this give you any ideas of what the root issue could be?

[tbell511]

I did confirm we are using other packages as well that use Axios as a dependency. They also import axios via import axios from "axios"

However we've had zero issues with those other packages.

One of the packages for example is postmark

[johnagan]

no idea ¯_(ツ)_/¯

Glad you found a fix for now. If you discover something we can/should be doing in the SDK, we’d welcome a PR 😎

[tbell511]

Sounds like a plan 👍

[gugahoi]

Just thought I'd add to this that I am also experiencing this problem on the Axios import. This is the only package where this problem presents and I do not use Axios in my package so seems specific to the configuration/release on this webflow package.