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

[haysclark]

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:

1. In a simple Typescript React project run npx sb@next init.
2. tsconfig.json should have the following setting enabled:
   "noImplicitAny": true, "noImplicitThis": true,
3. 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",
4. Add a simple _MyComponent_ via 'MyComponent.tsc`.
   ```
   import React from "react";

export const MyComponent = () => (

Woot!

);
```

1. 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: () => (
        <>
          <Title />
          <Subtitle />
          <Description
            markdown={`
# A Title
A description.
`}
          />
        </>
      ),
    },
  },
};

export const Basic = <MyComponent />
Basic.args = {};

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

[haysclark]

Looks like a _12.2.1_ version of @types/react-syntax-highlighter would be the ideal. Sadly, there is no _12.2.1_ types yet, and the last 12.2 PR for react-syntax-highlighter went stale recently and was Closed. :(

[Jessidhia]

A workaround; put in a __non-module__ .d.ts file and reference it somehow.

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
}

[stale[bot]]

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!

[adrian-potepa]

@Jessidhia thanks!

[stale[bot]]

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!

[amacleay-cohere]

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?

A workaround; put in a non-module .d.ts file and reference it somehow.

[nabeelvalley]

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?

A workaround; put in a non-module .d.ts file and reference it somehow.

Hi, I just added a file in my project with the path src/types/defs/react-syntax-highlighter.d.ts 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

[kaiyoma]

@types/react-syntax-highlighter is up to version 13.5.0 now: https://www.npmjs.com/package/@types/react-syntax-highlighter

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.