Elements v^8.1.3 => Unfound type declaration with NextJs 14.2.3

[nulltoken]

Follow up to #2345

Context

I'm trying to use elements in a Next.js app configured with static export

Current Behavior

Using a freshly installed Nextjs 14.2.3 app, install latest 8.1.3 version. Update app/page.tsx to include thse snippet from https://github.com/stoplightio/elements/issues/2345#issuecomment-1487506375

VsCode complains wth Could not find a declaration file for module '@stoplight/elements'.

Expected Behavior

• No warning
• npm run build works
• static export work as intended

Possible Workaround/Solution

No (easy) one

Steps to Reproduce

See above

Environment

Node 20.10

  "dependencies": {
    "@stoplight/elements": "^8.1.3",
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.3",
    "typescript": "^5"
  }

[kikisaeba]

I'm also affected by this.

[brendarearden]

@nulltoken do you have a sample app that you could provide for reproduction of this issue?

[github-actions[bot]]

This ticket has been labeled jira. A tracking ticket in Stoplight's Jira (STOP-575) has been created.

[nulltoken]

@brendarearden Thanks for getting back to me. Here's the sample app.

Just npm ci it and you should be good to go The issue will appear if you open the folder with VSCode and switch to the app/page.tsx file

my-app.zip

[Amachua]

I have same issue as the one described here and I would be pleased if a solution is shipped on the next release.

[weyert]

Yeah, you need to patch the package (like with patch-package) until this gets merged: https://github.com/stoplightio/scripts/pull/115

[javierlopeza]

To bypass the issue, until https://github.com/stoplightio/scripts/pull/115 gets merged, you can do:

npm install patch-package --save-dev

Add to your project's package.json the following under scripts:

"scripts": {
    ...
    "postinstall": "patch-package"
  },

Then create a folder patches in your project's root directory.

Inside patches create a file named @stoplight+elements+9.0.1.patch with the following content:

diff --git a/./node_modules/@stoplight/elements/package.json b/./node_modules/@stoplight/elements/package.json
--- a/./node_modules/@stoplight/elements/package.json
+++ b/./node_modules/@stoplight/elements/package.json
@@ -43,6 +43,7 @@
     "./styles.min.css": "./styles.min.css",
     "./web-components.min.js": "./web-components.min.js",
     ".": {
+      "types": "./index.d.ts",
       "require": "./index.js",
       "import": "./index.mjs"
     }

Now run npm install and the post-install script will take care of fixing the missing types line for you.