search

retyui / react-quick-pinch-zoom

A react component that providing multi-touch gestures for zooming and dragging on any DOM element.
https://react-quick-pinch-zoom.netlify.app/
308 stars 46 forks source link

react import missing in types.ts #85

Closed shahshreya2108 closed 10 months ago

shahshreya2108 commented 10 months ago

Getting below error while running npm run build in my project

(!) Plugin postcss: start value has mixed support, consider using flex-start instead src/Components/LineLinkDisplay/LineLinkItem/LineLinkItem.module.scss created dist/cjs, dist/es in 7.9s node_modules/react-quick-pinch-zoom/esm/PinchZoom/types.d.ts:28:21 - error TS2503: Cannot find namespace 'React'. 28 containerProps: React.HTMLAttributes<HTMLDivElement>; ~~~~~ Found 1 error in node_modules/react-quick-pinch-zoom/esm/PinchZoom/types.d.ts:28

retyui commented 10 months ago

can you show stdout

npm list react @types/react
shahshreya2108 commented 10 months ago 
storefront-h5-sdk@3.0.10 /Users/shreyakotadia/Documents/Shreya/Workspace/paytm/storefront_h5_sdk
├─┬ react-dom@18.2.0
│ └── react@18.2.0 deduped
├─┬ react-quick-pinch-zoom@5.0.0
│ └── react@18.2.0 deduped
├─┬ react-visibility-sensor@5.1.1
│ └── react@18.2.0 deduped
└── react@18.2.0
retyui commented 10 months ago

the next command should help:

npm install --save @types/react
shahshreya2108 commented 10 months ago

Now getting below error:

node_modules/react-quick-pinch-zoom/esm/PinchZoom/component.d.ts:1:8 - error TS1259: Module '"/Users/shreyakotadia/Documents/Shreya/Workspace/test/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

import React from 'react';
         ~~~~~

  node_modules/@types/react/index.d.ts:32:1
    32 export = React;
       ~~~~~~~~~~~~~~~
    This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.

node_modules/react-visibility-sensor/index.d.ts:34:38 - error TS2694: Namespace 'React' has no exported member 'StatelessComponent'.

34   const ReactVisibilitySensor: React.StatelessComponent<Props>;
                                        ~~~~~~~~~~~~~~~~~~

Found 2 errors in 2 files.

Errors  Files
     1  node_modules/react-quick-pinch-zoom/esm/PinchZoom/component.d.ts:1
     1  node_modules/react-visibility-sensor/index.d.ts:34
retyui commented 10 months ago
shahshreya2108 commented 10 months ago

This helped, thanks a lot for the quick release!

retyui commented 10 months ago

thanks for letting me know)

brightertools commented 8 months ago

I seem to have this same error: Could not resolve "prop-types"

Am following this example: https://blog.logrocket.com/adding-zoom-pan-pinch-react-web-apps/ but using vite

image

+-- @types/react-dom@18.2.18 | -- @types/react@18.2.47 deduped +-- @types/react@18.2.47 +-- react-dom@18.2.0 |-- react@18.2.0 deduped +-- react-quick-pinch-zoom@5.1.0 | -- react@18.2.0 deduped -- react@18.2.0

retyui commented 8 months ago

I seem to have this same error: Could not resolve "prop-types"

Am following this example: https://blog.logrocket.com/adding-zoom-pan-pinch-react-web-apps/ but using vite

image

+-- @types/react-dom@18.2.18 | -- @types/react@18.2.47 deduped +-- @types/react@18.2.47 +-- react-dom@18.2.0 |-- react@18.2.0 deduped +-- react-quick-pinch-zoom@5.1.0 | -- react@18.2.0 deduped-- react@18.2.0

see: https://github.com/retyui/react-quick-pinch-zoom/issues/76#issuecomment-1668561252