Type Error on InstagramEmbed

[sectsect]

Getting the property 'style' not defined error while using in TypeScript:

<InstagramEmbed
  style={{
    maxWidth: 540,
  }}
  url={url}
  width="100%"
/>

error TS2322: Type '{ style: { maxWidth: number; }; url: string; width: string; }' is not assignable to type 'IntrinsicAttributes & InstagramEmbedProps'.
  Property 'style' does not exist on type 'IntrinsicAttributes & InstagramEmbedProps'.

19           style={{
             ~~~~~

[4:06:24 PM] Found 1 error. Watching for file changes.

[justinmahar]

Hmm I'm a bit stumped on this one. The demo site uses the style attribute for the fluid width, like you're doing, so I'm not sure why TS is complaining for you.

If I add style to the embed, it autocompletes and successfully determines the source of the style property, React.HTMLAttributes<HTMLDivElement>:

The only thing I can think is to check your version of TypeScript. The project is being built with TS 4.9.4.

"typescript": "^4.9.4",

You could also try running npm uninstall react-social-media-embed && npm install react-social-media-embed@latest to remove and reinstall the package, then see if TS still complains.

[sectsect]

I reinstalled and ran. The details are as follows.

npm uninstall react-social-media-embed && npm install react-social-media-embed@latest

I also tried the following, but it didn't work.

rm -rf node_modules && rm package-lock.json
npm i

package.json

"dependencies": {
  "react-social-media-embed": "^2.3.5",
  ...
},
"devDependencies": {
  "typescript": "^4.9.4"
  ...
},

Instagram.tsx

import type { NextPage } from 'next';
import { InstagramEmbed } from 'react-social-media-embed';

interface Props {
  instagramId: string;
}

const Instagram: NextPage<Props> = ({ instagramId: id }) => {
  const url = `https://www.instagram.com/p/${id}/`;

  return (
    <div className="py-4 md:py-6">
      <InstagramEmbed
        style={{
          maxWidth: 540,
        }}
        className="max-w-[540px]"
        url={url}
        width="100%"
      />
    </div>
  );
};

export default Instagram;

src/components/elements/Instagram/Instagram.tsx:15:11 - error TS2322: Type '{ style: { maxWidth: number; }; url: string; width: string; }' is not assignable to type 'IntrinsicAttributes & InstagramEmbedProps'.
  Property 'style' does not exist on type 'IntrinsicAttributes & InstagramEmbedProps'.

15           style={{
             ~~~~~

[1:33:18 PM] Found 1 error. Watching for file changes.

FYI

The className prop also seems to throw an error.

[sectsect]

As a test, Adding the style property to the interface manually seems to fix this error.

InstagramEmbed.d.ts

import * as React from 'react';
import { DivProps } from 'react-html-props';
import { Frame } from '../hooks/useFrame';
import { PlaceholderEmbedProps } from '../placeholder/PlaceholderEmbed';
export interface InstagramEmbedProps extends DivProps {
    url: string;
    width?: string | number;
    height?: string | number;
    linkText?: string;
    /** Deprecated -- This has no effect. Captions are always visible due to https://github.com/justinmahar/react-social-media-embed/issues/26 */
    captioned?: boolean;
    placeholderImageUrl?: string;
    placeholderSpinner?: React.ReactNode;
    placeholderSpinnerDisabled?: boolean;
    placeholderProps?: PlaceholderEmbedProps;
    embedPlaceholder?: React.ReactNode;
    placeholderDisabled?: boolean;
    scriptLoadDisabled?: boolean;
    retryDelay?: number;
    retryDisabled?: boolean;
    igVersion?: string;
    frame?: Frame;
    debug?: boolean;
+   style?: React.CSSProperties;
}
export declare const InstagramEmbed: ({ url, width, height, linkText, placeholderImageUrl, placeholderSpinner, placeholderSpinnerDisabled, placeholderProps, embedPlaceholder, placeholderDisabled, scriptLoadDisabled, retryDelay, retryDisabled, igVersion, frame, debug, ...divProps }: InstagramEmbedProps) => JSX.Element;

[justinmahar]

So the props for className and style come from a TypeScript type alias library called react-html-props.

Perhaps adding that to your dev dependencies will shake some sense into the TS compiler?

npm i --save-dev react-html-props

[sectsect]

@justinmahar

Yes. Adding the dependency directly to the project solves the problem.

[sectsect]

@justinmahar

It looks like can't reach types in react-html-props. It indicates that it is not bundled in production as it is a development dependency.

Maybe we should move react-html-props to dependencies (from devDependencies).

FYI: This problem does not occur on npm link environment.

[micahjsmith]

in my TS project I also had to install react-html-props into dependencies (as well as @types/youtube-player into devDependencies)

[justinmahar]

As of v2.5.5, both react-html-props and @types/youtube-player are now in dependencies instead of devDependencies.