Not able to detect package in my file

[kvpasupuleti]

I have added this package from Yarn as @ideasio/add-to-homescreen-react

I couldn't recognize this package in my file system

When imported as

import AddToHomeScreen from '@ideasio/add-to-homescreen-react'

It is not getting detected or pointed and is throwing error

[ltparis2018]

Hm. I tried this to test it:

$ mkdir yarnTest && cd yarnTest $ yarn init npm install --save @ideasio/add-to-homescreen-react

This was successful. Now my package.json looks like this:

{
  "name": "yarnTest",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@ideasio/add-to-homescreen-react": "^1.0.4"
  }
}

and the project directory contains a node_modules directory with a subdirectory tree @ideasio/add-to-homescreen-react/ in it. Please note, that the @ideasio/add-to-homescreen-react dependency must be defined within the dependencies section (not devDependencies).

So it works for me. Could you compare your project configuration with this simple example, please? Is there any difference to it? Or do you have any further information you can provide that could help to analyze the problem?

[mkontsek]

I'm using typescript with SSR, had to do one crazy hack (dynamic import inside useEffect) and then used <AddToHSComponent.default /> to make it run.

[bruno-barros]

Same here. I'm using Ionic 5 with React.

TypeScript error in D:/laragon/www/5rindex-app/src/App.tsx(6,29):
Could not find a declaration file for module '@ideasio/add-to-homescreen-react'. 'D:/laragon/www/5rindex-app/node_modules/@ideasio/add-to-homescreen-react/build/AddToHomeScreen.js' implicitly has an 'any' type.
  Try `npm install @types/ideasio__add-to-homescreen-react` if it exists or add a new declaration (.d.ts) file containing `declare module '@ideasio/add-to-homescreen-react';

Any idea?

[ahmedfadhil]

Any solution on this ?

[gauthampait]

Create a file named types.d.ts next to App.tsx. Then paste this, declare module '@ideasio/add-to-homescreen-react';

[N3BB3Z4R]

Create a file named types.d.ts next to App.tsx. Then paste this, declare module '@ideasio/add-to-homescreen-react';

This works great for me on my reactjs + ts v14.17 project. I renamed to AddToHJomeScreen.d.ts and paste the whole declaration:

declare module '@ideasio/add-to-homescreen-react' {
  interface PlatformPropType {
    showClasses?: string[]
    targetUrl?: string
    images?: { src?: string; alt?: string }[]
    action?: { ok?: string; cancel?: string; guidanceCancel?: string }
  }
  interface AddToHomeScreenProps {
    appId?: string
    debug?: boolean
    activateLogging?: boolean
    startAutomatically?: boolean
    skipFirstVisit?: boolean
    minPageViews?: number
    startDelay?: number
    lifespan?: number
    displayPace?: number
    mustShowCustomPrompt?: boolean
    maxDisplayCount?: number
    validLocation?: RegExp[]
    onInit?: () => void
    onShow?: () => void
    onAdd?: () => void
    onInstall?: () => void
    onCancel?: () => void
    showClasses?: string[]
    showClass?: string
    hideClass?: string
    customCriteria?: null | (() => void) | boolean
    customPromptContent?: {
      title?: string
      src?: string
      cancelMsg?: string
      installMsg?: string
      guidanceCancelMsg?: string
    }
    customPromptElements?: {
      container?: string
      containerAddOns?: string
      banner?: string
      bannerAddOns?: string
      logoCell?: string
      logoCellAddOns?: string
      logo?: string
      logoAddOns?: string
      titleCell?: string
      titleCellAddOns?: string
      title?: string
      titleAddOns?: string
      cancelButtonCell?: string
      cancelButtonCellAddOns?: string
      cancelButton?: string
      cancelButtonAddOns?: string
      installButtonCell?: string
      installButtonCellAddOns?: string
      installButton?: string
      installButtonAddOns?: string
      guidance?: string
      guidanceAddOns?: string
      guidanceImageCell?: string
      guidanceImageCellAddOns?: string
      guidanceCancelButton?: string
      guidanceCancelButtonAddOns?: string
    }
    customPromptPlatformDependencies?: {
      native?: PlatformPropType
      chromium?: PlatformPropType
      edge?: PlatformPropType
      iphone?: PlatformPropType
      ipad?: PlatformPropType
      firefox?: PlatformPropType
      samsung?: PlatformPropType
      opera?: PlatformPropType
    }
  }
  declare const AddToHomeScreen: React.FC<AddToHomeScreenProps>
  export default AddToHomeScreen
}