syntaxhighlighter.d.ts - error TS7016: Could not find a declaration file for module 'react-syntax-highlighter/dist/cjs/create-element'.

Describe the bug I'm using 6.0.0-rc.14 with Typescript and I have (and would like to keep) 'no-implicitly-any' enabled in my tsconfig.json. After adding a some components from @storybook/addon-docs/blocks I start to get implicitly has an 'any' type. error when type-checking my project. (via tsc --no-emit).

node_modules/@storybook/components/dist/syntaxhighlighter/syntaxhighlighter.d.ts:3:27 - error TS7016: Could not find a declaration file for module 'react-syntax-highlighter/dist/cjs/create-element'. '...MY_PROJECT_PATH/node_modules/react-syntax-highlighter/dist/cjs/create-element.js' implicitly has an 'any' type.

To Reproduce Steps to reproduce the behavior:

In a simple Typescript React project run npx sb@next init.
tsconfig.json should have the following setting enabled:
```
"noImplicitAny": true,
"noImplicitThis": true,
```

Confirm version 6.0.0-rc.14 in package.json of following devDependencies:

"@storybook/addon-actions": "^6.0.0-rc.14",
"@storybook/addon-essentials": "^6.0.0-rc.14",
"@storybook/addon-links": "^6.0.0-rc.14",
"@storybook/react": "^6.0.0-rc.14",

Add a simple MyComponent via 'MyComponent.tsc`.

import React from "react";

export const MyComponent = () => (<div>Woot!</div>);

Add 'MyComponent.story.tsc` file that uses custom blocks.


import {
Description,
Props,
Subtitle,
Title,
} from "@storybook/addon-docs/blocks";
import React from "react";

