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:

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,

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

1. Add a simple MyComponent via 'MyComponent.tsc`.

import React from "react";

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

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® Core™ 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.

[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
}

[AndrewOCC]

I’ve also encountered this issue, @kaiyoma I can confirm the latest version of @types/react-syntax-highlighter does not have necessary type definitions for create-element ([definition].(https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a84a573295f22d04985033735efe6cb31a70f6bb/types/react-syntax-highlighter/index.d.ts))