export default { title: "Components/MyComponent", components: { MyComponent }, parameters: { docs: { page: () => ( <>

<pre><code> <Subtitle /> <Description markdown={`</code></pre> <h1>A Title</h1> <p>A description. `} /> </> ), }, }, };</p> <p>export const Basic = <MyComponent /> Basic.args = {};</p> <pre><code> 5. Run a project level TSC type-check via ```tsc --noEmit``` **Expected behavior** TSC output of: ```Found 0 errors.``` **System:** Environment Info: System: OS: macOS High Sierra 10.13.6 CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz Binaries: Node: 10.19.0 - ~/.nvm/versions/node/v10.19.0/bin/node npm: 6.13.4 - ~/.nvm/versions/node/v10.19.0/bin/npm Browsers: Chrome: 84.0.4147.89 Firefox: 63.0.3 Safari: 13.1.2 npmPackages: @storybook/addon-actions: ^6.0.0-rc.14 => 6.0.0-rc.14 @storybook/addon-essentials: ^6.0.0-rc.14 => 6.0.0-rc.14 @storybook/addon-links: ^6.0.0-rc.14 => 6.0.0-rc.14 @storybook/react: ^6.0.0-rc.14 => 6.0.0-rc.14 **Additional context** I initially tried to `npm install --save-dev @types/react-syntax-highlighter`; however, the latest version doesn't define the module, so I just added ```declare module "react-syntax-highlighter/dist/cjs/create-element";``` to a project level `*.d.ts` file as a work-around. The issues is likely being masked by this `@ts-ignore` https://github.com/storybookjs/storybook/blob/next/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx#L18-L19.</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/haysclark"><img src="https://avatars.githubusercontent.com/u/138324?v=4" />haysclark</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Looks like a <em>12.2.1</em> version of <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-syntax-highlighter">@types/react-syntax-highlighter</a> would be the ideal. Sadly, there is no <em>12.2.1</em> types yet, and the last <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/pull/44408"><code>12.2</code> PR for react-syntax-highlighter</a> went stale recently and was Closed. :( </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Jessidhia"><img src="https://avatars.githubusercontent.com/u/73085?v=4" />Jessidhia</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>A workaround; put in a <strong>non-module</strong> <code>.d.ts</code> file and reference it somehow.</p> <pre><code class="language-ts">declare module 'react-syntax-highlighter/dist/cjs/create-element' { import React from 'react' export type SyntaxHighlightNode = | (TextNode & Partial<Record<keyof TagNode<any>, never>>) | (TagNode<any> & Partial<Record<keyof TextNode, never>>) export interface TextNode { type: 'text' value: string } export interface TagNode<T extends React.ElementType> { tagName: T properties: React.ComponentProps<T> } export interface CreateElementProps { node: SyntaxHighlightNode stylesheet: import('react-syntax-highlighter').SyntaxHighlighterProps['customStyle'] style?: React.CSSProperties useInlineStyles?: boolean key: string | number } export default function createElement(props: CreateElementProps): string | JSX.Element }</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/stale[bot]"><img src="https://avatars.githubusercontent.com/in/1724?v=4" />stale[bot]</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/adrian-potepa"><img src="https://avatars.githubusercontent.com/u/6291752?v=4" />adrian-potepa</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>@Jessidhia thanks!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/stale[bot]"><img src="https://avatars.githubusercontent.com/in/1724?v=4" />stale[bot]</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/amacleay-cohere"><img src="https://avatars.githubusercontent.com/u/65668666?v=4" />amacleay-cohere</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>At the risk of sounding like I have no idea what I'm doing, @Jessidhia could you elaborate on a good way to "reference it somehow"? Does it just need to be in the source tree with other storybook files or does that require some webpack configuration manipulation?</p> <blockquote> <p>A workaround; put in a <strong>non-module</strong> <code>.d.ts</code> file and reference it somehow.</p> </blockquote> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/nabeelvalley"><img src="https://avatars.githubusercontent.com/u/36758308?v=4" />nabeelvalley</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>At the risk of sounding like I have no idea what I'm doing, @Jessidhia could you elaborate on a good way to "reference it somehow"? Does it just need to be in the source tree with other storybook files or does that require some webpack configuration manipulation?</p> <blockquote> <p>A workaround; put in a <strong>non-module</strong> <code>.d.ts</code> file and reference it somehow.</p> </blockquote> </blockquote> <p>Hi, I just added a file in my project with the path <code>src/types/defs/react-syntax-highlighter.d.ts</code> and included the contents from @Jessidhia's answer and it worked without any issues. No need to include it or reference it anywhere else, but not sure if your setup will need additional effort for any reason</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/kaiyoma"><img src="https://avatars.githubusercontent.com/u/10719780?v=4" />kaiyoma</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p><code>@types/react-syntax-highlighter</code> is up to version 13.5.0 now: <a href="https://www.npmjs.com/package/@types/react-syntax-highlighter">https://www.npmjs.com/package/@types/react-syntax-highlighter</a></p> <p>Does this include the necessary fixes? Can Storybook itself be upgraded to use the latest version? The workaround from above is fine for now, but it would be nice to fix this properly.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/AndrewOCC"><img src="https://avatars.githubusercontent.com/u/7157128?v=4" />AndrewOCC</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>I've also encountered this issue, @kaiyoma I can confirm the latest version of <code>@types/react-syntax-highlighter</code> does not have necessary type definitions for <code>create-element</code> ([definition].(<a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a84a573295f22d04985033735efe6cb31a70f6bb/types/react-syntax-highlighter/index.d.ts">https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a84a573295f22d04985033735efe6cb31a70f6bb/types/react-syntax-highlighter/index.d.ts</a>))</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/CalebJamesStevens"><img src="https://avatars.githubusercontent.com/u/61043345?v=4" />CalebJamesStevens</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Issue still going on. atomDark does not have proper types</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gimnathperera"><img src="https://avatars.githubusercontent.com/u/55834384?v=4" />gimnathperera</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Guys any update on this ?? I'm still having the issue.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lucasjinreal"><img src="https://avatars.githubusercontent.com/u/21303438?v=4" />lucasjinreal</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Type error: Could not find a declaration file for module 'react-syntax-highlighter'.</p> <p>500 years later, and am already on 15.5.0, still no. type????? </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/essar05"><img src="https://avatars.githubusercontent.com/u/4170609?v=4" />essar05</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>If you ended up here by searching for 'Could not find a declaration file for module 'react-syntax-highlighter/dist/esm/languages/prism/javascript' like me, I seem to have gotten around this problem by installing @types/react-syntax-highlighter and adding this at the top of the file where i had the errors:</p> <p><code>/// <reference path="path/to/node_modules/@types/react-syntax-highlighter/index.d.ts" /></code></p> <p>We're using react-syntax-highlighter in our stories though, so it's a different situation than the one posted by OP</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/danieluhl"><img src="https://avatars.githubusercontent.com/u/1517899?v=4" />danieluhl</a> commented <strong> 2 weeks ago</strong> </div> <div class="markdown-body"> <p>The helpful hint from TS seems to work for me:</p> <p><code>npm i --save-dev @types/react-syntax-highlighter</code></p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

storybookjs / storybook

syntaxhighlighter.d.ts - error TS7016: Could not find a declaration file for module 'react-syntax-highlighter/dist/cjs/create-element'. #11684